使い方

デモ

titleとdescriptionの例

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

<MetaTags title="Example Title" description="Example Description." />

一般的なページの例

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

<MetaTags
  title="Using More of Config"
  titleTemplate="%s | Svelte Meta Tags"
  description="This example uses more of the available config options."
  canonical="https://www.canonical.ie/"
  openGraph={{
    url: 'https://www.url.ie/a',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image-01.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt'
      },
      {
        url: 'https://www.example.ie/og-image-02.jpg',
        width: 900,
        height: 800,
        alt: 'Og Image Alt Second'
      },
      { url: 'https://www.example.ie/og-image-03.jpg' },
      { url: 'https://www.example.ie/og-image-04.jpg' }
    ],
    siteName: 'SiteName'
  }}
  twitter={{
    creator: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Using More of Config',
    description: 'This example uses more of the available config options.',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
  facebook={{
    appId: '1234567890'
  }}
/>

子ページでデフォルト値を上書きする:

Example

+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()}

+layout.ts

import { defineBaseMetaTags } from 'svelte-meta-tags';

export const load = ({ url }) => {
  const baseTags = defineBaseMetaTags({
    title: 'Default',
    titleTemplate: '%s | Svelte Meta Tags',
    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
    canonical: new URL(url.pathname, url.origin).href, // 現在のURLからクリーンなURL（ハッシュやクエリパラメータなし）を作成します
    openGraph: {
      type: 'website',
      url: new URL(url.pathname, url.origin).href,
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      siteName: 'SiteName',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          alt: 'Og Image Alt',
          width: 800,
          height: 600,
          secureUrl: 'https://www.example.ie/og-image.jpg',
          type: 'image/jpeg'
        }
      ]
    }
  });

  return { ...baseTags };
};

注意: defineBaseMetaTagsは、+layout.(j|t)sファイルで使用することを意図したユーティリティです。 このユーティリティは、フリーズされたMetaTagsPropsオブジェクトをbaseMetaTagsプロパティにラップして返し、ロードデータで直接使用できます。

このユーティリティを使用せずに、return { baseMetaTags: Object.freeze<MetaTagsProps>({ ... }) }のように生のオブジェクトを提供することもできます。 MetaTagsPropsは、import type { MetaTagsProps } from 'svelte-meta-tags'を使用してインポートできる、このパッケージで提供される型です。

+page.ts

import { definePageMetaTags } from 'svelte-meta-tags';

export const load = () => {
  const pageTags = definePageMetaTags({
    title: 'TOP',
    description: 'Description TOP',
    openGraph: {
      title: 'Open Graph Title TOP',
      description: 'Open Graph Description TOP'
    }
  });

  return { ...pageTags };
};

注意: defineBaseMetaTagsと同様に、definePageMetaTagsは+page.(j|t)sファイルで使用することを意図したユーティリティです。 このユーティリティは、フリーズされたMetaTagsPropsオブジェクトをpageMetaTagsプロパティにラップして返し、ロードデータで直接使用できます。

このユーティリティを使用せずに、return { pageMetaTags: Object.freeze<MetaTagsProps>({ ... }) }のように生のオブジェクトを提供することもできます。 MetaTagsPropsは、import type { MetaTagsProps } from 'svelte-meta-tags'を使用してインポートできる、このパッケージで提供される型です。

Remote Functionsとの使用（実験的機能）

SvelteKitのRemote Functionsを使用すると、.remote.tsファイルにサーバー専用の関数を定義し、コンポーネントから直接呼び出すことができます。

注意: SEO目的の場合は、上記で紹介したload関数を使用する従来のアプローチを推奨します。この方法はメタタグがサーバーレンダリングされたHTMLに確実に含まれることを保証します。Remote Functionsは、SEOの重要性が低いページ（ダッシュボード、認証済みページなど）でデータ取得をコンポーネントと同じ場所に配置したい場合に適しています。

注意: Remote Functionsは実験的な機能です。使用するにはsvelte.config.jsで有効にする必要があります:

const config = {
  kit: {
    experimental: {
      remoteFunctions: true
    }
  },
  compilerOptions: {
    experimental: {
      async: true
    }
  }
};

data.remote.ts

import { query } from '$app/server';
import * as v from 'valibot';
import * as db from '$lib/server/database';

export const getPost = query(v.string(), async (slug) => {
  return await db.getPost(slug);
});

+page.svelte

<script>
  import { MetaTags } from 'svelte-meta-tags';
  import { getPost } from './data.remote';
  import { page } from '$app/state';

  let post = $derived(await getPost(page.params.slug));
</script>

<MetaTags
  title={post.title}
  titleTemplate="%s | My Blog"
  description={post.excerpt}
  openGraph={{
    type: 'article',
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage, width: 1200, height: 630, alt: post.title }]
  }}
/>

注意: await式を使用するには、Svelteコンパイラオプションでexperimental.asyncを有効にする必要があります。$derivedを使用することで、クライアントサイドナビゲーション時にパラメータが変更された際にクエリが再実行されます。ローディングやエラー状態を処理するために、親コンポーネントに<svelte:boundary>を配置する必要があります。