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でシェアしてもらうときの見栄えが良くなると思いますので、ぜひとも設定しておきましょう。
