ウェブログラム ~学習するな実践せよ~

Nuxt.jsでmetaタグを設定する方法

2019/01/30

今回はNuxt.jsでmetaタグを設定する方法を紹介します。

メタタグは、サイトの文字コードや、概要、キーワードなどが設定できます。

想定するするmetaタグ

今回は4つの項目を設定していきます(titleも含みます)

  • titleタグ
  • 文字コード
  • 概要
  • キーワード
<title>ウェブログラム</title>
<meta charset="utf-8"/>
<meta name="description" content="Nuxtをウェブログラムで学ぼう!"/>
<meta name="keywords" content="Nuxt JS ウェブログラム"/>

このようなmetaタグをNuxt.jsで設定してやります。

Nuxt.jsの設定ファイルを変更

デフォルトのmetaタグはnuxt.config.jsに記述し設定します。

nuxt.config.js
module.exports = {
head: {
title: 'ウェブログラム',
meta: [
{ charset: 'utf-8' },
{ name: 'description', content: 'Nuxtをウェブログラムで学ぼう!' },
{ name: 'keywords', content: 'Nuxt JS ウェブログラム'}
],
},

このように、することで想定しているタグが生成され表示されます。

また、画面遷移時などの場合はそれぞのmetaタグを動的に変えたいという場面が出てくるかと思います。

例えば、descriptionで説明すると、TOPページは「Nuxtをウェブプログラムで学ぼう!」ですが、

記事ページがあった場合descriptionのcontentを「Nuxt実践入門その1の記事です」とかにしたいはずです。

この場合はdescriptionの内容を上書きするために、hidというユニークな識別子をつける必要があります。

meta: [
{ hid: 'my_description', name: 'description', content: 'Nuxtをウェブログラムで学ぼう!' },
],

このようにすることで、descriptionというmetaタグに対して「my_description」というキーが設定されました。

後は各ページでmy_descriptionというキーに対してdescriptionのcontentを設定してあげれば、上書きすることが出来ます。

各ページで設定する場合はhead()メソッドを利用します。

export default { 
head () {
return {
title: `Nuxt実践入門その1`,
meta: [
{ hid: 'my_description', name: 'description', content: 'Nuxt実践入門その1の記事です' }
]
}
}
}

このようにhidのキーでdescriptionを指定することで、metaタグの上書きが出来ます。

以上で終わりです。

2019/01/30