いや、以前から追加してたので、正確には「テンプレートを修正しました」です。
まず、head要素に「
prefix='og: http://ogp.me/ns#'」を追加します。<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' prefix='og: http://ogp.me/ns#'>そして、<head>〜</head>の間に次のタグを追加します（Twitterアカウント名は変更してください）。
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@Twiiterアカウント名' name='twitter:site'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName ? data:blog.pageName : data:blog.title' property='og:title'/>
<meta expr:content='data:blog.pageType == "index" ? "website" : "article"' property='og:type'/>
<b:if cond='data:blog.postImageUrl'><meta expr:content='data:blog.postImageUrl' property='og:image'/></b:if>
<b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' property='og:description'/><b:else/><meta expr:content='data:blog.pageName' property='twitter:description'/></b:if>以上です。
Twitterのデベロッパーフォーラムで、サムネイル画像URLの取得に「
data:blog.postImageThumbnailUrl」が使えると分かったので試してみたところ、サムネイル画像のサイズが「72×72px」でした。しかし、summary形式のTwitter Cardsでは、画像サイズが「120×120px以上」とされているので、これではサイズ不足です。で、ひょっとしてと思って試してみたところ、「
data:blog.postImageUrl」で大きな画像サイズのURLを取得することができたので、これを使うことにしました。ただし、Twitter Cardsに指定できる画像のファイルサイズは1MBまでなので、その点に注意が必要になります。せっかく大きな画像が使えるなら、ということで、Twitter Cardsをsummary_large_image形式にしています。従来のsummary形式に戻す場合は、1行目の「
summary_large_image」を「summary」へ変更します。
0 件のコメント:
コメントを投稿