Astro SEO：Astro サイトを Google で上位表示させ、AI に引用されるための方法

クイック診断

SEOはあなたに向いている？どう始めるべき？

質問 1 / 425%

あなたの商品はGoogleで検索されていますか？

はい、そう思ういいえ、新しいか非常にニッチわからない

Astro SEO とは、このクリーンな HTML を上位表示されるページに仕上げる作業です。Google の JavaScript SEO の基本は、JavaScript サイトがクロール、レンダリング、インデックス登録の三段階で処理されると説明し、すべてのボットが JavaScript を実行できるわけではないため、サーバーサイドレンダリングや事前レンダリングは今でも優れた選択だと述べています。Astro は初期状態でこの位置からスタートします。本ガイドでは残りの設定を一つずつ取り上げ、すべての挙動を Astro 公式ドキュメントで確認しました。ちなみに、いまお読みの sorank.com も Astro で動いています。

Astro は SEO に向いているのか？

技術面では、向いています。Astro はビルド時にコンポーネントを HTML にレンダリングし、React や Vue などのフレームワークが通常ブラウザに送る JavaScript を取り除きます。そのため、JavaScript SEO のガイドで紹介している典型的な問題（空の HTML シェル、レンダリング後にしか現れないコンテンツ、本物のアンカータグではないリンク）を避けられます。シングルページアプリケーションのルーティングの落とし穴もありません。Astro の各ルートは、独自の HTML ファイルを持つ実在の URL だからです。

Astro がやらないことも同じくらい重要です。組み込みの SEO プラグイン、自動生成のメタディスクリプション、自動の canonical タグ、構造化データはどれもありません。次の表で、最初から手に入るものと自分で作るものを整理します。

静的レンダリングとサーバーレンダリング、SEO に向くのはどちらか？

オンデマンドレンダリングに関する Astro のドキュメントは明快です。デフォルトでは、ページ、ルート、API エンドポイントはビルド時に静的ページとして事前レンダリングされます。SEO の観点では、静的出力が最も安全な既定値です。各 URL は完成済みの HTML ファイルで、CDN から配信され、高速で、どの訪問者にもどのボットにも同じ内容が届きます。

オンデマンド（サーバー側）レンダリングには、ホスティング先に合わせたアダプター（Node、Netlify、Vercel、Cloudflare など）が必要です。そのうえで、export const prerender = false で特定のルートだけを事前レンダリングから外すか、output: 'server' でプロジェクト全体を切り替えて静的ページを個別に戻します。どちらのモードも完全な HTML を出力するので、Google から見える内容は同じです。違いは別のところにあります。

• 速度：静的ファイルは即座に返されますが、サーバーでレンダリングするページはサーバーの応答時間に左右され、Largest Contentful Paint に影響します。
• 鮮度：在庫、価格、検索結果など頻繁に変わるページには、サイト全体を再ビルドするより時間のかからないサーバーレンダリングが向いています。
• ツール：サイトマップなど一部の統合は、サーバー側の動的ルートを認識できません（後述）。

実務上のルールは、マーケティングページ、ブログ記事、ドキュメントは静的のままにし、リアルタイムのデータが必要なルートだけをオンデマンドでレンダリングすることです。Astro のドキュメントも同じく、ほとんどのページがオンデマンドレンダリングを必要とするまではデフォルトの静的モードを維持するよう勧めています。

Astro でメタタグと canonical URL を設定するには？

SEO コンポーネントを一つ作り（BaseHead や Seo という名前がよく使われます）、すべてのレイアウトの head に読み込みます。タイトル、説明文、任意の画像、任意の noindex フラグを受け取り、次を出力します。

1. ページごとに固有の title タグ（主要キーワードを前のほうに配置）
2. ページごとに手書きするメタディスクリプション（検索結果のスニペットになります）
3. Astro.url.pathname と設定の site 値から絶対 URL として組み立てる canonical タグ
4. リンクプレビュー用の Open Graph タグやソーシャルタグ（タイトル、説明、画像、URL）
5. インデックスから外すべきページ用の robots メタタグ

まず astro.config.mjs で site オプションを設定してください。canonical、サイトマップ、ソーシャルタグのすべてがこの値に依存します。次に trailingSlash のポリシー（'always' か 'never'）を決めて守り、/blog/post と /blog/post/ が同じページの二つのバージョンとして競合しないようにします。トラッキング用パラメーターで重複ページが生まれないよう、canonical からはクエリ文字列を除きます。

Astro でサイトマップと robots.txt を生成するには？

@astrojs/sitemap のページで解説されている公式統合を使います。npx astro add sitemap を実行すると、インストールと設定への追加が行われます。site オプションが必須で、ビルド時に番号付きファイル（sitemap-0.xml、大規模サイトではさらに追加）を参照する sitemap-index.xml を書き出します。1 ファイルあたりの上限はデフォルトで 45,000 件で、entryLimit オプションで変更できます。この形式が初めての方は、用語集の XML サイトマップで Google がどう利用するかをご覧ください。

SEO にとって重要な設定は三つです。

• filter：各ページの URL を受け取る関数です。サンクスページ、サイト内検索、下書き、noindex のページには false を返し、サイトマップにはインデックス可能な URL だけを載せます。
• i18n：言語フォルダを言語コードに対応づけ、各エントリに hreflang の代替 URL を追加します。
• customPages：統合が自力で見つけられない URL を追加します。

robots.txt は、ほとんどのサイトで public フォルダに静的ファイルを置けば十分です。ステージングと本番で内容を変えたい場合は、エンドポイント（src/pages/robots.txt.ts）から生成します。どちらの場合も sitemap-index.xml を指す Sitemap 行を加え、公開前に robots.txt チェッカーで結果を確認してください。同じエンドポイントの手法で llms.txt ファイルも作れます。内容については llms.txt ファイルの設置方法のガイドで解説しています。

