Twitterカードを導入してみた。｜Bloggerカスタマイズ【備忘録】

　このブログで超収益上げてヒャッハー！っていうのはちょっとは考えていますが（コラッ！）世の中そう甘くはありません。とは言えせっかく書いたものを見て頂くっていうのも、何かしらのお知らせをやらないとなりません。ということで当ブログもTwitterカードなるものを導入する事にしました。

追記20170629：文章の訂正。つながりとかおかしな部分を修正しています。

追記20190929：リンク切れの修正と一部文章を追加しています。

Twitterカード/ツイートでの見え方（ノーマル）PCで

Twitterカードとは

　エキブロの頃はPingを飛ばしたりトラックバックしたり（そういえばBloggerにはトラックバックがありませんね。）または更新情報をエキブロのホームにアップしたりとか、いろいろやっていました。ですがBloggerにはトラックバックをトラックバックセンターに送る機能などはありません。そこで「更新のお知らせ」を見た目に分かりやすいように考えたのがこのTwitterカードです。

Twitterカード導入までの流れ

　ブログを再開させてから更新のお知らせはどうしようかと思って頭を悩ましていました。実はエキサイトブログ時代にも途中から手間がかかるし、Twitterに軸足が移ってしまいそういう事もしなくなって幾年月。荒れ地になってたバックアップのBloggerのこのブログ、アネックスに戻ってきた時にエントリを書きましたよっていう更新告知はどうしようかと思った時に、まずは主にやっているSNSでTwitterでリンク付きで流すのがいいと思いリンク付きツイートをすることにしました。

　しかしよくTwitterのツイートの下にサムネイル画像付の要約で表示されるあれが出ない。何故なのかなと思いつつ暫くリンクと短文紹介だけで過ごしていましたが、ハッシュタグの #好きなタイトル画像 でタイトル画像を引用するのに他の方はその画像をアップしていました。こちらは手持ちの画像も無く、外部ページでいいページを発見したのでリンクをつけてみましたがサムネイル画像付きの表示がされない、で、何故か今日に限って調べてみるとTwitterでリンクをサムネイル画像付で表示させるにはTwitterカードなるものを使うというの事が分かったのです。

画像はTwitterカードが表示されているtonbori堂のツイートのスクリーンショット ｜赤で囲っている部分がTwitterカードの部分です。

　もともとTwitterアナリティクスでどのツイートがっていうのを調べるのが好きで、そのページにあるカードの単語も目にはしていたのですが（アナリティクスの表示ページでカード導入のおすすめがある）しかし有料じゃないの？と思って、二の足を踏んでいたのです。ですが、これ無料で利用できるのです。

Twitterカード

　TwitterカードというのはTwitter社が提供しているWeb技術で、いわゆるメタタグを利用してリンク先へのトラフィックやリッチコンテンツのダウンロードを促進する…のような事が書いてありました。これはSEO対策の一環になりますよっていうやつです。SEOっていうのはアフィリエイターとか企業のホームページをしている人には当たり前の用語ですが、最近はアマチュアでもブログの読者を増やすために積極的に用いられるようになってきました。

SEO

　検索エンジン最適化の英語の単語を頭文字をつなげた言葉です。tonbori堂が昔、エキブロでエントリを書いてた頃にあった話なんですが、あるエントリが急に莫大なトラフィックを上げたことがあってなんで？と思ったらYahoo!の検索上位に表示されるようになったからだったというのがありました。映画『交渉人真下正義』の犯人「弾丸ライナーの正体は？」っていうやつでその名残か、今は1日のトラフィックはPV10を切っていますが、どこかで放送されたりすると、時々検索で流れてくる人がいます。ちなみに弾丸ライナーの正体は不明です（笑）その頃は踊る大捜査線関係のムックとか持っていたんで（プチ引っ越しの時に断腸の思いで処分しました）そのインタビュー記事などからエントリを書いたように思います。

