svelte-meta-tags-setup

svelte-meta-tags：セットアップ

ステップ 1：パッケージをインストールする

package.json に svelte-meta-tags がすでに含まれているか確認します。含まれている場合は、ステップ 2 に進みます。

含まれていない場合は、グローバルにインストールされているパッケージマネージャーではなく、プロジェクトのロックファイルに基づいてコマンドを選びます。

ロックファイル	コマンド
pnpm-lock.yaml	pnpm add -D svelte-meta-tags
package-lock.json	npm install --save-dev svelte-meta-tags
yarn.lock	yarn add --dev svelte-meta-tags
bun.lock（または旧形式の bun.lockb）	bun add --dev svelte-meta-tags

これらのロックファイルがどれも存在しない場合は、package.json の packageManager フィールドを確認します。それも存在しない場合は、推測せず、どのパッケージマネージャーを使うか確認してください。

dev 依存関係としてインストールします。コンポーネントは使用するアプリにコンパイルされるため、実行時にこのパッケージのものは必要ありません。

ステップ 2：SvelteKit プロジェクトかどうかを確認する

package.json の dependencies/devDependencies に @sveltejs/kit があるか、また src/routes/ ディレクトリがあるか確認します。

SvelteKit プロジェクトではない場合（通常の Svelte、または別のフレームワーク／ルーターを使っている場合）：このスキルの残りの手順はスキップします。MetaTags をインポートし、プロジェクトですでに使用しているデータ取得の仕組みから、直接 props を渡します。

<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags title="My Page" description="A short description of this page." />

deepMerge、defineBaseMetaTags、definePageMetaTags は導入しないでください。これらは +layout.ts／+page.ts を介した SvelteKit の load ベースのデータフロー専用であり、それ以外の状況では不要な複雑さを加えます。

SvelteKit プロジェクトの場合は、ステップ 3 に進みます。

ステップ 3：ベースレイアウトの load ファイルを探すか作成する

src/routes/+layout.ts（またはプロジェクトがサーバー専用データを使っている場合は +layout.server.ts）を探します。

• 存在する場合：内容を確認します。load 関数がすでにほかのデータを返している場合は、既存の戻り値オブジェクトを上書きせず、defineBaseMetaTags の結果をマージします。
• 存在しない場合：作成します。

ベースレイアウトファイルは次のようになります。

// src/routes/+layout.ts
import { defineBaseMetaTags } from 'svelte-meta-tags';

export const load = () => {
  return {
    ...defineBaseMetaTags({
      title: 'My Site',
      titleTemplate: '%s | My Site',
      description: 'Default description for pages that do not set their own.'
    })
  };
};

ステップ 4：ネストされたレイアウトを確認する

ネストされたルートディレクトリに、追加の +layout.ts ファイルがあるか探します（例：src/routes/blog/+layout.ts）。サイトのあるセクションでルートレイアウトに加えて独自のベースタグが必要な場合は、defineBaseMetaTags の呼び出しを重複させず、deepMerge の呼び出しを連鎖させます。

// src/routes/blog/+layout.ts
import { deepMerge, defineBaseMetaTags } from 'svelte-meta-tags';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ parent }) => {
  const { baseMetaTags } = await parent();
  return {
    ...defineBaseMetaTags(
      deepMerge(baseMetaTags, {
        titleTemplate: '%s | Blog | My Site'
      })
    )
  };
};

ネストされたレイアウトでこのように baseMetaTags をオーバーライドする場合、ステップ 6 では data.baseMetaTags ではなく page.data.baseMetaTags を使います。レイアウトの data プロパティに含まれるのは、そのレイアウト自身と祖先の load の結果だけです。子レイアウトによるオーバーライドは、data を介してルートレイアウトには届きません。オーバーライドが反映されるのは page.data 経由のみで、これは現在のページ上にあるすべての load をマージし、最も深い階層のものが優先されます。

ネストされたレイアウトがない場合は、このステップをスキップします。ステップ 3 とステップ 5 の標準的な 2 層（ベース＋ページ）のパターンで十分です。

ステップ 5：definePageMetaTags でページレベルのタグを追加する

該当する +page.ts（または +page.server.ts）で、ページ固有のオーバーライドを返します。

// src/routes/+page.ts
import { definePageMetaTags } from 'svelte-meta-tags';

export const load = () => {
  return {
    ...definePageMetaTags({
      title: 'Home',
      description: 'Welcome to my site.'
    })
  };
};

すべてのルートに独自の +page.ts が必要なわけではありません。ページでベースタグをオーバーライドする必要がある場合にのみ追加します。

ステップ 6：+layout.svelte を接続する

<script>
  import { page } from '$app/state';
  import { MetaTags, deepMerge } from 'svelte-meta-tags';

  let { data, children } = $props();

  let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
</script>

<MetaTags {...metaTags} />

{@render children()}

$app/stores ではなく、$app/state から page をインポートします。ストアベースのモジュールは SvelteKit 3 で削除され、$app/state がその Svelte 5 での置き換えとなります。

ステップ 4 でネストされたレイアウトのオーバーライドを追加した場合は、ベースタグを page.data から読み込みます。これにより、セクションレベルのオーバーライドが確実にこのコンポーネントに届きます。

let metaTags = $derived(deepMerge(page.data.baseMetaTags, page.data.pageMetaTags));

ステップ 7：JSON-LD（任意）

プロジェクトで構造化データ（検索結果のリッチ表示など）が必要な場合は、<JsonLd schema={...} /> が独立したコンポーネントとして用意されていることを伝え、詳細については https://oekazuma.github.io/svelte-meta-tags/json-ld/ を案内します。このセットアップ手順の一環として JSON-LD スキーマを設計しないでください。

ステップ 8：検証

プロジェクトの型チェックコマンド（例：pnpm check、svelte-check、または package.json で定義されているコマンド）を実行し、新しいエラーがなく合格することを確認してから、セットアップが完了したと判断してください。