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' }
    ]
  },
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍

コメント

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