【nuxt.js】headにmetaタグとかGAタグとか加える時のアレコレ
nuxt.js触っててheadの内容どこに書くのか分からなかったのでメモ
つかいかた 〜ページ個別の記載事項〜
各ページで記載内容を変えたい場合はこんな感じ。
こんな感じにhead()で書いていきます。
head () {
return {
title: 'ほげほげ',
meta: [
{ hid: 'description', name: 'description', content: '説明' },
//キーワードはお守りらしい。（消したい。。）
{ hid: 'keywords', name: 'keywords', content: 'キーワード' },
{ hid: 'og:type', property: 'og:type', content: 'website' },
{ hid: 'og:url', property: 'og:url', content: '〇〇.com' },
{ hid: 'og:title', property: 'og:title', content: 'ほげほげ' },
{ hid: 'og:description', property: 'og:description', content: '説明'},
{ hid: 'og:image', property: 'og:image', content: '/static/top_img.jpg' },
],
script: [
//タグマネージャー？？関連のスクリプト
//<script>innerHTMLの中身</script>
{ type: 'text/javascript', innerHTML: '/*<![CDATA[*〇〇〇〇*]]>*/' }
],
}
}
だいたい見て分かる気がしますが、1個だけ。
{ hid: 'description', name: 'description', content: '説明' },
Q. hidってなんや？
A. よく分かりません。
子コンポーネント利用されたときにメタ情報が重複してしまうことを避けるために hid キーを使ってユニーク識別子を meta 要素に設定してください。
と公式には書いてあります。
これが無いとnuxt.config.jsで決めた共通の要素の設定と共存する形になってしまったりします。
全ページ同じ識別子でも（今の所）支障無いです。
お詳しいかたぜひコメントください。。
また、タグマネージャー関連のスクリプトはinnerHTMLに書きます。
この際、下のnuxt.config.jsに__dangerouslyDisableSanitizers: ['script'],と言う記載がありますが、これをどこかに書かないと正しく反映されません。
1ページごとに書いてもいいのですが、nuxt.config.jsに共有したら各ページには記載しなくていいので楽です。
つかいかた 〜全ページ共通の設定〜
nuxt.config.jsに書きます。
こんな感じに使っています
/*
** Headers of the page
*/
head: {
title: デフォルトのタイトル,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'デフォルトdescription' },
{ hid: 'og:site_name', property: 'og:site_name', content: '〇〇' },
{ hid: 'fb:app_id', property: 'fb:app_id', content: 'fb_app_id' },
{ hid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' },
{ hid: 'twitter:site:id', property: 'twitter:site:id', content: '@ツイッターID' },
{ hid: 'twitter:creator', property: 'twitter:creator', content: '@ツイッターID' },
],
link: [
{ rel: 'shortcut icon', href: '/favicon/favicon.ico', type: 'image/ico'},
{ rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon16px.png', size: '16x16', type: 'image/png'},
{ rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon32px.png', size: '32x32', type: 'image/png'},
{ rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon64px.png', size: '64x64', type: 'image/png'},
{ rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon180px.png', size: '180x180', type: 'image/png'}
],
// これが無いとscriptの中身がエスケープされる（上記参照）
__dangerouslyDisableSanitizers: ['script'],
},
みたらだいたいわかるでしょう。fbのidとかはググったらたくさん出てきます。
参考文献
headに色々入れることができます。ページのdataとかも使ってページ個別に記載できます。
（公式）
nuxt.config.jsの中のheadプロパティを使えば、全ページ共通の要素は一発で記載できます。
（公式）
Author And Source
この問題について(【nuxt.js】headにmetaタグとかGAタグとか加える時のアレコレ), 我々は、より多くの情報をここで見つけました https://qiita.com/bandwagon/items/7a515d02d789c3a101b0著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .