クイックスタート

パッケージをインストールします:

npm install -D svelte-meta-tags

pnpm add -D svelte-meta-tags

yarn add -D svelte-meta-tags

任意のページまたはレイアウトに<MetaTags>を追加します:

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

<MetaTags
  title="My Page"
  description="A short description of this page."
  canonical="https://example.com/my-page"
  openGraph={{
    title: 'My Page',
    description: 'A short description of this page.',
    images: [{ url: 'https://example.com/og-image.jpg', width: 1200, height: 630, alt: 'My Page' }]
  }}
/>

これだけで、<title>、<meta name="description">、<link rel="canonical">、そしてog:*タグが<svelte:head>にレンダリングされます。

別の方法: Svelte CLIでセットアップ

既存のプロジェクトでCLIでのセットアップを好む場合は、コミュニティメンテナンスの@sv-addon/svelte-meta-tagsアドオンを使うと、<MetaTags>のセットアップを自動化できます。コミュニティアドオンはSvelteメンテナーによるレビューを受けていないため、利用は自己判断でお願いします:

npx sv add @sv-addon/svelte-meta-tags

コミュニティアドオンについての詳細はsv addのドキュメントを参照してください。

次のステップ