Bloggerで私はブログを書いているのですが、書いた後ツイッターで記事をツイートしています。

そのときよく見たらツイッターカードに画像が表示されていませんでした。

前はちゃんと表示されていたのになんでだろうと考えてみたら、テーマを変更したことが原因のようです。

そのテーマではツイッターカードの設定はされていたのですが、何かが前とは違ったようです。

今回はその解決法についてまとめました。

Blogger以外にアップロードした画像が使用できない？

「data:blog.postImageThumbnailUrl」 というタグを使っているとBlogger以外にアップロードした画像が反映できないそうです。

今回私が使っていたタグは「data:blog.postImageUrl」でした。

ThumbnailUrlがUrlに変わってるので少し機能が異なるとは思うんですけど。

しかしテーマを変える前のコードもこれだったんでやっぱり原因がよくわからないですね。。

画像を表示するには

ずばりこのサイトです。

Blogger ブログを Twitter Cards に対応させる方法

そのサイトに書かれていたコードを参考にしました。

このコードでは画像を表示するのに「BloggerSpice」というものを使っているそうです。

投稿内の最初の画像とリダイレクトしてくれるそうです。

まとめ

具体的な原因がよくわからなかったのですが、とりあえず画像が表示できるようになったので良かったです。

調べてもわからないのは私のHTMLやXMLへの理解が浅すぎるからです。。

是非誰か詳しい原因をコメントで教えてください。。

一応改善前と改善後のコードを貼っておきます。

改善前

<meta content='summary_large_image' name='twitter:card'/>
  <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.title' name='twitter:title'/>
  
<!-- 自分の画像URLに変更する -->
   
  <meta content='ブログに画像がないとき表示される画像'/>
  <b:else/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='Image URL' name='twitter:image:src'/>
  </b:if>
  </b:if>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
  </b:if>

改善後

<meta content='summary' name='twitter:card'/>
<meta content='@自分のツイッターID' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

あと私はツイッターカードの画像は大きい方がいいので上の"summary"を"summary_large_image"に変えました。