以前、FACEBOOKへのOGPの設定方法を紹介しました。

実はTwitterにも同じようなタグを設定することができます。

以下はTwitterの画像です。

WS000005

「概要を表示」

これは、「Twittercard」というメタタグを<head>~</head>に挿入すると出てきます。

ここをクリックすると、

WS000006

このようにリンク先の概要が表示されます。リンク先に移動しなくても概要を見ることのできるTwitterCardは、ホームページへの流入に効果が高いので、ホームページ更新のお知らせをTwitterで行っている方は必ず実施したほうが良いです。

https://dev.twitter.com/

まず、上記のリンクから、Twitterのアカウントにログインします。

 

WS000002

 

ここは取り敢えず「summary」でOKです。(あとから変更もできますので!)

 

WS000007

カードタイプを選択すると、上のような項目の入力ができます。

試しに入力してみます。

 

WS000004

上のように入力して、「UpdatePreview」をクリックします。

 

Twittercard

すると、Twittercardの表示のサンプルと、Twittercardのメタタグが表示されますので、必要な部分をコピペで、<head>~</head>に挿入すればOKです。各タグはサンプルの数字と対応しています。いろいろ試してみてください!

埋め込んだら、テストしてみましょう。

 

WS000008

先ほど入力した「Try Cards」のとなりのタブに「Validate&Apply」というタブがありますので、そちらでホームページのアドレスを入力して「Go!」をクリック。

試しにこの記事のURLを入力してみます。

ツイッターカード

 

緑のマークがついていれば、ちゃんと読み込んでいます。