メタタグと SEO
Nuxt はアプリケーションにメタデータを追加するために 3 つの方法を用意しています:
- nuxt.config.js を使用してグローバルに設定する
- head をオブジェクトとして使用してローカルに設定する
- data と computed プロパティにアクセスするために、head を関数として使用してローカルに設定する
グローバルな設定
Nuxt では、nuxt.config.js 内の head プロパティを利用することで、アプリケーションにおけるデフォルトの <meta>
タグをすべて定義することができます。SEO のためのデフォルトの title と description タグの追加や、ビューポートのセット、ファビコンの追加が簡単にできます。
nuxt.config.js
export default {
head: {
title: 'my website title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}
}
この設定により、すべてのページで共通のタイトルと説明が設定されます。
ローカルな設定
各ページのスクリプトタグ内で head
プロパティを設定することで、ページ別のタイトルとメタデータを追加することもできます。
pages/index.vue
<script>
export default {
head: {
title: 'Home page',
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
],
}
}
</script>
head
をオブジェクトとして使用して、ホームページのみに title と description を設定する例。pages/index.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Home page'
}
},
head() {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
]
}
}
}
</script>
head
を関数として使用して、ホームページのみに title と description を設定する例。関数を使用することで data と computed プロパティにアクセスすることができます。Nuxt はアプリケーションの document head とメタ要素を更新するために、vue-meta を利用しています。
子コンポーネントを使用したときにメタタグの重複を避けるために、
hid
キーを利用してメタデータに一意な識別子を与えてください。こうすることで vue-meta
は、デフォルトのタグを上書きすべきということを知ることができます。head
の利用可能なプロパティについての詳細は、vue-meta のドキュメント を参照してください。外部リソース
スクリプトやフォントのような外部のリソースを含めるには、nuxt.config.js
にグローバルに追加する、もしくは head
オブジェクトまたは関数の中にローカルに追加する必要があります。
各リソースにオプションの
body: true
を渡すことで、</body>
の終了タグの前にリソースを含めることもできます。グローバルな設定
nuxt.config.js
export default {
head: {
script: [
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
}
]
}
}
ローカルな設定
pages/index.vue
<template>
<h1>About page with jQuery and Roboto font</h1>
</template>
<script>
export default {
head() {
return {
script: [
{
src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
}
]
}
}
}
</script>
<style scoped>
h1 {
font-family: Roboto, sans-serif;
}
</style>
このページをGitHubで編集する
更新日 Mon, Aug 19, 2024












































