概要
Nuxt.jsで作成したサイトをFacebookのシェアデバッガーで確認すると以下のプロパティエラーが出ましたが、これらのプロパティは実際には正しく機能しているようでした。
プロパティがありません
次のプロパティは必須です: og:url, og:type, og:title, og:image, og:description
結論
何パターンか試して、結論は「エラーが出てるけど特に問題なさそう」です。
<meta property="og:〜" の順番になっていないとシェアデバッガーではogタグとして認識されないようです。
config.nuxt.js でOGタグを設定すると data-n-head などが追加されますが、タグ自体は機能しているのであまり気にするところでは無いのかもしれません…？
検証内容
- Nuxt.jsをインストールしたての状態で検証します
- Universalモードを使用します
- Facebookデバッガーのスクレイピング結果で以下の内容をを検証します
- 検証用に作ったサイトでも同様のエラーが出るか
- 4パターン試してどのように変化するか
- 以下の4パターンを試しました
-
/app.htmlにべた書き（data-n-head,data-hidなし） -
/app.htmlにべた書き（data-n-headあり） -
/app.htmlにべた書き（data-n-headあり、タグの末尾に追加） -
nuxt.config.jsのみに設定
-
※ og:type はすべてarticleになっちゃってます。
※ fb:app_id は未指定です。
検証結果
1. /app.html を追加してべた書き（ data-n-head , data-hidなし）
カスタムテンプレートとして /app.html を追加し、 その <head> 内にメタタグをべた書きします。
スクレイピングされたHTMLタグ
<title>ページ名 | サイト名</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="Nuxt.jsでのメタタグのテストです。">
〜〜jsファイルの読み込みタグ・スタイルタグ〜〜
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="article">
<meta property="og:url" content="https://dummyname.netlify.com">
<meta property="og:title" content="ページ名">
<meta property="og:description" content="Nuxt.jsでのメタタグのテストです。">
<meta property="og:image" content="https://dummyname.netlify.com/ogimage.png">
デバッガーの結果
エラー無し（ data-n-head と data-hid を抜いたため？）
2. /app.html にべた書き（ data-n-head あり）
スクレイピングされたHTMLタグ
<title>ページ名 | サイト名</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="Nuxt.jsでのメタタグのテストです。">
〜〜jsファイルの読み込みタグ・スタイルタグ〜〜
<meta data-n-head="ssr" property="og:site_name" content="サイト名">
<meta data-n-head="ssr" property="og:type" content="article">
<meta data-n-head="ssr" property="og:url" content="https://dummyname.netlify.com">
<meta data-n-head="ssr" property="og:title" content="ページ名">
<meta data-n-head="ssr" property="og:description" content="Nuxt.jsでのメタタグのテストです。">
<meta data-n-head="ssr" property="og:image" content="https://dummyname.netlify.com/ogimage.png">
デバッガーの結果
エラーあり 
（metaのあとにpropertyが続かないためエラーになっている？）
3. /app.html にべた書き（ data-n-head あり、タグの末尾に追加）
スクレイピングされたHTMLタグ
<title>ページ名 | サイト名</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="Nuxt.jsでのメタタグのテストです。">
〜〜jsファイルの読み込みタグ・スタイルタグ〜〜
<meta property="og:site_name" content="サイト名" data-n-head="ssr">
<meta property="og:type" content="article" data-n-head="ssr">
<meta property="og:url" content="https://dummyname.netlify.com" data-n-head="ssr">
<meta property="og:title" content="ページ名" data-n-head="ssr">
<meta property="og:description" content="Nuxt.jsでのメタタグのテストです。" data-n-head="ssr">
<meta property="og:image" content="https://dummyname.netlify.com/ogimage.png" data-n-head="ssr">
デバッガーの結果
エラー無し
4. nuxt.config.js のみに設定
スクレイピングされたHTMLタグ
<title>ページ名 | サイト名</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="Nuxt.jsでのメタタグのテストです。">
<meta data-n-head="ssr" property="og:site_name" content="サイト名">
<meta data-n-head="ssr" data-hid="og:type" property="og:type" content="article">
<meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://dummyname.netlify.com">
<meta data-n-head="ssr" data-hid="og:title" property="og:title" content="ページ名">
<meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Nuxt.jsでのメタタグのテストです。">
<meta data-n-head="ssr" property="og:image" content="https://dummyname.netlify.com/ogimage.png">
〜〜jsファイルの読み込みタグ・スタイルタグ〜〜
デバッガーの結果
エラーあり