NuxtJSでOGPを設定してみた
先日、このブログにOGPを設定してみました。
slackでこのブログのURLをメッセージで送ると、以下のように表示されます。
NuxtJSでOGPを設定した方法をまとめていきたいと思います。(twitterのカードにも対応しています)
今回はnuxt.config.jsに設定していきましたが、コンポーネントで設定することも可能です。その場合は、こちらの公式ドキュメントを参照してください。
nuxt.config.jsにOGPを設定
以下のコードをnuxt.config.jsに追加しました。
nuxt.config.js
export default {
...,
head: {
...,
htmlAttrs: {
prefix: 'og: https://ogp.me/ns#',
},
meta: [
// OGPの設定
{
hid: 'og:title',
property: 'og:title',
content: 'Ikkyu Blog'
},
{
hid: 'og:type',
property: 'og:type',
content: 'website',
},
{
hid: 'og:image',
property: 'og:image',
content: 'https://my-blog-49ww.pages.dev/img/ogp.png',
},
{
hid: 'og:url',
property: 'og:url',
content: 'https://my-blog-49ww.pages.dev',
},
{
hid: 'og:description',
property: 'og:description',
content: 'Webエンジニアです。主に技術系のブログを書いていきます。',
},
// Twitterカードの設定
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary_large_image',
},
{
hid: 'twitter:site',
name: 'twitter:site',
content: '@toru_ikkyu'
},
{
hid: 'twitter:creator',
name: 'twitter:creator',
content: '@toru_ikkyu',
},
],
...,
}
}
htmlAttrs
prefixにog: https://ogp.me/ns#を指定して、OGPを使用する宣言をしています。
meta
OGPを最小限で設定する場合は、propertyにog:title, og:type, og:image, og:urlを設定します。1 その他は任意で設定します。
NuxtJSでは子コンポーネントでもメタタグを設定できるので、hidを指定してメタタグの重複を回避しています。2
Twitterカードを最小限で設定する場合は、nameにtwitter:cardを設定します。
またTwitterカードでは、OGPプロパティも使用できます。優先順序は、Twitter固有のプロパティ > OGPプロパティという順番です。3
OGP用の画像を作成
XDを使用してOGP用の画像を作成しました。
FACEBOOK for Developers リンクシェアの画像 を参考にして、サイズは、1200 x 630 で作成しました。
デバッグ
設定後、OGPが表示されるのか確認します。
確認で使用したのは、シェアデバッガー - Facebook for Developers と Card Validator | Twitter Developers です。