よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitでのSEOについて解説しています。
スポンサーリンク
背景
SvelteKitでのSEOについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
手動でのセットアップ
AMP -csr-
ルートの+layout.jsまたは+layout.server.jsでcsrを無効にする方法について説明します。
export const csr = false;解説
csrは「Client-Side Rendering（クライアントサイドレンダリング）」の略です。- この設定を
falseにすると、ページは完全にサーバーサイドでレンダリングされ、クライアントサイドでのJavaScriptの実行が無効になります。 - この設定は特に以下のような場合に有用です：
- 静的なコンテンツのみを表示する場合
- JavaScriptを必要としないシンプルなページの場合
- パフォーマンスを最適化したい場合
- SEOを重視する場合
- AMPページを作成する場合
注意点：
- この設定を行うと、クライアントサイドでのインタラクティブな機能は使用できなくなります。
- すべてのページで一律にこの設定が適用されます（ルートレイアウトに設定した場合）。
- 必要に応じて、特定のページやコンポーネントでのみこの設定を適用することも可能です。
amp 属性
app.htmlにamp属性を追加する方法について説明します：
<html amp>
...解説
<html amp>タグは、このページがAMPページであることをブラウザとGoogleに伝えます。- この属性を追加することで、以下の効果があります：
- ページがAMP仕様に従っていることを宣言します
- AMPバリデーターがこのページをAMPページとして検証します
- Googleの検索結果でAMPページとして認識されます
注意点：
<html amp>の代わりに<html ⚡>を使用することもできます（同じ意味です）- この宣言を追加した場合、ページは完全にAMP仕様に準拠する必要があります
- AMPの厳格な要件（JavaScriptの制限、スタイルシートの制限など）がすべて適用されます
- AMPページには必要な追加のメタタグやAMPライブラリの読み込みなども必要になります
おわりに
今日は、 SvelteKitでのSEOについて解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント