Svelte入門：SvelteKitでのSEO -Vol.6-

今日は、SvelteKitでのSEOについて解説しています。

背景

SvelteKitでのSEOについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

手動でのセットアップ

サイトマップ

サイトマップは、特に大量のコンテンツがある場合に、検索エンジンがサイト内のページの優先順位を決定するのに役立ちます。エンドポイントを使用して動的にサイトマップを作成できます：

src/routes/sitemap.xml/+server

export async function GET() {
    return new Response(
        `
        <?xml version="1.0" encoding="UTF-8" ?>
        <urlset
            xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
            xmlns:xhtml="https://www.w3.org/1999/xhtml"
            xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
            xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
            xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
            xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
        >
            <!-- ここに<url>要素が入ります -->
        </urlset>`.trim(),
        {
            headers: {
                'Content-Type': 'application/xml'
            }
        }
    );
}

解説

1. サイトマップの役割：

• サイト構造の検索エンジンへの通知
• ページの優先順位付け支援
• 大規模サイトでの重要性が増加

1. 実装のポイント：

• SvelteKitのサーバーエンドポイントとして実装
• XMLフォーマットで出力
• 適切なContent-Typeヘッダーの設定

1. サイトマップのXML構造：

• 標準的なXMLの名前空間を含む
• 様々な種類のコンテンツに対応：
• 通常のページ（基本の名前空間）
• モバイルコンテンツ
• ニュース
• 画像
• 動画

1. 実装の拡張例（コメント部分の実装）：

// <url>要素の例
<url>
  <loc>https://example.com/page1</loc>
  <lastmod>2024-12-08</lastmod>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>

このセクションは、SvelteKitでサイトマップを動的に生成する方法を説明しており、特に大規模サイトでのSEO対策として重要な機能の実装方法を示しています。

おわりに

今日は、 SvelteKitでのSEOについて解説しました。