Blog

Bloggerの画像つきURLをTwitterに表示させる方法【Twitterカード設定方法】

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

こんにちは、uru(@uru_)です。この記事ではBloggerで発信するブログ記事のURLを「Twitter Cards(ツイッターカード)」に対応させる方法について紹介します

この記事にたどり着いた方は既にご存知かもしれませんが、Twitter CardsとはTwitterにのタイムラインに流れてくる大きく画像の表示されたURLのリンクのことです。視覚イメージでTwitterユーザーの注意を引くことができるため、ユーザーをTwitterからブログへの誘導するのに一定の効果があります。

ブログサービスの中には、はてなブログのように既にこのTwitterカードに対応しているものもあれば、Bloggerのように初期状態では対応していないものもあります

今回はBloggerをTwitterカードに対応させる方法を紹介します。

BloggerのURLをTwitterカードに対応させる方法

まず、Twitterのデベロッパーサイトを開きます。英語で表示されて驚く人もいるかもしれませんが、画面上で日本語に切り替えることができるので安心してください。

Twitterカードの説明が詳しく表示されています。全部で7種類のカードデザインの概要と設定方法が表示されているので、おすすめは「カードタイプ」です。

カードのデザインはWEBサイトの用途にもよりますが、「大きな画像付きのSummaryカード」を選択すると良いでしょう。

上記の画面の後方にHTMLに挿入するサンプルコードがあるので、これをHTMl のheadタグの直後に挿入し、サイトを更新しましょう。

最後にサイトから任意のページを選美、URLを検証ツール(Card validator)に貼り付けてプレビューを表示させてみましょう。

成功すれば完了です!

 

BloggerにTwitterカードを設定するときの注意点

基本的な操作はこれだけなので、WEBサイトによっては非常に簡単に設定することができます。ただし、Bloggerの場合Googleの特殊なHTMLを使用しているため、設定には一部注意が必要な点があります。

ここからは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サイトの魅力を発信してみてください。

ABOUT ME
@uru_
@uru_
日常生活と科学をむすぶ、学びのデザイナー。教育/科学/趣味について発信します。■お仕事:科学館の企画・広報←小中高の理科教員 ■関心:科学教育/理科教育/学習科学 ■趣味:バイク(レブル250)/キャンプ/DIY。旅と読書と富士山、新しいモノゴトが好き。アニメから染まりやすい人。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください