» TechAcademyの無料体験

【Nuxt.js】OGPを設定する方法

【Nuxt.js】OGPを設定する方法Nuxt.js

Nuxt.jsを使ってOGPを設定する機会があったので、こちらの記事にまとめました。

【Nuxt.js】OGPを設定する方法

OGPとは

「Open Graph Protocol」の略。SNS上で記事等がシェアされた際に、その記事のtitleやurl、imageを表示する仕組み。

Nuxt.jsでOGPを設定する

Nuxt.jsでOGPを設定するにあたり、nuxt.config.jsにOGPを設定します。

参考:nuxt.config – NuxtJS

プロジェクトを下記コマンドで作成した場合、

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' }
    ]
  },

コメント

タイトルとURLをコピーしました