Learninghacker

知的で創造的な刺激を求めて

Twitterの画像つきURLこと「Twitter Cards(ツイッターカード)」をBloggerに設定してみた。


Twitterには時々大きく画像の表示されたURLのリンクがあるツイートが流れてくる。

「一見は百聞に如かず」とは少し意味が異なるが,

視覚イメージはWEBサイトを見てもらう上では非常に重要なファクターである。

 

このURLは「Twitter Cards(ツイッターカード)」と呼ばれる

Twitterによるデベロッパー向けのサービスである。

 

どのブログを利用するかにもよるが,

はてなブログのように既にこのTwitterカードに対応しているものもあれば,

そうでないものもある。

今回はこのブログ(Blogger)をTwitterカードに対応させてみたい。

 

WEBサイトをTwitterカードに対応させる方法。

まず,Twitterのデベロッパーサイトを開く。

英語で表示されて驚く人もいるかもしれないが,

画面上で日本語に切り替えることができる。

Twitterカードの説明が記載されているが,

全部で7種類のカードデザインの概要と設定方法が表示されているので,

まずは1番の「カードタイプ」の設定を行う。

カードのデザインはWEBサイトの用途にもよるが,

私は「大きな画像付きのSummaryカード」を選択してみた。

上記の画面の後方にHTMLに挿入するサンプルコードがあるので,

これをの直後に挿入し,サイトを更新する。

サイトから任意のページを選び

URLを検証ツール(Card validator)に貼り付けてプレビューを表示させる。

成功すれば完了である。

基本的な操作はこれだけなので

WEBサイトによっては非常に簡単に設定することができる。

ただし,Bloggerの場合Googleの特殊なHTMLを使用しているため,

設定がやや困難であった。

 

BloggerにTwitterカードを設定するときには注意が必要。

ここからはBloggerに限定して述べる。

下記はこのブログのテンプレートから「HTMLの編集」に

実際に挿入してみたmetaタグである。

Twitter公式のmetaタグをBloggerに合わせて少し改変している。

参照したWEBサイトはこの記事の最後にまとめて記す。

<meta content='summary' name='twitter:card'/>
<meta content='@Twitterアカウント' name='twitter:site'/>
<meta content='@Twitterアカウント' name='twitter:creator'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/><br />
<meta expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url' property='og:image'/>

このmetaタグのうち,

titleとdescriptionについてはBloggerの個別記事のタイトルと

「検索向け説明」が反映されるようになっている。

検索向け説明を記入しないとTwitterカードがエラーになるため注意が必要である。

 

また,特に大きく直しているのはimageのタグで

個別記事の画像に対応できるようになっている。

これはたき備忘録さんの内容が非常に参考になったので,是非一度見てもらいたい。

 

おわりに:各ブログのmetaタグ修正はググって調査を!

Bloggerに関する参照WEBサイトは残しておくが,

今回はそれ以外の記事については調べることができていない。

Googleで「Twitter Cards」やブログの名前を入力すれば

何かしら情報が得られると思うので,複数を参照した上で

自己責任で自分のWEBサイトの魅力を発信してもらいたい。

 

参照

 

こちらの記事もどうぞ