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

よっしー

こんにちは。よっしーです(^^)

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

スポンサーリンク

背景

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

手動でのセットアップ

AMP

transformPageChunkと@sveltejs/ampからインポートしたtransformを使用してHTMLを変換する方法について説明します：

import * as amp from '@sveltejs/amp';

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    let buffer = '';
    return await resolve(event, {
        transformPageChunk: ({ html, done }) => {
            buffer += html;
            if (done) return amp.transform(buffer);
        }
    });
}

解説

1. 基本的な仕組み

• このコードは、SvelteKitが生成したHTMLをAMP互換のHTMLに変換します
• @sveltejs/ampパッケージのtransform関数を使用して変換を行います

1. 処理の流れ

• buffer変数にHTMLチャンクを蓄積します
• すべてのチャンクが処理された後（doneがtrueのとき）、蓄積されたHTMLをAMP形式に変換します

1. transformの役割

• 非互換なHTML要素をAMP互換の要素に変換
• 必要なAMPスクリプトや構造の追加
• AMPの規約に違反するコードの修正や除去

1. hooks.serverの位置づけ

• サーバーサイドでページが生成される際のフックとして機能
• すべてのページリクエストに対してこの変換が適用されます

このコードは、SvelteKitアプリケーションをAMP対応にする最後の重要なステップとなります。これにより、通常のSvelteKitアプリケーションがAMPの要件を満たすように自動的に変換されます。

おわりに

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

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)