ウェブサイトにツイッターカード(Twitter Cards)を設定する

本日はウェブサイトにツイッターカード(Twitter Cards)を設定してみたいと思います。

ツイッターカードとは、ツイートしたときのつぶやきの下に表示される画像とかビデオリンクとかのことです。

こんな↓ヤツですね。

ツイッター・カードの表示例(ツイッター・カードに該当するところが赤枠で囲われている)

ウェブサイト上でこのツイッターカードの設定をしておくと、そのリンクを含むツイートがされたときに指定の文章や画像が一緒に表示されるようになります。

OGPとは別に設定できます(Twitter Cardsの記述が優先される)ので、ツイッターのオーディエンスが他の媒体と異なる場合に記事の紹介分を変更したり、表示する画像を変えたりすることができます。

ツイッターカードの設定方法

カードをウェブサイトに追加する方法はいたって簡単です。

基本的にはTwitter公式サイトを参照すれば良いのですが、備忘録も兼ねて以下に一通り書いてみたいと思います。

カードの種類を選択する

公式サイトの手順に従って(笑)、まずはカードの種類を選択します。

時点では、選べるカードは以下の7つ(実質5種類ですが理由は後述します)です。それぞれ強調するポイントが違うので、実装したいウェブページやサービスの特性によって選ぶのが良いかと思います。

  • Summaryカード
    もっとも一般的なカードです。リンク先のページタイトルや説明文、サムネイル画像、ツイッターのアカウント情報を含めることができます。

  • 大きな画像のSummaryカード
    基本的にSummaryカードと変わりませんが、画像がツイートの横幅いっぱいに表示されます。指定できる画像の大きさや容量はSummaryカードと同じです。

  • Photoカード
    こちらのカードはに廃止されました。恐らく選択自体は可能だと思いますが、指定しても上記「大きな画像のSummaryカード」として表示されるようです。

  • Galleryカード
    こちらのカードもPhotoカード同様、に廃止され、「大きな画像のSummaryカード」に統合されています。「ギャラリー」という名の通り、元々は複数画像を表示するために用いられていましたが、統合により一枚しか表示できなくなっているため、わざわざ指定する意味はないでしょう。

  • Appカード
    アプリ宣伝用のカードで、アプリの概要やダウンロードリンクを表示することができます。ユーザーのOSによって表示内容を変更することが可能です。例えば、iPadやiPhoneなどのiOS搭載機ではApp Storeの、Android端末ではGoogle Playのダウンロードページを指定することが可能です。ちなみにそれぞれのOSで提供されているTwitter公式アプリ内でも表示されます。

  • Playerカード
    音声(音楽)または映像メディアをツイート上で再生することができるカードです。ただ、実際に表示するためには事前審査が必要みたいですので、手間は掛かるかもしれません。

  • Productカード
    商品やサービスの表示に適したカードですが、こちらもに廃止されています。ただ、Summaryカードに統合されていますので、機能自体は生きています。

ウェブページにコードを記述する

表示したいカードが決まったら、次は表示用のタグをページに書いていきます。

ただ、特定のカードに決めたからといって、そのカードしか指定できない訳ではないです。ページの内容に応じて、適したカードを表示するよう設定していきましょう。

今回は基本中の基本であるSummaryカードを設定します。

実装方法は簡単で、ヘッダータグの中に下記のようなコードをほんの数行追加するだけです。各タグの詳細やここで記述されていない種類のタグについては、公式ページをご参照ください。


<meta name="twitter:card" content="summary" /><!-- カード種別の選択 -->
<meta name="twitter:site" content="@ツイッターのアカウント名" />
<meta name="twitter:title" content="ページの表題" />
<meta name="twitter:description" content="ページの簡潔な内容" />
<meta name="twitter:image" content="表示したい画像のURL" />
<meta name="twitter:url" content="ページのURL" />

すべてのページに上記のコードを記述しても良いのですが、WordPressなどであればヘッダーの中に書いておけば書き漏れがありません。その場合はTwitter Cardsの部分だけ別ファイルとして切り出して、ループ内でWordPress関数を呼び出していく感じになると思いますが、こちらについては後日OGPの記事を書きますので、その時にまとめて説明したいと思います。

表示確認を行う

ページにコードを記述したら、ちゃんと表示ができるか確認を行います。

実際に当該ページを含んだツイートをするという手もありますが、公式ページに検証用のツールが置いてあるので、こちらを利用しましょう。

公式ページの手順では、検証を行った後、承認を受けるようなことが書いてあるのですが、私は特にそのような手順を踏まなくても表示することができました。

ツイッター・カードのプレビュー画面

検証時に表示される「*.ドメイン名 is whitelisted for summary card」なるメッセージを見る限り、ドメインがブラックリストに登録されているような場合に手順が必要となるのではないかと思います。もしかしたらブログサービスとかオールドドメインとかを使っている場合は、他の人や以前利用していた人がやらかしちゃっているかもしれませんので、承認が必要となる可能性があります。今後、確認する機会がありましたら、別記事でアップしたいと思います。

