Twitter Card っていうらしいんだけど、最近調べてみたら思ったより簡単に表示するようにできるぽいので、このブログにも実装してみました( ˘ω˘)
やり方
色々詳しく説明してくれてるサイトがいっぱいあったので、Twitter Card でググってもらったほうがよいと思います(+'-')bとりあえず手っ取り早く実装してみたい人は下記コードを<head>部分に入れるだけでいけるかと( ´ー`)
<!-- Open Graph タグ --> <meta property="og:title" content="サイト名" /> <meta property="og:description" content="ブログの説明文" /> <meta property="og:image" content="カードで使用する画像のURL" /> <!-- Twitter カード用 設定 --> <meta name="twitter:card" content="summary" /> <meta name="twitter:creator" content="@Twitterアカウント名" />
Brogger の場合
ところが Blogger の場合。記事タイトルを取得したい場合などは Blogger のタグを指定してやらないとダメなのでちょっとややこしいです…(￣ー￣A)ちなみに、下記コードはこのブログでの設定です(*ﾉωﾉ)
記事への直リンクの場合に記事の要約(文頭)も取得したい場合は、data:post.snippet が head 内で使用できないという話なので、ちょっとややこしいです…つω・;
<!-- Twitter カード用 設定 -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@pumitom" />
<!-- Open Graph タグ -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<!-- 記事リンク時に要約を取得できないか入れてみた行。でも現在 head で data:post.snippet を読み込まないらしいのでbodyに入れないとダメぽい。なので後述
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
-->
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://sites.google.com/site/pumitom/file/twitter_card.jpg' property='og:image'/>
</b:if>
-------------
<!-- さらに下記コードを body の data:post.snippet が取得できる位置に入れないとダメみたい -->
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
確認できるサイト
Card Validator | Twitter Developers （カードの表示確認ツール）https://cards-dev.twitter.com/validator
OGPタグ・メタ情報チェックツール
https://www.google.co.jp/search?q=OGPタグ+メタ情報+チェックツール
