SEOとメタ情報
デフォルト
Nuxtは、必要に応じて上書きできる適切なデフォルトを提供します。
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})
app.headプロパティをnuxt.config.tsに指定すると、アプリケーション全体のheadをカスタマイズできます。
useHead()をapp.vueで使用することをお勧めします。設定を容易にするためのショートカットがあります。charsetとviewportです。型にリストされているキーも使用できます。
useHead
useHeadコンポーザブル関数は、Unheadによって実現された、headタグをプログラム的に、そしてリアクティブに管理できます。
すべてのコンポーザブルと同様に、コンポーネントのsetupとライフサイクルフックでのみ使用できます。
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>
useHeadとuseHeadSafeコンポーザブルを確認することをお勧めします。
useSeoMeta
useSeoMetaコンポーザブルを使用すると、完全なTypeScriptサポートで、サイトのSEOメタタグをフラットオブジェクトとして定義できます。
これにより、タイプミスやnameをpropertyと間違えるといった一般的なミスを防ぐことができます。
<script setup lang="ts">
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',
})
</script>
コンポーネント
Nuxtは、<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>、<Head>コンポーネントを提供しており、コンポーネントのテンプレート内でメタデータと直接やり取りできます。
これらのコンポーネント名はネイティブのHTML要素と一致するため、テンプレートでは大文字にする必要があります。
<Head>と<Body>はネストされたメタタグを受け入れることができます（見た目の理由から）が、これはネストされたメタタグが最終的なHTMLでレンダリングされる場所には影響しません。
<script setup lang="ts">
const title = ref('Hello World')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
型
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/schemaを参照してください。
機能
リアクティビティ
計算済み値、ゲッター、またはリアクティブオブジェクトを提供することで、すべてのプロパティでリアクティビティがサポートされます。
<script setup lang="ts">
const description = ref('My amazing site.')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>
タイトルテンプレート
titleTemplateオプションを使用して、サイトのタイトルをカスタマイズするための動的なテンプレートを提供できます。たとえば、すべてのページのタイトルにサイトの名前を追加できます。
titleTemplateは、%sがタイトルに置き換えられる文字列、または関数にすることができます。
関数を使用する場合（完全な制御のため）、nuxt.configでは設定できません。app.vueファイル内で設定することをお勧めします。そうすることで、サイトのすべてのページに適用されます。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
ここで、サイトの別のページでuseHeadを使用してタイトルをMy Pageに設定すると、ブラウザのタブには「My Page - Site Title」と表示されます。nullを渡して「Site Title」にデフォルトすることもできます。
ボディタグ
該当するタグでtagPosition: 'bodyClose'オプションを使用すると、<body>タグの最後に追加できます。
例:
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
// valid options are: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>
例
definePageMetaを使用
pages/ディレクトリ内では、definePageMetaとuseHeadを使用して、現在のルートに基づいてメタデータを設定できます。
たとえば、まず現在のページタイトルを設定できます（これはマクロを介してビルド時に抽出されるため、動的に設定することはできません）。
<script setup lang="ts">
definePageMeta({
title: 'Some Page'
})
</script>
次に、レイアウトファイルで、前に設定したルートのメタデータを使用できます。
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
動的なタイトル
以下の例では、titleTemplateは%sプレースホルダーを含む文字列、または関数として設定されます。これにより、Nuxtアプリの各ルートのページタイトルを動的に設定する柔軟性が向上します。
<script setup lang="ts">
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
})
</script>
<script setup lang="ts">
useHead({
// or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
nuxt.configも、ページタイトルを設定する代替方法として使用されます。ただし、nuxt.configではページタイトルを動的にすることはできません。そのため、app.vueファイルでtitleTemplateを使用して動的なタイトルを追加し、それをNuxtアプリのすべてのルートに適用することをお勧めします。
外部CSS
以下の例は、useHeadコンポーザブルのlinkプロパティを使用するか、<Link>コンポーネントを使用するかによって、Googleフォントを有効にする方法を示しています。
<script setup lang="ts">
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
</script>