[雑談] BloggerでTwitter Cardを設定したのでメモ

- 11/29/2020 10:40:00 午後

どうもどうも！　青葉でございます。
いかが週末をお過ごしでしょうか。
私はこの後F1 バーレーンGP決勝を観戦する予定です。
バーレーンでのナイトレース。日本時間では深夜までかかるので、コタツを出しました。
本日、コタツ布団を新調！ぬくぬく！ふっかふか！　寝落ち準備万端！！（寝るんかい！）

さておき、本題です！

多くの方がブログ記事をTwitterで共有される際に、ツイートに記事のURLだけじゃなくて、画像とかサマリ的なのが表示されてて良いな～と思っていました。

調べたら、これはTwitter Cardという機能で、私がこのブログで使用している「Blogger」の場合、自分でカスタマイズしないと使用できないとのこと。ちなみにこういうやつです↓

今日試行錯誤した結果、なんとか実現できました！

終わってみれば簡単な作業だったのですが、IT音痴な事もあって、数時間格闘することになってしまいました。

知る限り、Blogger使ってる方は少数派という事もあり、需要無いかもしれないですが、万が一誰かの役に立てばと思い、どうやったかメモを残しておこうと思います。

■手順■

①「ブログテーマ」のHTMLソースに必要なタグを追加する。
②TwitterのCard Validatorで動作確認。

たった2ステップ！　なんと簡単！？

■詳細■

①必要なタグの追加

作業するページはこうやって開けました。

1.ブログ管理画面の「テーマ」を選び、プルダウンを選択。

２．「HTMLを編集」を選択。

３．表示された呪文の中の<HEAD>の次の行に必要なタグを挿入する。

※ちなみにタグは、私は以下の感じにしました。多分他の方も２行目(ロ.)以外はそのまま使えるはず。
赤い部分を変えて、色々カスタマイズできるようです。私は一番基本的な構成にしました。

イ.　<meta content='summary' name='twitter:card'/>
ロ.　<meta content='@aoba_daytrade' name='twitter:site'/>
ハ　.<meta expr:content='data:blog.title' name='twitter:title'/>
ニ.　<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
ホ.　<meta expr:content='data:blog.pageName' name='twitter:description'/>

イ. Twitterカードの種類を指定。
summary：ツイートで小画像と説明を表示するタイプ。（私はこれにしました）
他にsummary_large_imageがあります。こっちだと大き目画像と説明を表示します。ブログの種類によってはこっちの方が見栄えすると思います。
他に、アプリダウンロード画面を表示するappや、動画等の再生画面を表示できるplayer属性もあるようですが、詳しく調べてないです。

ロ. は、自分のTwitterアカウント名を指定。

ハ.はTwitter Cardのタイトルに表示する情報を指定。私はdata:blog.titleを使ってブログのタイトルにしました。

ニ. は表示する画像を指定します。直接画像のURLを書いてもいいですが、私はブログ記事の最初の画像を自動的に持ってきてくれるblog.postImageThumbnailUrlを使うことにしました。この属性は色々奥が深いようで、調べたら沼に嵌りそうだったので、簡単なので妥協しました。

ホ. はTwitter Cardの説明欄に記載する内容を指定しています。私はdata:blog.pageNameを使って、個別の記事のタイトルを記載することにしました。Bloggerで投稿ごとのメタデータ（descriptions）を書いている場合は、data:blog.metaDescriptionでそれを表示できるらしいですが、そもそもそのメタデータとやらの書き方が分かってないので試してないです。

②TwitterのCard Validatorで動作確認。

１．https://cards-dev.twitter.com/validatorを開きます。

２．URLにツイート予定のブログURLを入力して、 Preview Cardを押す。右側にプレビューが、そしてその下になんか結果のログみたいなのが表示されます。

・ここで、意図通りに表示されていたら、作業完了です。
・ここで、summaryにするか、summary_large_imageのどっちの属性にするかを試して決めるとよいかと思います。ちなみにどちらにするかはページごとには指定できず、ブログ全記事で共通になるっぽいので要注意。
・属性を変えても、すぐにはプレビューに反映されないことがあるようです。（ログはすぐに変わるようでした。）

こぼれ話：長時間苦戦した原因。

・かつては、プレビューを表示した後、該当するTwitter Cardを使用する承認をTwitterに依頼するための「Request Approval」ボタンが表示され、それを押して承認されたらやっと作業完了だったらしいです。
私はこれが今も必要だと思いこんでいたために、嵌ることになりました。
どれだけタグを直しても変えても何やっても「Request Approval」が表示されない！なんでだ！？と色々試して、悩み続けること小一時間。

コミュニティのQAで衝撃の回答を発見。

2018年以降は、承認を依頼する工程はなくなったらしいです。Validatorで一度表示させれば、それでもうOKみたい。

・もう一点、嵌った点のがありました。上記の「Request Approval」が解決したのに、なぜかまだTwitter Cardがツイートに表示されない。原因はBlogger側にありました。
Bloggerから、TwitterへURLを共有する機能を使用すると、URL末尾に「?spref=tw」という呪文が自動的に追加されますが、これが付いてるとTwitterカードが表示されないようです。末尾は「https://～～～～.html」までで終わるように直してあげましょう。(私はこれに気づくまでさらに時間を要してしまいました。）
・・・・と思ったら、呪文が付いていても、表示されるようになったぞ！？いまだに良く分からん・・・。でもまあ、他にもこれを消したら表示できるようになった人がいる模様。上手く行かないときのやってみるリストに入れてみてもよいと思います。

・その他、画像表示に関してBloggerが用意している他の属性を試したり、Blogger外部の機能で、記事の最初の画像のURLを取ってきてくれる有志のサービス(BloggerSpice：http://bloggerspice.appspot.com)を試したりとか色々してて時間がかかったんですが、これが本当に上手く行ったり行かなかったり。これは未だによくわかってないので、割愛させてください。

以上です。

どうでもいい雑談でした～～

このブログを検索

青葉のもろもろ