ねむすぎノート
トップ
メニュー
一覧
検索
web/ogp
をテンプレートにして作成
開始行:
* 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` 、トップ以外...
- og:image 同一ドメイン内(https不可)で、なるべくページ...
- [[OGPタグチェックのブックマークレットを作成しました! S...
-- 非常に便利だがブックマークレットが長すぎるせいか(or...
- [[これだけは知っておきたいOGP NEX.FM:http://nex.fm/ogp/]]
- [[og:image 徹底解説、意味も設定画像スペックもこれでばっ...
** og:imageの画像サイズ [#n4940740]
- 2018年現在の推奨サイズは`1200x1200px`
-- 2014年の推奨サイズは`1200x630px`だった気がする
-- [[Facebook OGPの画像は1200px幅で - Web担当者Forum:htt...
-- [[OGP画像シミュレータ:http://ogimage.tsmallfield.com/...
- [[これで一撃!簡単にOGP画像をつくれる2つの秘密道具!:ht...
** OGPキャッシュを更新(SNSフェッチ) [#hb8b53cc]
- OGPタグの設定を行ったら下記のデバッガーで確認する。これ...
- 画像を更新した場合、Facebook側にはキャッシュが残ってい...
*** Facebook [#fbde377b]
- https://developers.facebook.com/tools/debug
- %% https://developers.facebook.com/tools/debug/og/objec...
-- 「新しいスクレイピング情報を取得」(Fetch new scrape ...
- POSTによるfacebookOGPクリア( https://qiita.com/sue738/...
-- 上記の対応で更新されない場合だけやればOK
-- http://www.kagua.biz/fb/cacheclear.html
-- http://qiita.com/sue738/items/21aad5024b36effeb9ca
下記のコードをどこかにアップして、更新したい対象のページ...
#code_x{{
<form action="https://graph.facebook.com/" method="post">
<p><input type="text" name="id" size="30"><input type="hi...
<p><input type="submit" value="OGPキャッシュをクリア"></p>
</form>
}}
*** Twitter [#d4b40d27]
- https://cards-dev.twitter.com/validator
終了行:
* 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` 、トップ以外...
- og:image 同一ドメイン内(https不可)で、なるべくページ...
- [[OGPタグチェックのブックマークレットを作成しました! S...
-- 非常に便利だがブックマークレットが長すぎるせいか(or...
- [[これだけは知っておきたいOGP NEX.FM:http://nex.fm/ogp/]]
- [[og:image 徹底解説、意味も設定画像スペックもこれでばっ...
** og:imageの画像サイズ [#n4940740]
- 2018年現在の推奨サイズは`1200x1200px`
-- 2014年の推奨サイズは`1200x630px`だった気がする
-- [[Facebook OGPの画像は1200px幅で - Web担当者Forum:htt...
-- [[OGP画像シミュレータ:http://ogimage.tsmallfield.com/...
- [[これで一撃!簡単にOGP画像をつくれる2つの秘密道具!:ht...
** OGPキャッシュを更新(SNSフェッチ) [#hb8b53cc]
- OGPタグの設定を行ったら下記のデバッガーで確認する。これ...
- 画像を更新した場合、Facebook側にはキャッシュが残ってい...
*** Facebook [#fbde377b]
- https://developers.facebook.com/tools/debug
- %% https://developers.facebook.com/tools/debug/og/objec...
-- 「新しいスクレイピング情報を取得」(Fetch new scrape ...
- POSTによるfacebookOGPクリア( https://qiita.com/sue738/...
-- 上記の対応で更新されない場合だけやればOK
-- http://www.kagua.biz/fb/cacheclear.html
-- http://qiita.com/sue738/items/21aad5024b36effeb9ca
下記のコードをどこかにアップして、更新したい対象のページ...
#code_x{{
<form action="https://graph.facebook.com/" method="post">
<p><input type="text" name="id" size="30"><input type="hi...
<p><input type="submit" value="OGPキャッシュをクリア"></p>
</form>
}}
*** Twitter [#d4b40d27]
- https://cards-dev.twitter.com/validator
ページ名:
トップ
新規
一覧
検索
最終更新
RSS