---
title: クイックスタート
sidebar:
  order: 10
---

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

<CodeGroup>

```sh npm
npm install -D svelte-meta-tags
```

```sh pnpm
pnpm add -D svelte-meta-tags
```

```sh Yarn
yarn add -D svelte-meta-tags
```

</CodeGroup>

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

```svelte
<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`](https://www.npmjs.com/package/@sv-addon/svelte-meta-tags)アドオンを使うと、`<MetaTags>`のセットアップを自動化できます。コミュニティアドオンはSvelteメンテナーによるレビューを受けていないため、利用は自己判断でお願いします:

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

コミュニティアドオンについての詳細は[`sv add`のドキュメント](https://svelte.dev/docs/cli/sv-add#Community-add-ons)を参照してください。

## 次のステップ

<CardGroup cols={2}>
  <Card title="使い方" icon="file-text" href="/ja/usage">
    レイアウトとページ間でメタタグを共有するパターンを確認できます。
  </Card>
  <Card title="MetaTags プロパティ" icon="list" href="/ja/meta-tags-properties/basic">
    目的別に分類された、利用可能なすべてのプロパティを確認できます。
  </Card>
</CardGroup>