OGP(Open Graph Protocol)対応

複数のSNS等に対応した規格。Facebook・Twitter・Slackなどが対応している。

概要

haed内に記載する

簡易

<meta property="og:title" content="meta titleと揃える">
<meta property="og:type" content="website">
<meta property="og:url" content="https://~~/">
<meta property="og:image" content="http://~~.png">

詳細

<meta property="og:title" content="meta titleと揃える">
<meta property="og:type" content="website">
<meta property="og:url" content="https://~~/">
<meta property="og:image" content="https://~~.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="meta descriptionと揃える">
<meta property="og:locale" content="ja_JP">
  • og:type サイトトップで'website'か'blog'、トップ以外は'article'が推奨らしい。
  • og:image 同一ドメイン内(https不可)で、なるべくページごとに変える。

og:imageの画像サイズ

OGPキャッシュを更新(SNSフェッチ)

  • OGPタグの設定を行ったら下記のデバッガーで確認する。これによってキャッシュが更新される。初回でもやっておかないと最初の投稿で画像を引いてこれない(少なくともFacebookは)。
  • 画像を更新した場合、Facebook側にはキャッシュが残っているのでこの対応を行うまでずっと古い画像のままになる。

Facebook

下記に更新したい対象のページのURLを入れてもOK 廃止されているような気がする

Twitter


最終更新: 2018-09-09 (日) 13:45:21