nuxt.jsのOGPテストをlocalhostで行いたいんだが!?


目的(purpose)

nuxt.jsでOGPの設定をしてみようと考えていた時期が私にもありました。
ただこれをlocalhostで行うためにはどうしたら良いのか?というのが疑問でした。
探してみると方法はあったのですがnuxt.jsとまとめた記事はなかったので今回まとめてみました。


開発環境(Development environment)

OS:

  • Windows10 Home

言語:

  • typescript

フレームワーク:

  • Nuxt.js


ディレクトリ構成(Directory structure)

ogp_test/
     ├ pages/
     │   ├ index.vue
     │   │  
     │   └ next.vue
     │
     └ nuxt.config.js

※ 今回使用するファイルのみ表示しています。


metaタグの設定(set meta tag)

ここではデフォルトでmetaタグを設定します。
後でも見せますがここで設定したタグがlocalhostで立ち上げたときブラウザのデベロッパーツールに表示されます。


nuxt.config.js

export default {
~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~
  head: {
    meta: [
~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
        { hid: 'og:site_name', property: 'og:site_name', content: 'ogp-test' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:url', property: 'og:url', content: 'https://example.com' },
        { hid: 'og:title', property: 'og:title', content: 'ogp-test' },
        { hid: 'og:description', property: 'og:description', content: '共通の設定' },
        { hid: 'og:image', property: 'og:image', content: 'https://example.com/img/ogp/common.jpg' },  // 1
        { name: 'twitter:card', content: 'summary_large_image' },  // 2
    ],
~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  },
~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}

  • 1: og:imageには絶対パスを設定しないといけません。
    そのため今回は外部の画像ファイルを表示するようにしています。
  • 2: twitterのOGPで表示する場合、目的に応じて画像の表示面積を変えることができます。
    OGPを使ってSEO効果を狙う場合とても重要な要素だと思います。
    twitter:cardのタイプとしては“summary”、“summary_large_image”、“app”、“player”の四つが現在使えます。
    app, playerはそれぞれアプリ、動画を埋め込むための設定方法ですので今回のようなケースでは“summary”、“summary_large_image”の二つだけ意識すれば大丈夫でしょう。
    この二つはOGPではそれぞれ以下のように表示されます。
  • “summary”を設定した場合

f:id:fetchkun:20200518190636p:plain

  • “summary_large_image”を設定した場合

f:id:fetchkun:20200518190659p:plain


pages/index.vue

<template>
  <div class="container">
    main page
    <br>
    <nuxt-link to="/second">secondページ</nuxt-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
})
</script>

  • index.vueはnpx create-nuxt-app プロジェクト名コマンドで作成したばかりの状態だとコードがいろいろとごちゃごちゃ書かれています。
    しかし、今回はogpを再設定しなおすsecondページに遷移するくらいが目的なのでこの程度にします。


pages/second.vue

<template>
  <div>
    Second Page
  </div>
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator'  // 3

export type MetaType = {  // 4
  hid: string,
  property: string,
  content: string,
}
export type HeadType = {  // 4
  title: string,
  meta: MetaType[],
}