　つまり検索エンジンにトップに来たものがネットを制するみたいな感じになってて、そこにSEO対策に大金が突っ込まれる土壌にもなっているようです。実際クラウドワーカーとしてSEO対策で云々っていうブログ記事のオファーもありましたし。ちなみにここまででSEOは5回記しています（これ入れて6回）なんか伝えたい言葉、ワードを何度も入れてあると効果があるとかもっともらしいことも聞いたことがありますが、それによって実際にPVが上がるかどうかはよく分かりませんが、少なくともそれについて言及が多いとは判断されるでしょう。

　またキーワードにかんしてはand検索、or検索（Googleの検索窓にワードをいれると次によく検索される言葉が出るあれです）を意識した方がという話もよく目にしましたが、真下のエントリはまさにそれで『交渉人、真下、弾丸ライナー、正体』で検索してくる人がむちゃくちゃ多かった。まあ今なら『小さな巨人、顔芸』とか『小さな巨人、真相、ネタバレ』でしょうか。正直『小さな巨人、顔芸』はTwitterで書いちゃったからエントリはあげておりませんが『小さな巨人』でトラフィック爆上げを狙うなら『顔芸』っていうワードは関係なくても散りばめておくのがいいという事です。ちなみにドラマだとだいたい、動画、視聴率、主題歌がandで多いようですね。このブログではそっちにはまったく触れておりませんが、動画はTBSの動画で、視聴率は最後はあがったようで、平井堅の主題歌も話題にされていることが多いようですが、これは多分、歌詞やダウンロード開始されてるのかどうかとかを知りたい人が多いからだと思います。

導入方法

　ちょっと話がそれましたね。でTwitterカードはwebページのHTMLにメタタグを導入するだけで出来ます。これは割合と簡単でした。まずはTwitterにログインして画面上の自分のアイコンをクリック。

　するとポップダウンメニューが出てきますから、そこからアナリティクスを選択。アナリティクスのページで写真の項目が左下にあるので探してみてください。あったらそこにあるリンクでTwitterの開発ページにジャンプします。

　ページが開くと英語で読めない方は左側の下に日本語という項目があります。そこをクリック。右側にTwitterカードの概要ページに出ます。そこから解説ページに飛び、導入方法が記してあるので読み終わったら導入するカードをクリック。

　次に現れたページは英語ですが、ここで先ほどと同じく日本語をクリックしても元ページに戻るだけ、真ん中あたりにあるソースコードSample Codeの緑色のメタタグをコピー、メモ帳などに張り付けましょう。そしてサンプルコードの中の変更する部分（”で始まって”でくくられているところ）を自らのサイトの情報に書き換えて、サイトのヘッダ（HEADの下）以下に貼り付けます。

Twitterカードソースコード掲載ページ

　あとはTwitterでリンクを入れてカードが生成されるかどうかをTwitterの検証ページで確認して終了です。サイトのヘッダというのは例えば編集ソフトで開いた時に上にある＜head＞と表示のある下から＜/head＞までの間です。そこにある記述（文字列）の下を改行して貼り付けるだけでokです。（ヘッダの場所はサイトのソースでも確認できます）

追記：20190929　現在URLが変更になっておりTwitterカードのソースコードのページが変更になっています。そのため詳しくはTwitterの当該ページにて確認してください。

カードの利用開始 — Twitter Developers

htmlソースコードはそのページの最後にあります。基本的には同じなので確認して貼り付けてください。但し、htmlコードをテーマに貼る場合はバックアップを忘れずに。

メタタグ

