nuxt logo

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

Version 44.10Version 33.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', // デフォルトのフォールバックタイトル
      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: {
      // Nuxtのデフォルトを更新
      charset: 'utf-16',
      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
    }
  }
})

useHead

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

app/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/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/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を使用して、デフォルトの%s以外の追加のプレースホルダーをtitleTemplateに提供できます。これにより、より動的なタイトル生成が可能になります。

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',
      // 有効なオプションは: 'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose'
    }
  ]
})

例

definePageMetaを使用

app/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 > app > pages > #page-metadata

動的タイトル

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

app/app.vue
useHead({
  // 文字列として、
  // `%s`がタイトルに置き換えられる
  titleTemplate: '%s - Site Title',
})
app/app.vue
useHead({
  // または関数として
  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/4.x/getting-started/seo-meta