export default Vue.extend({
  data () {
    return {
      meta: {
        title: 'Second-Page!',
        description: 'second pageの設定',
        url: '',  // 5
        image: 'https://placehold.jp/500x500.png',  // 6
      },
    }
  },
  head (): HeadType {  // 7
    return {
      title: this.meta.title,
      meta: [
        { hid: 'og:type', property: 'og:type', content: 'article' },
        { hid: 'og:title', property: 'og:title', content: this.meta.title },
        { hid: 'og:description', property: 'og:description', content: this.meta.description },
        { hid: 'og:url', property: 'og:url', content: this.meta.url },
        { hid: 'og:image', property: 'og:image', content: this.meta.image },
      ],
    }
  }
})
</script>

  • 3: second.vueでは'vue'ではなくnuxt-property-decoratorを使っています。
    そのためまず、npm install nuxt-property-decoratorでインストールをしてください。
  • 4, 7: 4でheadメソッドの型定義をしておき、7で使用します。
    この定義をせずにnpm run devを実行すると以下のようなエラーが発生します。
    多少文言は多少異なるかもしれません。
    一応これでも動きますが、型定義をしておくと以下のようなエラーが発生しなくなります。

 Property 'meta' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'. Did you mean '$meta'?

  • 5: ここでurlを空にしています。
    理由はlocalhostfacebookのogpテストをするとプレビュー画面が下画像のようになります。
    どうやらmetaタグに設定したurlにリダイレクトしてプレビューを出しているみたいです。
    しかし、https://local-ogp.firebaseapp.com/site/~~~~の部分は設定しなおすたびに変わるので設定することができません。
    og:urlは必須なのであえてurlを空にすることでリダイレクト先が"取得したURL"自身になるようにしています。
    ただこれをするとurlが有効でない!!とfacebookのデバッガに怒られるので正しいやり方が他にあるんだと思います。
    今回はとりあえずこのやりかたでやります。

f:id:fetchkun:20200518190735p:plain

  • 6: metaタグで画像ファイルを指定するときは絶対パスで指定しないといけません。
    なので今回ダミーの画像を生成するためにPlacehold.jpを利用します。
    サイズは500×500にします。

placehold.jp


OGPテスト(OGP Test)

あとは実際にOGPのテストをやってみます。
localhostでOGPのテストをやるためにchrome拡張機能であるLocalhost OGP チェッカーを使います。
chrome.google.com
ターミナルで以下のコマンドを実行します。

PS C:\ogp_test> npm run dev

すると下の画面がまず出てきます。

f:id:fetchkun:20200518190817p:plain
og:~のタグにはnuxt.config.jsに設定した値になっているのが分かります。
secondページをクリックすると下の画面に遷移します。

f:id:fetchkun:20200518190836p:plain
ここでは下のほうに(青丸で囲んである部分)にsecond.vueで設定した値になっているのが分かります。
ここでchromeに追加したlocalhost ogp チェッカー(赤丸で囲んである部分)をクリックします。

f:id:fetchkun:20200518190900p:plain
赤丸で囲んであるCopyボタンを押してURLをコピーしてTwitterを押します。

f:id:fetchkun:20200518190921p:plain
赤丸で囲んである部分に先ほどコピーしたURLを貼り付け下のPreview cardを押すことで左のプレビュー画面が表示されます。
このようになれば成功です。
次にまたOGPチェッカーの画面に戻り、今度はfacebookの画面を開きます。
すると下画像のような画面になると思います。

f:id:fetchkun:20200518190943p:plain
この時、赤丸で囲んである新しい情報を取得ボタンを押すと下画像の画面になります。

f:id:fetchkun:20200518191004p:plain
URLが有効じゃないというような文字が表示されますが、とりあえずはプレビューを確認することができました。

f:id:fetchkun:20200518190900p:plain
最後OGP チェッカーの画面に戻り、緑の丸に囲まれているErase This Page NOWボタンを押すことでホストされたこのページが削除されます。
以上で今回の目的を達成できました。


最後に(Finally)

今回はnuxt.jsのOGPテストをlocalhostで行う方法をまとめてみました。
nuxt.config.jsのmetaの設定部分では本当は{ property: 'fb:app_id', content: 'FacebookAppID' },を設定したりするのですが今回は一応これでもTwitter, facebook共にOGPの確認は取れました。
facebookでのテスト対策にog:urlに空文字列を入れたりと強引な部分もありますがなにか参考になれば幸いです。
より実践的な部分はこれからも勉強する必要がありますね。
ここまで読んでいただきありがとうございます。


参考記事(Reference Article)

localhostの状態でOGPのテストを開発環境で行う - Qiita
nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい - Qiita
Twitterカードの使い方と設定方法 | Twitterの使い方
Twitterのクリック率を上げるTwitterカードの導入方法|ferret