web/ogp の履歴差分(No.1)

  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2023-12-24T00:14:59+09:00","default:nemusg.pad","nemusg.pad")
* OGP（Open Graph Protocol）対応 [#fb3e2057]

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

** 概要 [#d259e9f0]

haed内に記載する

簡易

#code_x{{
<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">
}}

詳細

#code_x{{
<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:http://blog.sinap.jp/2012/05/ogp.html]]
--  非常に便利だがブックマークレットが長すぎるせいか（or日本語を含むせいか）、FVD Synchronizerで同期すると動かなくなる...
- [[これだけは知っておきたいOGP NEX.FM:http://nex.fm/ogp/]]
- [[og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ Six Apartブログ:http://blog.sixapart.jp/2012-06/ogimage.html]]

** og:imageの画像サイズ [#n4940740]

- 2018年現在の推奨サイズは`1200x1200px`
--  2014年の推奨サイズは`1200x630px`だった気がする
--  [[Facebook OGPの画像は1200px幅で - Web担当者Forum:http://web-tan.forum.impressrd.jp/e/2013/10/22/16272]]
--  [[OGP画像シミュレータ:http://ogimage.tsmallfield.com/]] で確認すると分かりやすい
- [[これで一撃！簡単にOGP画像をつくれる2つの秘密道具！:http://design.kayac.com/topics/2014/01/easy-ogp-make.php]] 見切れることを前提とした画像作成ができると常に綺麗に表示できる

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

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

*** Facebook [#fbde377b]

- 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

#code_x{{
<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 [#d4b40d27]

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