Nuxt独自

【Nuxt.js】Nuxt文法編:head

前置き

metaタグを設定するhead属性について解説していきます🎀
SEOに直接的な影響はないと言われていますが、
検索結果のタイトル下に表示されるmeta description
クリック率に影響するため理解しておいた方がGood🌟

それではやっていきましょう〜!


head

head属性とは

前置きにも書きましたが、
metaタグを設定する場所です🎀🧸

公式:
https://ja.nuxtjs.org/guide/views/#%E3%83%9A%E3%83%BC%E3%82%B8

基本的にはnuxt.config.js
グローバルに設定しますが
pageごとのローカル設定を
優先させることもできます🌟

pageで個別の設定しなければ
nuxt.config.jsの設定が引き継がれます。


headに使えるオプションと使い方

head で利用できるオプションは数種類あります。
メタ情報プロパティの認識

主に使うのがtitlemeta descriptionですね。
descriptionは検索結果の下に出る文章のことです。
https://wacul-ai.com/blog/seo/internal-seo/meta-description-for-seo/

コード(htmlの場合)

コード(Nuxtの場合)

タイトル部分はこんな感じになります🌟

descriptionは実際の表示をお見せできませんが、
Page 1 description
と表示されるはずです⭕️

) pages

${変数}はテンプレートリテラルです。

hidnuxt.config.jspagesの設定が被る時に
識別子としてvmidキーの代わりに一意の名前でつけます。

子コンポーネント利用された時にメタ情報が重複してしまうことを避けるために hid キーで一意な識別子を与えてください。

https://ja.nuxtjs.org/faq/duplicated-meta-tags/


書き方の違い(グローバル or ローカル)

グローバル

nuxt.config.jsの時はhead: {}

) file

ローカル

個別ページの時はhead() { return { } }

) pages


こんな使い方も

bodyにクラスつけたりもできます。

) pages


まとめ

  • head属性はmetaタグを設定する場所
  • 基本はグローバル設定だがローカルで個別設定したい場合はhidを使う

-Nuxt独自
-,

© 2020 aLiz Nuxt