先日、Gridsome x Netlifyでお店のサイトを作り始めたという記事を書きました。
- 記事
【個人開発】Gridsome(Vue.js) x Netlifyで実家のお店のサイトを作り始めた - zackey推し - GitHub
GitHub - zakizaki-ri9/gridsome-trattoria-site: TRATTORIA e BAR PORTO - サイト
TRATTORIA e BAR PORTO - Home
今回は、サイトに対して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
ディレクト配下に出力されます。
- staticディレクトリについて
Directory structure - Gridsome
そのため、OGPとして設定したいファイルは/static
ディレクトリ配下に配置。og:image
の値は、Netlifyでホスティングされた際の画像URLを指定する必要があります。
自分が実際に実装した内容を箇条書きレベルでまとめましたので、もしよろしければ参考にしてみてください。
og:image
の値を指定した実際のコード - GItHub Default.vue/static
配下に配置したOGP用の画像
gridsome-trattoria-site/ogpimg2.jpg at master · zakizaki-ri9/gridsome-trattoria-site · GitHub- Netlifyにホスティングされている画像のURL
OGPが設定されているか確認する
設定したOGPがどのように表示されるかは、以下のサイトでチェックすることが可能です。
実際にOGPが表示されるかを試してみます。
Twitterの場合
先ほど紹介したTwitterのOGP確認サイトに遷移します。
Card URLの欄へ検証用のURLを入力後、Preview cardを押下すると、結果が表示されます。
Facebookの場合
FacebookのOGP確認サイトに遷移します。
テキストボックスへURLを入力し、デバッグを押下します。
すると、画面下部にプレビュー表示が確認できます。
【補足】GatsbyでOGPを設定する
React製のGatsbyでOGPを設定する場合、たくもんさんの以下記事が参考になるかと思います!
自分もGridsomeで実装する際のヒントを得る際に活用させていただきました。
おわり
こんな感じで表示されるようになりました。
trattoria-e-bar-porto-yamanashi.netlify.com
一読ありがとうございました。もし、間違い等ありましたら、ご指摘いただけると助かります!🙏
参考記事
ブログ中で紹介した記事や実装時、参考にさせていただいた記事を以下にまとめました。
- OGPについて
- Gridsome系
- OGPチェック用サイト
- 実装方法など