SEOとの戦い & Canonical問題 - Vol.4
Project Dev.Log
- 1なぜ Astro × TailwindCSS なのか？ - Vol.1
- 2VS Code + Agentic AI 最強の執筆環境 - Vol.2
- 3Astro × Google Sheets で作る、サーバーレス予約システム - Vol.3
- 4SEOとの戦い & Canonical問題 - Vol.4
- 5季節限定LPの爆速構築 - 恵方巻き予約 - Vol.5
- 6「美味しそう」を伝える画像最適化 & メニュー管理 - Vol.6
- 7「Cmd+K」で呼び出す、爆速のサイト内検索体験を作ろう
- 8「記事を書くだけ」で終わらせる。OGP画像生成とSEOの自動化
- 9サーバーレス時代のバグハント: Astro View Transitionsとフォーム二重送信の怪 - Vol.9
- 10"ゼロコスト"・サーバーレスアーキテクチャの正体 - Vol.10
「正規タグなしの重複」という悪夢
Webサイトを公開して数日後、Google Search Consoleを開くとこんな警告が出ていました。
「ユーザーにより、正規ページとして選択されていない重複」
この警告を見たこと、ありませんか？ この記事を読めば、この問題の原因と対策がわかり、あなたのサイトからも警告を消すことができます。
特にAstroのような静的サイトジェネレーター（SSG）を使っていると、この問題によく直面します。
原因：正体は「末尾スラッシュ」
原因の多くは、URLの末尾スラッシュ（Trailing Slash）の扱いにあります。 Webサーバーの設定によっては、以下の2つが「別のページ」として認識されてしまうことがあります。
https://kagayaki.com/menuhttps://kagayaki.com/menu/
中身は全く同じなのに、Googleから見ると「重複コンテンツ（コピーコンテンツ）」に見えてしまうのです。これがSEO評価を下げる原因になります。
解決策：Canonicalタグを徹底する
解決策はシンプルです。すべてのページに <link rel="canonical" ...> タグを入れ、「これが正規のURLです」 と宣言することです。
Astroでは、astro-seo というパッケージを使うのが鉄板です。
1. astro-seo の導入
npm install astro-seo2. Layoutファイルへの実装
すべてのページの基となるレイアウトファイル（Layout.astro）に導入します。
---
import { SEO } from 'astro-seo';
const { title, description } = Astro.props;
// 正規URLを生成（末尾スラッシュを除去するなど、ルールを決めて統一する）
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<head>
<SEO
title={title}
description={description}
canonical={canonicalURL.toString()}
openGraph={{
basic: {
title: title,
type: "website",
image: "https://kagayaki.com/og-image.jpg",
}
}}
/>
</head>ここで重要なのは、Astro.site（astro.config.mjs で設定したドメイン）を使って、必ず絶対パスでCanonical URLを生成することです。
Antigravityへの指示例 (Prompt)
このSEO対策を実装するために、私が実際にAntigravityに投げかけた指示（プロンプト）のイメージです。
SEO Implementation Prompt: 「
astro-seoパッケージを使って、サイト全体のSEO設定を強化したいです。 すべてのページの<head>にCanonicalタグを自動で挿入するようにLayout.astroを改修してください。 その際、astro.config.mjsのsite設定と現在のパスを使って、必ず絶対パス（https://...）になるように生成ロジックを組んでください。」
Debug Prompt: 「Search Consoleで『正規タグなしの重複』という警告が出ました。 サイトマップのURLと実際のURLの『末尾スラッシュ』の扱いが怪しいです。
astro.config.mjsの設定を確認し、一貫したURL構造になるように修正案を提示してください。」
具体的なパッケージ名を出しつつ、「絶対パスで生成して」や「末尾スラッシュが怪しい」といった仮説を含めることで、AIはより的確なデバッグを行ってくれます。
Agentic AI とのデバッグ
実は、この問題の原因を特定してくれたのもAI（Antigravity）でした。
私が「Search Consoleで重複エラーが出るんだけど…」とぼんやり相談したところ、彼は即座に：
「サイトマップのURLと、実際にアクセスできるURLの末尾スラッシュが不統一である可能性があります。
astro.config.mjsのtrailingSlash設定と、canonicalタグの生成ロジックを確認しましょう。」
と回答し、修正コードまで提案してくれました。 人間が数時間かけて調査する内容を、一瞬で解決してくれる。これがAIペアプログラミングの威力です。
今日からできること
まずは今日、あなたのサイトの <head> に <link rel="canonical" ...> タグが正しく入っているかを確認してみてください。
Chromeのデベロッパーツールで <head> を開くだけで、即座に確認できます。
次回予告
SEOの基盤は整いました。次は、サイトの「見た目」を劇的に進化させます。 今回のブログリニューアルでも導入した 「季節限定LPの爆速構築」 と、動的デザインの実装について解説します。
🤖 Antigravity Prompt
この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。
あなたはテクニカルSEOのスペシャリストです。Astroで構築されたWebサイトにおいて、正規化URL（Canonical URL）を自動的に正しく設定するための実装方法を教えてください。
- 本番ドメイン (example.com) を基準とする
- 末尾のスラッシュ（trailing slash）の扱いを統一する
- 各ページごとの上書き設定も可能にする
Layoutコンポーネントとastro.config.mjsの設定例を示してください。
