【2020年版】すぐわかるOGP設定

その他

SNS等で共有してもらうために欠かせないOGP設定ですが、毎回手動で設定していくのは時間も手間もかかってしまいます…。

そこで、今回は知っておくと便利なOGP生成・確認ツールを紹介したいと思います!

こんにちは、makotoです!

ホームページ作成やランディングページ(LP)作成で地味に大変なのが、Open Graphプロトコル(OGP)の設定です。

設定するたびに調べるのは大変なので、自動生成ツールで作ったものを確認ツールで動作チェックしていくと作業が楽になります。

OGPジェネレータ

ウェブサイト名やURLを入力すると、自動でOGPタグを生成するツールです。

使い方

フォームにウェブサイトの情報を入力して [OGP生成] ボタンを押すと、OGPタグが生成されます。

後は、そのタグをheadタグ内にコピペして終了です!

入力する内容は以下のようになっています。

  • ページタイトル(必須)
  • ウェブサイト名
  • ウェブサイトの説明
  • URL(必須)
  • 画像の絶対パス(必須)
  • コンテンツの種類(必須)
  • Twitterユーザー名
  • Twitterカードの種類

ページタイトルとウェブサイト名は似ていますが、ページタイトルはウェブサイトの中のある1ページの内容を指しています。

当ブログを例として挙げると、ページタイトルが「記事一覧」でウェブサイト名が「笹風呂」みたいになります。

ページタイトルが優先されるので、単一ページのウェブサイトであればウェブサイト名は不要です。

Twitterアカウントを持っている場合はTwitterの情報を入れておくと、Twitterカードも表示できるタグを生成してくれます。

OGPジェネレータ
Open GraphプロトコルのHTMLタグを自動生成

OGP確認

OGPを導入しているウェブサイトのURLを入力すると、TwitterやLINEなどのSNSでどのような見た目になるのかをシミュレーションできるツールです。

使い方

URLを入力するだけで、各サービスでのリンクの見た目を確認できます。

対応しているサービスは以下の通りです。

  • Facebook
  • Twitter
  • はてなブックマーク
  • LINE

OGP画像は見切れたりサイズが合っていなかったりするので、チェックするのに便利です。

OGP確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧
URLを入力すると各SNS(facebook・twitter・はてなブックマーク・LINE)でページをシェアした際のOGP画像・タイトル・説明文を確認できるOGPデバッガー・シミュレーター。PC版・スマートフォン版・アプリ版で表示サイズ・表示文字数が異なるものも全て確認できます。画像をアップしての確認も可能で、画像は5...

最後に

SNS対策は必要ではありますが、時間をかけたくない場所でもあるのでツールを使って楽していくのがおすすめです!

ただし、自動生成ツールは何十ページもあるような大型のウェブサイトには向いていないので、そのような場合はWordPress等に頼らなければなりませんね。

最後まで読んでいただき、ありがとうございました!

コメント

テキストのコピーはできません。
タイトルとURLをコピーしました