当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
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 == "index"'> <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 == "item"'> <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のHTMLを編集
それからHTMLを編集してコードを追加するのですが、これについては他の方のブログが非常に参考になるというか、そのままコピペできますので、そちらをご参照ください。
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@kuribo_blogger’ name=’twitter:site’/>
<meta expr:content=’data:blog.pageName + " | " + data:blog.title’ name=’twitter:title’/>
<meta expr:content=’"http://bloggerspice.appspot.com/postimage/" + 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='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url'/> <meta property='og:image' expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url'/>
上記のコードに変更すれば完了です。
“Card validator”で検証
最後にCard Validator | Twitter Developersで動作検証をします。
ブログのURLを入力します。トップページでもいいし、どれかの記事ページでもいいと思います。
それから「Preview Card」をクリック。
こういう感じになれば成功です。
これでTwitterでシェアしてもらうときの見栄えが良くなると思いますので、ぜひとも設定しておきましょう。
