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

用語解説

2025.01.01

この記事は約3分で読めます。

よっしー

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

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

背景
手動でのセットアップ
1. AMP
2. 解説
おわりに

背景

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

手動でのセットアップ

AMP

ページをAMPに変換した結果として発生する未使用のCSSを削除するために、dropcssを使用する方法を説明します：

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

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    let buffer = '';

    return await resolve(event, {
        transformPageChunk: ({ html, done }) => {
            buffer += html;

            if (done) {
                let css = '';
                const markup = amp
                    .transform(buffer)
                    .replace('⚡', 'amp') // dropcssはこの文字を処理できない
                    .replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
                        css = contents;
                        return `<style amp-custom${attributes}></style>`;
                    });

                css = dropcss({ css, html: markup }).css;
                return markup.replace('</style>', `${css}</style>`);
            }
        }
    });
}

解説

CSSの最適化プロセス

dropcssは使用されていないCSSルールを削除するツール
まずAMP変換を行い、その後CSSの最適化を実行
⚡記号はampに置換（dropcssの制限に対応）

処理の流れ

AMP変換後のHTMLからスタイルを抽出
抽出したCSSを一時的に保存
dropcssで未使用のCSSを削除
最適化されたCSSを再度HTMLに挿入

注意点

AMPは厳格なCSS制限があるため、この最適化は特に重要
未使用CSSの削除によりページサイズを削減可能
パフォーマンスの向上に貢献

また、重要な補足として：
amphtml-validatorを使用してプリレンダリング時に変換後のHTMLを検証することが推奨されます。ただし、この検証は非常に時間がかかるため、ページのプリレンダリングを行う場合にのみ使用することが望ましいです。

おわりに

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

よっしー

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

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