Astro 5.0 Dynamic Routes で SEO 最適化する実装パターン【2026年5月最新】
Astro 5.0 の動的ルーティングで構造化データ・サイトマップ・OGP を最適化する実装手法を解説。getStaticPaths と Astro.params の活用でクロール効率を最大化
Astro 5.0 では Dynamic Routes（動的ルーティング）の機能が強化され、大量のページを持つサイトでも効率的に SEO 最適化を実装できるようになった。本記事では、getStaticPaths() を活用した動的ページ生成と、そこに埋め込む構造化データ・メタタグ・サイトマップの実装パターンを解説する。
Astro Dynamic Routes の基本と SEO における役割
Astro の Dynamic Routes は、[slug].astro のようなファイル名で動的なパスを生成する仕組みだ。ビルド時に getStaticPaths() が呼ばれ、生成すべきページのリストを返す。
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
const posts = await fetchAllPosts(); // CMS や Markdown から取得
return posts.map((post) => ({
params: { slug: post.slug },
props: { post }
}));
}
const { post } = Astro.props;この仕組みを SEO 観点で活用すると、以下の利点がある：
- URL 構造の統一:
/blog/[slug]形式で階層構造を保持 - メタタグの動的生成: タイトル・description を記事ごとに最適化
- 構造化データの埋め込み: JSON-LD を記事データから自動生成
- サイトマップ生成の効率化:
getStaticPaths()の返り値を流用してサイトマップを作成
flowchart LR
A["getStaticPaths()"] --> B["ページデータ取得"]
B --> C["params/props 生成"]
C --> D["HTML 生成"]
D --> E["メタタグ埋め込み"]
D --> F["構造化データ埋め込み"]
C --> G["サイトマップ生成"]Dynamic Routes のビルドフローと SEO 最適化の関係
動的ページに構造化データを埋め込む実装パターン
構造化データ（JSON-LD）は、Google が記事内容を理解しやすくするための情報だ。Astro では <script type="application/ld+json"> タグに JSON を埋め込む。
以下は記事ページに Article スキーマを埋め込む例：
---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
const posts = await fetchAllPosts();
return posts.map((post) => ({
params: { slug: post.slug },
props: { post }
}));
}
const { post } = Astro.props;
const { title, description, publishedAt, author, imageUrl } = post;
// 構造化データの生成
const structuredData = {
"@context": "https://schema.org",
"@type": "Article",
"headline": title,
"description": description,
"datePublished": publishedAt,
"author": {
"@type": "Person",
"name": author
},
"image": imageUrl,
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
};
---
<html>
<head>
<title>{title}</title>
<meta name="description" content={description} />
<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
</head>
<body>
<article>
<h1>{title}</h1>
<div set:html={post.content} />
</article>
</body>
</html>ポイント：
set:html={JSON.stringify(structuredData)}で JSON をエスケープせずに埋め込むdatePublishedは ISO 8601 形式（2026-05-11T00:00:00Z）で記述authorとpublisherは必須フィールドなので省略しない
この構造化データにより、Google Search Console のリッチリザルトテストでエラーが出なくなり、検索結果にサムネイル・著者名・公開日が表示されやすくなる。
OGP・Twitter Card の動的生成
SNS シェア時の表示を最適化するため、Open Graph Protocol（OGP）と Twitter Card のメタタグも動的に生成する。
---
const { post } = Astro.props;
const { title, description, imageUrl, slug } = post;
const canonicalUrl = `https://example.com/blog/${slug}`;
---
<head>
<!-- 基本メタタグ -->
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
<!-- OGP -->
<meta property="og:type" content="article" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content={imageUrl} />
<meta property="og:site_name" content="サイト名" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={imageUrl} />
</head>注意点：
og:imageの画像サイズは 1200×630px 推奨canonicalURL は必ず絶対パスで記述（相対パスだとクロールエラーになる可能性）twitter:cardはsummary_large_imageを指定すると Twitter/X でのエンゲージメントが高まる
サイトマップ生成と動的ルートの統合
Astro 5.0 では @astrojs/sitemap インテグレーションで自動生成できるが、動的ルートのページも確実に含めるには astro.config.mjs で site を明示する必要がある。
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap()]
});ビルド時に dist/sitemap-0.xml が自動生成される。Dynamic Routes で生成されたページも自動的に含まれる。
カスタマイズ例：特定のページを除外したい場合は filter オプションを使う。
integrations: [
sitemap({
filter: (page) => !page.includes('/drafts/')
})
]生成されたサイトマップは Google Search Console の「サイトマップ」セクションから送信することで、クロール効率が向上する。
sequenceDiagram
participant Build as Astro Build
participant GSP as getStaticPaths()
participant Sitemap as @astrojs/sitemap
participant GSC as Google Search Console
Build->>GSP: 全ページのパス取得
GSP-->>Build: [{params, props}]
Build->>Sitemap: ページリスト渡す
Sitemap-->>Build: sitemap-0.xml 生成
Build->>GSC: サイトマップ送信
GSC-->>Build: クロール開始サイトマップ生成とクロールリクエストのフロー
パンくずリスト構造化データの実装
パンくずリスト（Breadcrumb）は、Google 検索結果に表示される階層リンクとして重要だ。Dynamic Routes では階層が自動的に決まるため、パンくずリストも自動生成しやすい。
---
const { slug } = Astro.params;
const breadcrumbList = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "ブログ",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": post.title,
"item": `https://example.com/blog/${slug}`
}
]
};
---
<script type="application/ld+json" set:html={JSON.stringify(breadcrumbList)} />パンくずリストの構造化データを追加すると、Google 検索結果に以下のように表示される：
ホーム > ブログ > 記事タイトルこれによりクリック率（CTR）が向上する。
まとめ
Astro 5.0 の Dynamic Routes を活用することで、以下の SEO 最適化が効率的に実現できる：
- 構造化データの自動埋め込み:
getStaticPaths()の props から JSON-LD を生成 - OGP・Twitter Card の動的生成: SNS シェア時の視認性向上
- サイトマップ自動生成:
@astrojs/sitemapでクロール効率を最大化 - パンくずリスト構造化データ: 階層構造を検索結果に表示
これらの実装パターンを組み合わせることで、大量のページを持つサイトでも一貫性のある SEO 最適化を維持できる。特に CMS と連携する場合、Dynamic Routes の仕組みを理解しておくと開発効率が大幅に向上する。