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

スポンサーリンク
Svelte入門：SvelteKitでのSEO -Vol.5- 用語解説
Svelte入門：SvelteKitでのSEO -Vol.5-
この記事は約3分で読めます。
よっしー
よっしー

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

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

スポンサーリンク

背景

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

手動でのセットアップ

タイトルとメタ情報

すべてのページには、適切に記述された固有の<title>タグと<meta name="description">要素を<svelte:head>内に含める必要があります。説明的なタイトルと説明文の書き方のガイダンス、および検索エンジンにコンテンツを理解させるためのその他の提案については、GoogleのLighthouse SEO監査ドキュメントで確認できます。

一般的なパターンとして、ページのload関数からSEO関連のdataを返し、それをルートレイアウトの<svelte:head>内で（$page.dataとして）使用する方法があります。

解説

  1. 必要な要素：
  • <svelte:head>: SvelteKitでhead要素を制御するための特別なコンポーネント
  • <title>: ページのタイトル
  • <meta name="description">: ページの説明文
  1. 重要なポイント：
  • 各ページで固有のタイトルと説明を設定
  • 内容は適切に記述される必要がある
  • 検索エンジンが理解しやすい表現を使用
  1. 実装パターン例：
<!-- routes/+layout.svelte -->
<script>
  import { page } from '$app/stores';
</script>

<svelte:head>
  <title>{$page.data.title}</title>
  <meta name="description" content={$page.data.description} />
</svelte:head>
// routes/+page.js
export function load() {
  return {
    title: 'ページのタイトル',
    description: 'ページの説明文がここに入ります'
  };
}
  1. SEOのベストプラクティス：
  • タイトルは簡潔で説明的に
  • 説明文は150-160文字程度
  • キーワードの自然な使用
  • 各ページで一意の内容

このセクションは、SvelteKitでSEOに重要なメタ情報を設定する方法と、その実装パターンについて説明しています。また、GoogleのLighthouseドキュメントを参照することで、より詳細な情報が得られることも示唆しています。

おわりに

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

よっしー
よっしー

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

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

コメント

タイトルとURLをコピーしました