web/ogp の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• web/ogp へ行く。
  • 1 (2023-12-24 (日) 00:14:59)

---

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不可）で、なるべくページごとに変える。

• OGPタグチェックのブックマークレットを作成しました！ SINAPlog
  • 非常に便利だがブックマークレットが長すぎるせいか（or日本語を含むせいか）、FVD Synchronizerで同期すると動かなくなる...
• これだけは知っておきたいOGP NEX.FM
• og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ Six Apartブログ

og:imageの画像サイズ#

• 2018年現在の推奨サイズは1200x1200px
  • 2014年の推奨サイズは1200x630pxだった気がする
  • Facebook OGPの画像は1200px幅で - Web担当者Forum
  • OGP画像シミュレータ で確認すると分かりやすい
• これで一撃！簡単にOGP画像をつくれる2つの秘密道具！ 見切れることを前提とした画像作成ができると常に綺麗に表示できる

OGPキャッシュを更新（SNSフェッチ）#

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

Facebook#

• https://developers.facebook.com/tools/debug
• %%https://developers.facebook.com/tools/debug/og/object/%%
  • 「新しいスクレイピング情報を取得」（Fetch new scrape information）で更新される
• POSTによるfacebookOGPクリア（ https://qiita.com/sue738/items/21aad5024b36effeb9ca ）
  • 上記の対応で更新されない場合だけやればOK
  • http://www.kagua.biz/fb/cacheclear.html
  • http://qiita.com/sue738/items/21aad5024b36effeb9ca

下記のコードをどこかにアップして、更新したい対象のページのURLを入れてもOK

<form action="https://graph.facebook.com/" method="post">
<p><input type="text" name="id" size="30"><input type="hidden" name="scrape" value="true"></p>
<p><input type="submit" value="OGPキャッシュをクリア"></p>
</form>

Twitter#

• https://cards-dev.twitter.com/validator