ざきの学習帳（旧 zackey推し ）

日々の学びを書きます

【Gridsome v0.5.7】vue-metaを使ってOGP（Twitter・Facebook）の設定を行う

Gridsome Vue.js JavaScript プログラミング Netlify

f:id:kic-yuuki:20190504161223p:plain

先日、Gridsome x Netlifyでお店のサイトを作り始めたという記事を書きました。

今回は、サイトに対してOGPを設定したので、設定手順を記載します。

この記事なに？

Gridsomeを用いて、OGPを設定したときの手順になります。

OGPとはなんぞや？

ざっくり説明すると、SNS（TwitterやFacebookなど）でリンクがシェアされた際に表示する画像や説明文の設定のことです。

設定はmetaタグに記述します。（次のようなイメージ）

<!-- 基本 -->
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />

<!-- Twitter用の設定 -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

<!-- Facebook用の設定 -->
<meta property="fb:app_id" content="アプリID" />

各タグの意味や設定内容等については、次の記事に詳しく記載されていますので、もしご興味あれば、ご参照ください。🙇‍♀️

GridsomeでOGPを設定する

Gridsomeでmetaタグを設定する場合は、Gridsome公式の次のページを参考にします。

Nuxtのvue-metaというプラグインを用いて、metaタグの実装を実現しているみたいですね。

次のようなイメージで記述します。

【注意】og:imageはURL指定

先サンプルコード（Sample.vue）で指定している通り、og:imageに対しては、URL指定する必要があります。

Gridsomeでビルド（gridsome build）される場合、/static配下に配置したファイルは、そのままdistディレクト配下に出力されます。

そのため、OGPとして設定したいファイルは/staticディレクトリ配下に配置。og:imageの値は、Netlifyでホスティングされた際の画像URLを指定する必要があります。

自分が実際に実装した内容を箇条書きレベルでまとめましたので、もしよろしければ参考にしてみてください。

OGPが設定されているか確認する

設定したOGPがどのように表示されるかは、以下のサイトでチェックすることが可能です。

実際にOGPが表示されるかを試してみます。

Twitterの場合

先ほど紹介したTwitterのOGP確認サイトに遷移します。

f:id:kic-yuuki:20190504154555p:plain

Card URLの欄へ検証用のURLを入力後、Preview cardを押下すると、結果が表示されます。

Facebookの場合

FacebookのOGP確認サイトに遷移します。

f:id:kic-yuuki:20190504155204p:plain

テキストボックスへURLを入力し、デバッグを押下します。

f:id:kic-yuuki:20190504155258p:plain

すると、画面下部にプレビュー表示が確認できます。

【補足】GatsbyでOGPを設定する

React製のGatsbyでOGPを設定する場合、たくもんさんの以下記事が参考になるかと思います！

自分もGridsomeで実装する際のヒントを得る際に活用させていただきました。

おわり

こんな感じで表示されるようになりました。

trattoria-e-bar-porto-yamanashi.netlify.com

一読ありがとうございました。もし、間違い等ありましたら、ご指摘いただけると助かります！🙏

参考記事

ブログ中で紹介した記事や実装時、参考にさせていただいた記事を以下にまとめました。