よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitでのSEOについて解説しています。
スポンサーリンク
背景
SvelteKitでのSEOについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
手動でのセットアップ
AMPとは
AMPは、モバイルWebページを高速に表示するためのGoogleが主導するオープンソースプロジェクトです。2015年に発表され、主にニュースサイトやブログなどのコンテンツを迅速に配信することを目的としています。
主な特徴
- 高速読み込み
- JavaScriptの実行を制限
- リソースの読み込みを最適化
- Googleの専用CDNでコンテンツをキャッシュ
- 厳格な制限
- 独自のHTML拡張タグを使用（amp-img, amp-videoなど）
- 外部スタイルシートの禁止
- JavaScriptは基本的に使用不可（AMPライブラリは例外）
- サイズ指定が必須（画像など）
- SEOへの影響
- Googleの検索結果でAMPページが優先表示される場合がある
- モバイル検索結果でカルーセル表示の対象となる
- 「⚡」（稲妻）マークが検索結果に表示される
メリット
- ページ読み込み速度の大幅な向上
- モバイルユーザーのエクスペリエンス改善
- 検索結果での表示優位性
- データ通信量の削減
デメリット
- 開発の自由度が制限される
- 通常のWebページと別にAMPバージョンを維持する必要がある
- 機能が制限される（フォーム、インタラクティブな要素など）
- デザインの制約が多い
実装における注意点
- コンテンツの二重管理
- 通常版とAMP版の2つのバージョンを管理する必要がある
- コンテンツの整合性を保つ必要がある
- 検証
- AMPページは厳格な仕様に従う必要がある
- Google提供の検証ツールでチェックが必要
- パフォーマンス監視
- 実際のユーザーの体験を監視
- 通常版とAMP版のパフォーマンス比較
最近の動向
AMPの重要性は以前と比べて低下傾向にあります。その理由として：
- Core Web Vitalsの登場により、AMPに依存せずともパフォーマンスが評価される
- モダンなWeb開発技術の進歩により、通常のサイトでも高速化が可能に
- PWA（Progressive Web Apps）など、代替技術の台頭
ただし、特にニュースサイトなど、モバイルでの高速な表示が重要なケースでは、依然としてAMPが選択肢として検討される場合があります。
SvelteKitでのAMP
現代のWeb開発における残念な現実として、サイトのAccelerated Mobile Pages (AMP)バージョンを作成する必要が時々あります。SvelteKitでは、inlineStyleThresholdオプションを設定することでこれを実現できます。
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// <link rel="stylesheet">が許可されていないため、
// すべてのスタイルをインライン化する
inlineStyleThreshold: Infinity
}
};
export default config;解説
- AMPは、Googleが推進するモバイルWebページの高速化のための規格です。
- AMPの制限の1つとして、外部スタイルシートの読み込み（
<link rel="stylesheet">）が禁止されています。 - この制限に対応するため、SvelteKitでは
inlineStyleThresholdというオプションを提供しています。 Infinityを設定することで、すべてのCSSスタイルがHTMLファイル内に直接埋め込まれます（インライン化されます）。- これにより、AMPの要件を満たしつつ、スタイリングを維持することができます。
この設定は、特にAMPページを作成する必要がある場合にのみ使用することをお勧めします。通常のWeb開発では、パフォーマンスの観点から外部スタイルシートを使用する方が望ましいことが多いためです。
おわりに
今日は、 SvelteKitでのSEOについて解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント