ツイートにBlogger情報を表示する方法

ツイッターカード(twitter card)というらしいです。
簡単に言うと下記のようにサイトの情報を表示してくれます。

2018/03/25時点のツイート画像で紹介させていただいています。

このように表示することが可能になります。
Bloggerですとテンプレートを編集する際にヘッダーに下記のように書き込むと上のようなツイートが表示されます。

<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='画像URL' property='og:image'/>

twitter:cardにはsummaryとsummary_large_imageがありますが、summary_large_imageは大きな画像で表示されます。

サムネイルはproperty='og:image'で指定した内容が表示されました。
当初、
<meta content='画像URL' name='twitter:image:src'/>
で設定をしていたのですがどうしても出てくれなかったので、こちらに変えるときちんと表示されました。
この指定方法が違っていて、
<meta content="画像のURL"　name="twitter:image" />
であれば表示されたような気がします。もうog:imageで表示されたのでいいかなと思っています。

画像URLはサムネイル用の画像ファイルを用意してください(参照リンクではなく直リンクとなります)。
サイズは120px×120px以上の1M以下だそうです。summaryを設定した場合は正方形になります。
私は下記ファイルを用意してました。

縮小されていますね。summaryの場合は正方形の画像を用意したほうがよさそうです。

最後にきちんと設定できているかを、Card validatorで確認することができます。

2018/04/02:画像に変更
2017/10/25:ページの作成

[PR]

関連記事