コラム BloggerでTwitter Cardsに対応する方法

　Twitterでウェブやブログ記事をシェアした場合、参照先の画像が表示されることがあります。「Twitter Cards」です。既に多くのウェブサイトが対応しており、写真だけでなく動画も表示できることから、Twitterユーザーにプレビューを提供したり視覚的なアイキャッチ効果が高いとされています。

　
　■Twitter Cards対応の場合

ブログ更新致しました。話題のMQA対応DACのレビューです。拙文でございますがご参考になれば幸いです。

Float A Flow: レビュー Mytek Brooklyn DAC+ Part1 リスニング編 https://t.co/MSjHM0eg2I

— INORI @ Float A Flow (@floataflow) 2018年7月8日

　■Twitter Cards未対応の場合

BBC Music Magazine Awards 2018の受賞者一覧。
Edgar Moreauさんがチェロで参加したDebussy Sonates & TrioがCamber Awards受賞。各賞試聴できます。https://t.co/Trmp5SsX7s

— INORI @ Float A Flow (@floataflow) 2018年4月5日

　ところがGoogleのBloggerはSNS連携機能の対応が比較的遅れており、先のテンプレート・アップデートで対応してくれるものだと考えていましたが、期待通りには参りませんでした。ということでBloggerにTwitter Cardsを追加いたします。

　Twitter公式DeveloperサイトにTwitter Cardsの解説ガイドがあり、このガイドのテンプレートに沿ってタグをブログのHTMLに追加するだけで基本的にはTwitter Cards対応します。上の埋め込んだツイートは「Summary Card」(要約カード)という文字と画像が混合したデザインで、他には大きな画像の「Summary with large image」、Youtubeなどの動画再生できる「Player Card」などがあります。

　但しTwitter公式テンプレートは基本的なものなので、個別ページ記事タイトルをプレビューしたり、画像を適切なサイズで表示したり、画像がない記事にブログのロゴアイコンを代替で適用するには応用が必要、その機能を追加するために以下のサイトのカスタムタグを参照させて頂きました。いずれもTwitter、Blogger公式Developerフォーラムサイトからです。

・Twitter - Blogger: Twitter Card image display problem solution
・Blogger - Social Media Previews

 ＜!--START Twitter Card--＞から＜!--END Twitter Card--＞までが必要なタグです。

　参照するTwitterのDeveloperサイトのカスタムタグをコピーし、Bloggerのテーマ>>>HTML編集>>> ＜/head＞の直前でペースト。赤丸の@ツイッターアカウント、https:// (代替画像のURL)の2点を書き換えます。代替画像は例えばクラウドなどに置いておくと便利です。
　

　■記事に写真がない場合の代替画像表示

オーディオチェック音源のページを2年ぶりに更新してみました。比較的新しいものが多めで普通に入手できるものばかりです。

Float A Flow: Sources https://t.co/xQwZdvCkzg

— INORI @ Float A Flow (@floataflow) 2018年7月2日

　最後にTwitterの公式検証ツールCard validatorでチェックしSuccessfullyと表示が出れば成功です。記事の右上のSNSマークからTwitterを選択すると小窓が表示されますので、もしシェアしたい記事があればお使いください。記事のURLでも対応しています。



関連投稿
・コラム BloggerテーマをContempoに変更