概要
Nuxt.jsで、タイトルタグや、OGPなどのメタタグを設定する方法についてのメモです。
Nuxt.jsの公式ドキュメントはこちら。
https://ja.nuxtjs.org/docs/2.x/features/meta-tags-seo
共通設定
全てのページに反映させたい共通の内容は、nuxt.config.js で設定できます。
デフォルトのOGPやタイトルをこちらで設定しておきます。
nuxt.config.js
head: {
title: 'タイトル',
htmlAttrs: {
lang: 'ja',
prefix: 'og: http://ogp.me/ns#'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '共通ディスクリプション' },
{ hid: 'og:site_name', property: 'og:site_name', content: 'サイト名' },
{ hid: 'og:url', property: 'og:url', content: 'サイトURL' }, //絶対パスで指定
{ hid: 'og:type', property: 'og:type', content: 'website' },
{ hid: 'og:image', property: 'og:image', content: '画像URL' }, //絶対パスで指定
{ hid: 'og:title', property: 'og:title', content: 'タイトル' },
{ hid: 'og:description', property: 'og:description', content: '共通ディスクリプション' },
{ name: 'twitter:card', content: 'summary' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
上から順に<title>タグ、<title>タグ、<meta>タグ、<link>タグが生成されます。各タグに対し、属性と値を連想配列で指定していけばよいので、直感的にわかりやすいかと思います。
hidは、各メタタグを識別するための固有のIDです。任意の文字列でOKですが、propertyの値と揃えておくとわかりやすいかと思います。
上記の設定で、htmlには下記のように出力されます。
index.html
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<title>タイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta data-hid="description" name="description" content="共通ディスクリプション">
<meta data-hid="og:site_name" property="og:site_name" content="サイト名">
<meta data-hid="og:url" property="og:url" content="サイトURL">
<meta data-hid="og:type" property="og:type" content="website">
<meta data-hid="og:image" property="og:image" content="画像URL">
<meta data-hid="og:title" property="og:title" content="タイトル">
<meta data-hid="og:description" property="og:description" content="共通ディスクリプション">
<meta name="twitter:card" content="summary">
<link rel="icon" href="/favicon.ico">
</head>
<!-- 省略 -->
</html>
個別ページの設定
ページごとに個別の値を設定する場合は、各ページのVueファイルの<script>タグ内で設定します。
page.vue
<script>
export default {
head() {
return {
title: 'ページタイトル',
titleTemplate: '%s - サイト名',
meta: [
{ hid: 'description', name: 'description', content: 'ページディスクリプション' },
{ hid: 'og:url', property: 'og:url', content: 'ページURL' }, //絶対パス
{ hid: 'og:image', property: 'og:image', content: 'ページ用OGP画像URL' } //絶対パス
{ hid: 'og:title', property: 'og:title', content: 'ページタイトル' },
{ hid: 'og:description', property: 'og:description', content: 'ページディスクリプション' },
]
}
}
}
</script>
hidは、nuxt.config.jsと同じ値を設定します。（hidの値が異なると、別のタグと認識されるため、重複してタグが出力されます）
titleTemplateを設定すると、titleに指定した値にを共通の書式で表示させることができます。
上記の設定で、htmlには下記のように出力されます。ページ側で設定した内容が反映されました。
page.html
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<title>ページタイトル - サイト名</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta data-hid="description" name="description" content="ページディスクリプション">
<meta data-hid="og:site_name" property="og:site_name" content="サイト名">
<meta data-hid="og:url" property="og:url" content="ページURL">
<meta data-hid="og:type" property="og:type" content="website">
<meta data-hid="og:image" property="og:image" content="ページ用OGP画像URL">
<meta data-hid="og:title" property="og:title" content="ページタイトル">
<meta data-hid="og:description" property="og:description" content="ページディスクリプション">
<meta name="twitter:card" content="summary">
<link rel="icon" href="/favicon.ico">
</head>
<!-- 省略 -->
</html>
参考
Nuxt.jsの公式ドキュメント： https://ja.nuxtjs.org/docs/2.x/features/meta-tags-seo
MetaAPi Refference: https://vue-meta.nuxtjs.org/api/