　この辺り本当に魔法の呪文みたいで、なんでこうなるのかは導入の手順は説明できても、表示される理屈はちゃんと説明できません。将棋AIのポテンザつくってる人の記事がインターネットにあがっていますがAIのプログラムもある種の黒魔術のようなと語っておられました。でも黒魔術っておどろおどろしいイメージでどうも技術者って神も恐れぬとかそういうのがどっかに頭にあるのかなと。人が幸せになったり、笑顔にさせる技術ならば白魔法でもいいじゃないと思ったりもするんですが。それとも最近は魔法使いの話も多く黒も白もそれほど差は無いとかそういうことなんでしょうか。また話がそれましたね。それついでにメタタグといえば『電脳コイル』AR技術でITの電脳空間とこちらを繋ぐ話でIT空間がある種『あの世』『幽世』みたいなところはあって、やはりそういう感じはあるのかもしれません。

　で、戻しますとそのメタタグを挿入しておけばTwitterでリンクツイートするとめでたく140文字外でサムネイル画像付と要約記事が表示されるわけです。Bloggerに実装すると『検索向け説明』（スニペット）が表示されます。Twitterカードにはいくつか種類があり、それはコンテンツに適したものを選べとあったので一般的なSummaryカードを実装してみました。こんな感じで表示されます。

TwitterのツイートによるTwitterカード表示例/スクリーンショット｜オレンジで囲んでいる部分。 ｜下の埋め込みツイートは環境によっては表示されていないかもしれません。

【更新】これで上手くいってなかったらまたHTML見直し(^^;Web-tonbori堂アネックス：Twitterカードを導入してみた。https://t.co/DQ5unB2VZg

— tonbori堂＠この世界の片隅に (@tonbori) 2017年6月27日

　他にも種類があり画像を大きく表示するlarge、アプリケーションダウンロードを促せるAppカード、音楽、映像などのコンテンツも表示できるPlayerカードがあるそうです。まあ基本テキストのエントリが主なのでベーシックなSummaryカードを選択しました。基本的にはhaed以下に次のコードを記述してください。カードの種類は上にも書いた、“summary”、“summary_large_image”、“app”、“player”の3種類。基本的には“summary”、“summary_large_image”、どちらかをチョイスになると思います。

<meta name="twitter:card" content="summary"></meta>

　但しこれだけではサムネイルが上手く出ない場合があるのでOGP（オープン・グラフ・プロトコル）と組み合わす必要があります。そのコードはTwitterカードの説明ページの下にありますが自らのブログに合わせてサンプルコードを変える必要があるので注意してください。

何故導入したのか？

　それはもう単純にブログ記事（エントリ）を見てもらえるかなっていうだけの話でして。Twitterカードは見栄えもいいし、画像も出るので内容が掴みやすいかなと。バズらなくてもいいけどある程度人には見てもらいたいっていうのはあります。大体のブロガーって自分も含めて承認欲求があると思います。自分の場合は肥大化しないようには気を付けていますけどでもある程度は無いとブログは書いていられません。反対に違うという反論が来ることも当然想定しておかないといけませんし、間違っていたら（主張ではなくファクトが）ごめんなさいをする事も必要です。

　最近では『CRISIS 公安機動捜査隊特捜班』の使用している拳銃についてのエントリでSIGという誤認をやらかしてTwitterでご指摘いただきヘッケラー＆コックのUSPという事に書き直ししました。（間違った文章も線を入れて残しています。）ブログって割と自分を削る作業なんで疲れるまではやるなというのが持論なんですが、かといって全然書かないと溜まってくるものがあります。そのために発表する場は確保しておきたいというのと、割と読んでるもの、観ているもの、これ面白いですよっていうのは共有したいというのもあるし、画像を貼るのにちょうどいいというのもあって、Amazonアソシエイトも導入したし（これは前のプロバイダーブログからです）後はエキブロみたいに過疎らない程度にエントリを上げていくモチベーションアップのための施策の一つとしてカードを導入したという事です。

　それにツイートにサムネイル画像付テキストリンクが表示されたら割と見た目もいいし、ああ次も書こうかなってなりますし。＜（単純です）そんなこんなでこれからも自分のペースで書きたいことを、これからもぼちぼちと書いていきたいと思っています。