Bloggerのデフォルトテーマでは
<head> 内に
<b:include data='blog' name='all-head-content'/>
というタグが含まれています
<!-- start all head -->
<b:include data='blog' name='all-head-content'/>
<!-- end all head -->
の様に記述
(GoogleでまだBloggerを使っているところはこのコメントが入ってたりします)
して投稿ページのソースを確認してみるとわかります
(このブログもそうです)
ただ、このままでは、X(旧Twitter)のカードで画像が表示されませんが、最低限のマークアップで解決します
カードで表示されるイメージの大きさの選択
小さな画像
<meta content='summary' name='twitter:card'/>
または
大きな画像
<meta content='summary_large_image' name='twitter:card'/>
どちらかを <b:include data='blog' name='all-head-content'/> の下に追加します
Summary Card | Docs | Twitter Developer Platform
https://developer.x.com/en/docs/x-for-websites/cards/overview/summary
Summary with large image | Docs | Twitter Developer Platform
https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image
これだけで、画像がある投稿、ページではX(旧Twitter)でイメージが表示されるようになります
画像が無い投稿、ページへの対応
条件分岐で、ページに画像が無い場合のOGPを設定します
<b:if cond='!data:view.featuredImage'>
<meta content='https://*.png' property='og:image'/>
</b:if>
このコードを更に追加します
(summary_large_image の場合、推奨サイズは 1200 x 630 ピクセル以上)
関連エントリ
テンプレートをスクラッチするのでなければ、all-head-content をそのまま使用するのが無難です(色々な情報が含まれているので)
0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。