Nuxt.js を使って OGP を設定する機会があったので、こちらの記事にまとめました。
Nuxt.js で OGP を設定する方法
OGP とは
「Open Graph Protocol」の略。SNS 上で記事等がシェアされた際に、その記事の title や url、image を表示する仕組み。
Nuxt.js で OGP を設定する
Nuxt.js で OGP を設定するにあたり、nuxt.config.js に OGP を設定します。
プロジェクトを下記コマンドで作成した場合、
yarn create nuxt-app <project-name>
デフォルトでは、nuxt.config.js ファイルは以下のように。
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'nuxt-practice',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
OGP を設定したものを下記に記載しました。
export default {
head: {
title: 'nuxtアプリ',
htmlAttrs: {
lang: 'ja',
// topページ以外にogpを設定する場合は、website部分をarticleに置換
prefix: 'og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”',
},
meta: [
{ charset: 'utf-8' }, // 文字コードにutf-8を指定
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, // スマホ等のモバイル端末で最適なWeb表示をさせるために設定
{ name: 'description', content: 'これはnuxtアプリです' }, // ページの説明文
{ name: 'keywords', content: 'Nuxt.js,Nuxt,nuxt' }, // ページのキーワード
{ name: 'format-detection', content: 'telephone=no' }, // 電話番号の自動リンク機能を制御
// ogp設定
{ name: 'og:url', content: 'https://nuxt.co.jp/' }, // ページのURL。絶対パスで記述
{ name: 'og:type', content: 'website' }, // ページの種類。website以外にもblogやarticle,productなどがある
{ name: 'og:site_name', content: 'nuxtアプリ' }, // ページのサイト名
{ name: 'og:title', content: '【nuxtアプリ】nuxtアプリについて' }, // ページのタイトル
{ name: 'og:description', content: 'これはnuxtアプリです' }, // ページの説明文
{ name: 'og:image', content: 'https://nuxt.co.jp/top-image.png' }, // SNS上でシェアされた際に表示する画像。絶対パスで記述
// facebookのogp設定
{ name: 'fb:app_id', content: '111111111111111' }, // サイトやブログの管理者をfacebookに伝えるためのタグ。facebookのogp設定には、app_idという15桁の数字を使用。Facebook for Developersに登録して取得する
// twitterのogp設定
{ name: 'twitter:card', content: 'summary_large_image' }, // twitterでの表示タイプ。summary_large_image以外にもsummaryやapp,playerなどがある
{ name: 'twitter:site', content: '@twitter_user_id' }, // @から始まるサイトやブログの管理者のtwitterユーザーIDを指定
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント