ネットソリューション

Astroを使ってオウンドメディアを作る-2

calendar_month2024-07-12

第2回目では、パンくずの出力と.mdxファイルの設定について解説します。
パンくずは単なるナビゲーションの支援だけでなく、適切なマークアップによって検索エンジンにサイトの階層構造を正確に伝える重要な役割を果たします。

さらに、mdxファイルを利用することで、テキストベースのファイルでありながら、高機能なAstroコンポーネントを簡単に組み込むことができます。

Astroでのパンくずリストの構造化マークアップ

パンくずリストは、ウェブサイトのナビゲーション支援だけではなく、検索エンジンにサイトの階層構造を正確に伝えるための重要な要素です。
構造化マークアップを使用することで、検索エンジンにサイトの階層構造を正確に伝え、検索結果画面での表示が向上し、SEO上有利になることがあります。
以下は、Astroを使用して生成したパンくずリストコンポーネントの一例です。
当サイトでもこちらを使用しています。

---
interface Props {
  lists: ListItem[];
}
interface ListItem {
  path: string;
  name: string;
}
const { lists } = Astro.props;
---

<nav class="breadcrumb" aria-label="breadcrumb">
  <div class="breadcrumb-inner">
    <ol class="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/techblog/" itemprop="item"><span itemprop="name">ホーム</span></a>
        <meta itemprop="position" content="1" />
      </li>
      {
        lists.map((list: ListItem, index: number) => (
          <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            {lists.length - 1 !== index ? (
              <a href={`${list.path}/`} itemprop="item">
                <span itemprop="name">{list.name}</span>
              </a>
            ) : (
              <span itemprop="name">{list.name}</span>
            )}
            <meta itemprop="position" content={(index + 2).toString()} />
          </li>
        ))
      }
    </ol>
  </div>
</nav>

コンポーネントは下記のように表示用の配列を渡して使用します。

---
const path = [
  {
    path: "/techblog/",
    name: "ホーム"
  },
  {
    path: "/techblog/net-solution/",
    name: "ネットソリューション"
  },
  {
    path: "",
    name: "Astroを使ってオウンドメディアを作る-2"
  }
]
---
<Breadcrumb lists={path} />

静的なMarkdownと動的なAstroを組み合わせる: .mdxファイルの利用

ページコンテンツ内でAstroのコンポーネントを使用するために、.mdxファイルを採用しました。
これにより、簡単なMarkdown記法とAstroコンポーネントを組み合わせて、多彩なコンテンツを実装することができます。
将来的には、Astroコンポーネントを使用して画像のカラムレイアウトやモーダルなどのJavaScriptが絡んだ表現も実装する予定です。

.mdxファイルでAstroを使用するためには、@astrojs/mdxパッケージをインストールする必要があります。
また、astro.config.mjsファイル内でこのパッケージを読み込む設定を行います。以下はその例です。

import mdx from '@astrojs/mdx';
import remarkBreaks from 'remark-breaks';

export default defineConfig({
  integrations: [
      mdx({
        remarkPlugins: [remarkBreaks],
      }),
    ],
});