nuxt logo

ドキュメント翻訳（非公式）

Nuxt.js
Version:v3.17

SEOとメタデータ

強力なヘッド設定、コンポーザブル、コンポーネントを用いて、NuxtアプリのSEOを向上させます。

Nuxtのヘッドタグ管理はUnheadによって提供されています。これは、適切なデフォルト設定、いくつかの強力なコンポーザブル、そしてあなたのアプリのヘッドとSEOメタタグを管理するための多数の設定オプションを提供します。

Nuxt設定

あなたのnuxt.config.tsでapp.headプロパティを提供することで、アプリ全体のヘッドを静的にカスタマイズすることができます。

この方法では、リアクティブなデータを提供することはできません。app.vueでuseHead()を使用することをお勧めします。

ここで設定するタグは、サイトのデフォルトのタイトル、言語、ファビコンなど、変更されないものを設定するのが良いとされています。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt', // default fallback title
      htmlAttrs: {
        lang: 'en',
      },
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ]
    }
  }
})

また、以下にリストされているキーのいずれかをTypesで提供することもできます。

デフォルトのタグ

Nuxtはデフォルトでいくつかのタグを提供しており、ウェブサイトがすぐにうまく動作するようにしています。

  • viewport: width=device-width, initial-scale=1
  • charset: utf-8

ほとんどのサイトではこれらのデフォルトを上書きする必要はありませんが、キー付きのショートカットを使用してそれらを更新することができます。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      // update Nuxt defaults
      charset: 'utf-16',
      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
    }
  }
})

useHead

useHeadコンポーザブル関数はリアクティブな入力をサポートしており、プログラム的にヘッドタグを管理することができます。

app.vue
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})

useHeadとuseHeadSafeコンポーザブルを見てみることをお勧めします。

useSeoMeta

useSeoMetaコンポーザブルは、サイトのSEOメタタグを完全な型安全性を持つオブジェクトとして定義することができます。

これは、nameの代わりにpropertyを使用するなど、一般的な間違いやタイプミスを避けるのに役立ちます。

app.vue
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
こちらも参照 api > composables > use-seo-meta

コンポーネント

useHeadの使用がすべてのケースで推奨されていますが、テンプレート内でコンポーネントを使用してヘッドタグを定義することを個人的に好むかもしれません。

この目的のために、Nuxtは以下のコンポーネントを提供しています: <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> そして <Head>。これらのコンポーネントの大文字化に注意してください。これにより、無効なネイティブHTMLタグを使用しないようにしています。

<Head>と<Body>はネストされたメタタグを受け入れることができます（美的な理由から）が、これは最終的なHTMLでネストされたメタタグがレンダリングされる場所に影響を与えません。

app.vue
<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style>
      body { background-color: green; }
      </Style>
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

あなたのコンポーネントを<Head>または<Html>コンポーネントでラップすることが推奨されています。タグはより直感的に重複が除去されます。

タイプ

以下は、useHead、app.head、およびコンポーネントで使用される非リアクティブなタイプです。

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  templateParams?: Record<string, string | Record<string, string>>
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

より詳細なタイプについては、@unhead/vueを参照してください。

機能

リアクティビティ

すべてのプロパティについて、計算された値、ゲッター、またはリアクティブなオブジェクトを提供することにより、リアクティビティがサポートされています。

const description = ref('My amazing site.')

useHead({
  meta: [
    { name: 'description', content: description }
  ],
})

タイトルテンプレート

titleTemplateオプションを使用して、サイトのタイトルをカスタマイズするための動的なテンプレートを提供することができます。例えば、すべてのページのタイトルにサイトの名前を追加することができます。

titleTemplateは、%sがタイトルで置き換えられる文字列、または関数のいずれかになることができます。

関数を使用したい場合（完全な制御のため）、これはnuxt.configで設定することはできません。代わりに、すべてのページに適用されるように、app.vueファイル内で設定することをお勧めします。

useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
  }
})

これで、サイトの別のページでuseHeadを使用してタイトルをMy Pageに設定すると、ブラウザのタブには'My Page - Site Title'と表示されます。また、nullを渡すと、デフォルトでは'Site Title'になります。

テンプレートパラメータ

templateParamsを使用して、titleTemplate内のデフォルトの%s以外に追加のプレースホルダを提供することができます。これにより、より動的なタイトル生成が可能になります。

useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
  },
  templateParams: {
    siteName: 'Site Title',
    separator: '-'
  }
})

ボディタグ

適用可能なタグにtagPosition: 'bodyClose'オプションを使用して、それらを<body>タグの最後に追加することができます。

例えば：

useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose'
    }
  ]
})

例

definePageMetaと一緒に

pages/ ディレクトリ内で、definePageMetaとuseHeadを一緒に使用して、現在のルートに基づいたメタデータを設定することができます。

例えば、まず現在のページのタイトルを設定します（これはビルド時にマクロを通じて抽出されるので、動的に設定することはできません）：

pages/some-page.vue
definePageMeta({
  title: 'Some Page'
})

そして、レイアウトファイルでは、以前に設定したルートのメタデータを使用することができます：

layouts/default.vue
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
サンプルコードの編集とプレビューexamples > features > meta-tags
こちらも参照 guide > directory-structure > pages > #page-metadata

動的なタイトル

以下の例では、titleTemplateは%sプレースホルダを持つ文字列として、またはfunctionとして設定されており、これによりNuxtアプリの各ルートのページタイトルを動的に設定することが可能になります：

app.vue
useHead({
  // as a string,
  // where `%s` is replaced with the title
  titleTemplate: '%s - Site Title',
})
app.vue
useHead({
  // or as a function
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - Site Title`
      : 'Site Title'
  }
})

ページタイトルの設定にはnuxt.configも使用されます。しかし、nuxt.configではページタイトルを動的に設定することはできません。そのため、app.vueファイルでtitleTemplateを使用して動的なタイトルを追加し、それをNuxtアプリのすべてのルートに適用することを推奨します。

外部CSS

以下の例では、useHeadコンポーザブルのlinkプロパティを使用するか、または<Link>コンポーネントを使用することで、Google Fontsを有効にする方法を示しています：

useHead({
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
      crossorigin: ''
    }
  ]
})

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/getting-started/seo-meta