概要

NuxtJSベースのサイト（本サイトですが）にOGPタグを入れました。

以下を参考にしながら対応しました。

• The Open Graph protocol
• API: head プロパティ - NuxtJS
• いまさら聞けない！OGPとは？ | ホームページ制作・作成なら大阪のweb制作.com
• OGP image 画像のサイズ仕様（ 2020 年時点） | gotohayato.com
• Nuxt.js(v2.6.x)やっておきたい設定：その2/3｜SEOに必要なmetaとogpの設定及びpwa(Manifest、Icon、Workbox)の設定 - Qiita

実施事項

modify global config

nuxt.config.js

headプロパティを修正していきます。

• htmlAttrsを追加しました
• metaタグに以下を追加しました
  • og:site_name
  • og:type (defaultはwebsiteで、子ページは’article’に上書きします)
  • og:url
  • og:title
  • og:description
  • og:image
  • twitter:card
• linkにapple-touch-iconを追加しました

  /*
   ** Headers of the page
   */
  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    },
    titleTemplate: '%s - ' + process.env.APP_NAME,
    title: process.env.APP_NAME || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      },
      {
        hid: 'og:site_name',
        property: 'og:site_name',
        content: process.env.APP_NAME
      },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
      { hid: 'og:title', property: 'og:title', content: process.env.APP_NAME },
      {
        hid: 'og:description',
        property: 'og:description',
        content: process.env.npm_package_description || ''
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: `${process.env.BASE_URL}/images/ogp/common.png`
      },
      { name: 'twitter:card', content: 'summary_large_image' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'apple-touch-icon',
        sizes: '180x180',
        href: '/apple-touch-icon.png'
      }
    ]
  },

modify index(top) page

pages/index.vue

topページのタイトルは、サイト名だけになるようにtitleTemplateにはnullを設定しておきます。

export default {
  head() {
    const appName = this.$constants.appName
    return {
      titleTemplate: null,
      title: appName
    }
  }
}

modify child page

pages/about.vue

子ページでは、上書きしたいmetaタグやtitleタグなどを上書きしていきます。

export default {
  head() {
    const title = 'About Us'
    const description = '合同会社Kumanoteの企業情報です'
    const baseUrl = this.$constants.baseUrl
    return {
      title,
      meta: [
        { hid: 'og:title', property: 'og:title', title },
        { hid: 'og:type', property: 'og:type', content: 'article' },
        {
          hid: 'description',
          name: 'description',
          content: description
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: description
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: `${baseUrl}/about`
        }
      ]
    }
  }
}