BloggerでTwitter Cardsを設定する手順・方法

スポンサーリンク

Twitter CardsはSNSでシェアしていただくときには必要不可欠なものです。

他のBloggerのブログで設定したときにはそれほど苦労した記憶がないので、楽勝楽勝パパっとやっちゃおうと思って取り組んでみたけど、意外なところでつまずいてしまった……。

今になって思い返せば、前回と全く同じところでつまずいたことを思い出した。なので備忘録も兼ねています。

Twitter Cardsもいくつか形式があるし、それはもう他のサイトでも紹介されているので、今回このブログでは“Summary Card with Large Image”を設定しました。

簡単に手順を紹介していきます。

検索向け説明を有効にする

まずは「Bloggerダッシュボード」→「設定」→「検索設定」を開いてください。

検索向け説明を有効にしてください。そしてブログの概要を入力します。それから各記事ごとの検索向け説明も入力しておきます。(記事を投稿する画面の「投稿の設定」にあるやつ)

私はこれをやっていなかった結果、「ERROR: Required meta tag missing (twitter:text:description) 」と表示され、エラーを解消するのにどえらい手間取りました。ちょっと泣いた。

当ブログで現在設定しているもの

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@bondaynet' name='twitter:site'/>
<meta content='@bondaynet' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.title' name='twitter:title'/>
    <meta content='https://2.bp.blogspot.com/-SQa6fRKBcig/V-N_RdSo1bI/AAAAAAAADa8/2Io85G0X_ZkCHrM45I34Qrcvnj7IchL3ACKgB/s1600/bonday.001.png' name='twitter:image'/>
<b:else/>
<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: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 expr:content='data:blog.canonicalUrl' name='twitter:url'/>

赤字の部分は適宜変更してください。

画像のURLは現在私のブログタイトルが入った画像が設定されていますので、各自ご用意いただいて変更してください。

あとは表示の確認です。

ブログのトップページがシェアされたとき

ブログの記事がシェアされたとき(記事内に画像がある場合)

ブログの記事がシェアされたとき(記事内に画像がない場合)

BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する : たき備忘録

追記は以上です。ここから下は当初公開した内容です。ご必要の方のみご覧下さい。

BloggerのHTMLを編集

それからHTMLを編集してコードを追加するのですが、これについては他の方のブログが非常に参考になるというか、そのままコピペできますので、そちらをご参照ください。

Blogger ブログを Twitter Cards に対応させる方法 | クリボウの Blogger Tips

<meta content=’summary’ name=’twitter:card’/>
<meta content=’@kuribo_blogger’ 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 Card”タイプのコードなので、“Summary Card with Large Image”タイプの場合は一行目を、

<meta name='twitter:card' content='summary_large_image'/>

に変更します。

そして二行目の@kuribo_bloggerをご自分のTwitterアカウントに変更してください。

それを<head>タグのすぐあとに貼り付けます。

記事ごとのサムネイル画像に設定したい場合は、twitter:imageの箇所を

<meta expr:content='data:post.thumbnail' name='twitter:image'/>

に変更するとOKです。

……のはずだったのですが、急に(2016年4月3日)サムネイルが読み込まれなくなりました。

というわけで、変更。

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:title'/>

これで無事に反映されました。

……のはずだったのですが、これではPicasa以外にアップロードした画像を反映できないそうです。なので、BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する : たき備忘録にお世話になりました。いつもありがとうございます。

<meta name='twitter:image' expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url'/>
<meta property='og:image' expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url'/>

引用元:BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する : たき備忘録

上記のコードに変更すれば完了です。

“Card validator”で検証

最後にCard Validator | Twitter Developersで動作検証をします。

ブログのURLを入力します。トップページでもいいし、どれかの記事ページでもいいと思います。

それから「Preview Card」をクリック。

こういう感じになれば成功です。

これでTwitterでシェアしてもらうときの見栄えが良くなると思いますので、ぜひとも設定しておきましょう。