Astro で hreflang と多言語サイトを扱うには？

Astro に組み込まれた i18n ルーティングが URL 側を担います。設定で defaultLocale と locales のリストを宣言し、デフォルト言語にもプレフィックスを付けるか（prefixDefaultLocale）を選びます。getRelativeLocaleUrl などのヘルパー関数がローカライズされたリンクを組み立て、Astro.currentLocale が各ページに現在の言語を伝えます。

ルーティングのガイドは head 内の hreflang タグを扱っていないため、SEO コンポーネントで自分で書く前提で計画してください。各ページで、言語版ごとに alternate リンクを一つずつと x-default を出力し、すべて絶対 URL にします。さらに、各バージョンが他のすべてのバージョンを列挙する必要があります（相互リンク）。ルーティングと同じ言語リストから生成すれば、存在しないページを指す代替リンクという最も多いミスを防げます。いくつかの URL でロジックを確かめるには、hreflang ジェネレーターでページ一つ分のタグ一式を出力できます。そのうえで、二つ目のシグナルとしてサイトマップの i18n オプションを有効にします。

画像とアイランドは速度と Core Web Vitals にどう影響するか？

Astro が最も強みを発揮するのは速度で、それは Core Web Vitals に表れます。Astro の画像ガイドによると、astro:assets の Image コンポーネントはローカル画像を最適化し、形式を変換し、遅延読み込みと非同期デコードを付与し、画像の寸法を推定して Cumulative Layout Shift を防ぎます。alt 属性は必須で、画像 SEO の基本ルールが自然に守られます。Picture コンポーネントはさらに、フォールバック付きで AVIF や WebP を配信します。

あと二つの習慣で仕上がります。最適化したい画像は src に置くこと（public のファイルは加工されずそのまま配信されます）。そしてページ上部のメイン画像は遅延読み込みにせず、Largest Contentful Paint を遅らせないよう即時に読み込むことです。

アイランドアーキテクチャは JavaScript を管理しやすくします。コンポーネントはクライアントディレクティブを付けるまで静的な HTML のままです。client:load はすぐに、client:idle はブラウザが空いたときに、client:visible は表示領域に入ったときにだけハイドレーションします。即座に反応が必要なもの（メニュー、カート）だけに client:load を使うのが、Interaction to Next Paint を守る最も簡単な方法です。サーバーアイランド（server:defer）は、キャッシュ済みのページの後にパーソナライズされたブロックを読み込み、メインコンテンツの表示を遅らせません。

Astro サイトに構造化データを追加するには？

Astro にはスキーマ専用の機能がないため、すべてを自由に制御できます。ページ種別（Article、Product、Organization、BreadcrumbList、FAQPage）ごとに JavaScript オブジェクトを作り、type が application/ld+json の script タグに出力します。JSON がエスケープされないよう、set:html ディレクティブと JSON.stringify を使います。表示中のページと同じ frontmatter やコレクションのデータから生成すれば、マークアップは常にユーザーが見る内容と一致します。これは schema マークアップに関する Google のガイドラインの要件でもあります。

新しいページ種別の JSON を下書きするなら、無料の schema ジェネレーターで有効な雛形を作り、テンプレート化するのが近道です。テンプレートを変更するたびに、ビルド済みページのサンプルを Google のリッチリザルトテストで検証しましょう。

Astro への移行時にリダイレクトをどう扱うか？

WordPress や Next.js からの移行は、Astro サイトにとって最もリスクの高い局面です。トラフィックや被リンクのある URL はすべて維持し、それ以外は最も近い移行先へ一つずつ恒久的なリダイレクトで対応づけます。詳しくは SEO のリダイレクトのガイドをご覧ください。

Astro の設定は、旧パスを新パスに対応づける redirects オブジェクトを受け付けます。アダプターを使えば、これらは本物の HTTP リダイレクトになります。完全に静的なビルドでは、Astro は代わりに meta refresh を含む HTML ページを書き出します。Google はこれをたどりますが、サーバー側の 301 より弱いシグナルとして扱います。静的サイトでは、ホスティングの形式（Netlify や Cloudflare Pages なら _redirects ファイル、Vercel なら vercel.json）でリダイレクトを宣言し、クローラーが本物の 301 を受け取れるようにしてください。

Astro は SEO と GEO にどう役立つか？

ChatGPT、Perplexity、Gemini に引用される第一歩は、読み取れることです。多くの AI クローラーは JavaScript を実行せずに生の HTML を取得します。Astro のデフォルトのように最初のレスポンスで全文を届けるサイトは、クライアントレンダリングのサイトが抱える障壁を取り除けます。そのうえで、明確な見出し、結論から始まる段落、構造化データ、llms.txt ファイルが、各ページを引用しやすくします。

公開後は推測ではなく計測しましょう。Sorank の GEO・SEO ダッシュボードは Search Console のデータと AI アシスタント経由の訪問をまとめて表示し、新しいサイトが順位を維持できているかを確認できます。

技術的な品質は、上位表示を狙えるコンテンツがあってこそ成果につながります。Sorank の AI ブログ記事ジェネレーターは Google と AI アシスタント向けに最適化した記事を作成して公開し、Astro プロジェクトのような独自構築のサイトにも webhook で接続できます。

Astro はデフォルトで高速かつクロール可能な HTML を提供しますが、上位表示は追加する head タグ、サイトマップ、hreflang、構造化データ、リダイレクトに左右されます。まず共通の SEO コンポーネントとサイトマップを整え、公開前に上の表を一つずつ確認してください。