TwitterのOGP画像が表示されないときにチェックすることについて、備忘録がてら書いていく
TwitterのOGP画像は絶対パスで指定すること
Habanero Beeの開発をしていてTwitterのOGP画像が表示されていないことに気づいた。
なぜかと思って調査したところ、結論から言うと、TwitterのOGP画像は絶対パスで指定しないと表示されないのだった。
(以前にも同じケースで詰まったことがあったので、途中で、はたと気がついた)
修正したときのissueはこちら
余談: Habanero Beeのversion 0.8.0をリリースしました
ちなみにHabaner Beeは今朝 version 0.8.0 をリリースした。
サイトのテーマにもよるが、ドッグフーディングしている感じとしては、サイトを公開してからGoogle のAMPキャッシュに2~3日ぐらいで乗り始めていくので、サクッとサイトを公開して集客していきたい人にもオススメ。
Google検索にインデックスされていくペースも悪くないと思う。
GitHubとNetlifyのアカウントが必須となるが、条件を満たしていれば、月々のサーバ代をかけずに、しかも独自ドメインありで、自身のサイトを運営できるのはかなり良いと思う。
(独自ドメインありの場合、もちろんドメインの年間使用料などは別途支払う必要があるが、それもプレミアムなドメインでない限り、1000~2000円ぐらい辺りかと思われる)
Habanero Beeについてはこちらで詳しく説明しているので、よろしければ覗いてみてください。
TwitterのOGP画像として設定した画像ファイルの条件に問題はないか？
さて、話は戻り、TwitterでOGP画像を絶対パスで指定しても画像が表示されない場合は、指定している画像ファイル自体が条件にあっているものかをチェックする必要がある。
上のHababero Beeの問題で調べたときに画像の表示条件についても併せて調べたので、下に箇条書きで書いていく。
TwitterのOGP画像として表示する画像サイズの条件はTwitter側で定められているので、もしOGP画像を絶対パスで指定しても表示されない場合は、ここらへんの内容を見てみたほうが良いかもしれない。
なお、詳細なドキュメントは下記。
About Twitter Cards | Docs | Twitter Developer Platform
summaryでOGP画像を指定した場合の画像の条件
<meta property="twitter:card" content="summary" />
上記のようにsummaryで指定した場合の画像の条件は下記の通り
- アスペクト比が1:1
- 最小サイズが144x144ピクセル
- 最大サイズが4096x4096ピクセル
- 画像のサイズは5MB以下
- 画像はすべてのプラットフォームで正方形に切り取られる
- 対応している画像形式はJPG、PNG、WEBP、GIF
- アニメーションGIFの場合、の最初のフレームのみが使用されるとのこと
- SVGには対応していない
summary_large_imageでOGP画像を指定した場合の画像の条件
<meta property="twitter:card" content="summary_large_image" />
上記のようにsummary_large_imageで指定した場合の画像の条件は下記の通り
- アスペクト比が2:1
- 最小サイズが300x157ピクセル
- 最大サイズが4096x4096ピクセル
- 画像のサイズは5MB以下
- 対応している画像形式はJPG、PNG、WEBP、GIF
- アニメーションGIFの場合、の最初のフレームのみが使用されるとのこと
- SVGには対応していない
今回はこれで以上となる。
Twitterでリンクをシェアする際、OGP画像の有無はかなりクリック率に影響が出るので、しっかりと画像は表示されるようにしていきたい(戒め)