手順は以上です。

これでつぶやきにカードが表示されるようになります。

ウェブサイトのレイアウトを考える

ウェブサイトを作成するにあたっては、事前に様々な事柄を考えておく必要があります。

基本的なところでは、ウェブサイトのタイトルやURLなど、公開以前に設定が必須となるものもありますし、そもそも何を書くのか、という動機的なものもあるでしょう。また、企業など営利目的でウェブサイトを運営する主体は、(お金が余っている場合は別として)誰をターゲットにどのようなメッセージを送るのかをあらかじめ決めておかなかればいけません。

このサイトは以前書いたように完全な見切り発車で立ち上げてしまった訳なのですが、それでも一応タイトルやURL、ホームページを運営する目的や書く内容などはある程度事前に考えています。

そこで本日は、これらの情報を読み手に効果的に伝える手段の一つであるウェブサイトのレイアウトについて考えてみたいと思います。

レイアウトとは何か

ところでレイアウトとは何でしょうか?

本題に入る前にインターネット上の百科事典であるWikipediaの定義を参照してみましょう。

レイアウト(英語: layout, lay-out)とは、デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。

要は配置のことですが、強調するならばどこに何をどのように置くかといったところでしょうか。新聞や展示などは様々な種類の情報やものが対象となりますが、ウェブサイトの場合は記事やメニュー、サイドバーやウィジェットなどもうちょっと限定されていますよね。そうすると読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるかと言えるのではないでしょうか。

どのようにレイアウトするか

それでは、一体どのように配置するのが適切なのでしょうか。

ネット上に数多あるウェブページを見ても、正解を一つに絞るのは難しそうです。ブログサービスなどでは、デザインの設定画面で「左カラム(左サイドバー)」か「右カラム(右サイドバー)」か、あるいは「両カラム(左右サイドバー)」かを選ぶところがありますが、最大公約数的にはこのあたりが妥当なところなのかもしれません。どれを選択するかは、つまるところ(外観も含めた)目的に応じて自然に決まってくるものなのでしょう。

では、目的とレイアウトの関係とはどのようなものでしょうか。「読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるか」という観点からすると、まずは読んでもらうことを目的に据えたいところですが、世の中にはその枠に収まらないウェブサイトもあります。

例えば、SEO目的のサイトです。今は検索エンジンが対策を取ったため、それほどでもなくなりましたが、一昔前は特定のキーワードの検索結果で上位表示させるために、当該キーワードを羅列したり、上位表示させたいサイトへのリンクを貼っただけで内容がないウェブサイトなどがありました。その時はクローラー(検索エンジンがウェブサイトの分析に使うプログラム)の動きを意識して、左にキーワードを並べた記事、右にサイドバーを配した右カラムが優位なんてことも言われていました。私も昔Webマーケティングの仕事をやっていた時に「クローラーは上にあるキーワードの方が重要だと考える」と教わりましたが、サイドバーの位置なんてCSSで変えられるので、あんまり意味はないんじゃないかと思っています。実際のところは分かりませんが…

また、これもSEOと関係があるのですが、バナー広告だらけのページもありますね。あれも特定のキーワードの検索結果で上位表示させて、とにかく人を集めて一つでも多くクリックしてもらうのが目的なので、一番目立つところにバナー広告が貼り付けられています。一番といえば、ド真ん中なんでしょうけど、そこまで主張しない場合は、人の目の動きを意識して配置すると効果的らしいです。とはいえ、最近は検索エンジンの方が内容の薄っぺらいページを上位表示しないようになってきているので、左のサイドバーに置くか、記事の上の方にさり気なく貼り付けたりしているのが多いように見受けられます。

ただ、人間の目の動きを意識するのは、普通のウェブサイトでも大切なことだと思います。「Zの法則/Fの法則」なんていうのがありますが、うまく活用すれば読みやすさに繋がりそうです。結局のところ、読んでもらってナンボですから。アラビア語とか右から左に読む人にも通用するのか気になるところですが…

で、結局どうするのか?

さて、それで当ウェブサイトのレイアウトはどうなったのか。

現在のところは、ご覧の通り両カラムになっていますが、将来的にこのままにするかはまだ決めていません。一応、ホームページ作成の目的は「自分広告」なので、読んでもらうことが第一なのですが、広告運用とかSNSマーケティングとかもやってみたいというのが本音です。ただ、間違ってクリックさせるようなことはしたくないので(そもそも広告のガイドラインにも抵触すると思いますし)、外部のウェブサイトに移動する場合は、それが分かるようにしたい。そこで暫定的に採用したのが、左サイドバーは記事のカテゴリーやタグなどを中心とした内部リンク、右サイドバーはSNSのウィジェットやバナー広告などの外部リンクという両カラム構成です。

ただ、これも最終解ではなく、右サイドバーが全くクリックされないような状況であれば、改善を図ることになると思います。結局のところ、PDCAサイクルを回しつつ、目的が達成できているか確認していく、というのは最適解なのかもしれません。

見直すことになったら、またその経緯を記事にしていきたいと思います。