comaty: BloggerのTwitterカード対応

2016年2月5日金曜日

概要が表示されるツイート

ブログ記事や企業のページからツイートすると何やら画像付きの枠がついたツイートになるではないか。

自分のブログは？というと、文字とURLしか投稿できない。

私のブログからもかっこよくツイートしたいぞ。

どうやら、概要を表示しているのはTwitter Cardというものの仕業らしい。

ふむふむ。

早速、このBloggerのブログも対応してみようじゃないか！

参考にさせていただいたのは以下の記事。

ありがとうございます。

試行錯誤過程は、後述しますが「結論はよ！」って人のためにやることを書いておきます。

紹介されていたMETAタグをテンプレートのHEAD部分にいれて、Card validatorにて確認したところ、エラーとなりました( ･´ω`･ )

ERROR: Required meta tag missing (twitter:text:description)

どうも、ここが怪しいらしい。

いろいろ調査してみたところ、Descriptionタグによって取得される情報が設定されていない模様。

やはり、Blogger側のDescriptionが設定されていなかった。

設定するのは、Bloggerの設定にある[検索設定]＞[説明]部分。

設定後、もう一度確認。

ブログのホームページについては、エラーなく通った模様。

INFO:  Page fetched successfully

INFO:  10 metatags were found

INFO:  twitter:card = summary tag found

INFO:  Card loaded successfully

記事のURLで確認すると同じエラーが。

ERROR: Required meta tag missing (twitter:text:description)

記事側も説明を記入する必要があったみたいです。このエラーは「説明(Description)の情報を取得しようとしたんだけど、設定されてないんだけど！！！」と怒られていたのでした。
設定は、生地の編集画面の右側にある[投稿の設定]＞[検索向け説明]に説明を入れればOKなのでした。

気を取り直して。もう一度確認。

Unable to render Card preview

気になっていたのだけど、上のメッセージが表示されるだけで、思ったようなプレビュー画面にならない。
しばらくしてもう一度やってみると、なんとできた。
少し時間がかかっただけなのか。

参考にしたブログ記事の流れではRequest Approvalが必要っぽいのだけれど、見当たらない。

どうするんだろう。

ひとまず、試しでつぶやいてみるかなっ。

おぉ！できているようだ！！