URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」+OGP設定の確認方法

  • 2020.03.25
  • Web
URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」+OGP設定の確認方法

最近ちょくちょくOGP設定※の依頼が来ます。
簡単な方法みつけたので共有です。こっちは静的ページ用です。ブログはプラグインがよさそう。

※OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

HEY METAは、サイトのURLを入力するだけで、OGPタグを自動生成してくれるWEBサービスです。

 

HEY METAの使い方

HEY METAにアクセスして、URLを入力します。ブログの場合は、記事ページのURLを入力してください。

サイトURLの入力

解析が完了すると、下記の項目が表示されますので、変更したい箇所があれば修正します。

HEY METAの解析結果

  • Social Card Preview
  • Title
  • Description
  • Image
  • Website Address

[Generate]をクリックすると、OGPタグが生成されます。

OGPタグの生成

OGPの確認

OGPを確認する方法についてご紹介します。設定したOGPが正しく反映されているか、ページを追加した時や改修をしたときなどにチェックしておきましょう。

デバッガー(Facebook)

デバッガー

Facebookが公開している、開発者向けのツールです。無料で使えますが、Facebookアカウントでログインしておく必要があります。

デバッガー – 開発者向けFacebook

Card validator(Twitterカード)

こちらはTwitterカード向けの確認ツールです。ページのURLを入れるだけで、簡単にOGPの確認ができます。

Card Validator

Card Validator | Twitter Developers

https://ogp.buta3.net/