Twitterカードとシェアボタン

Twitter カードとシェアボタンの設置方法をまとめて紹介します。


Twitter カード

ツイートの中になんかカッコよく画像つきで表示されるあれです。こちらのサイトを参考にさせていただきました。

meta タグの設置

サイトの head タグ何に以下のような meta タグを記述することで対応できます。最低限、以下のものを記述すると良いと思います。

<meta name="twitter:card" content="summary" /> 
を設定すると、Twitter カードが有効になり、それ以下の property の内容が表示されるようなります。property の内容は想像がつくと思いますので説明は省略します。

twitter:card
content
には以下の 4 つが設置できるようです。

表1: TwitterCard の種類
content に指定する文字種類
summarySummary Card
summary_large_imageSummary Card with Large Image
appApp Card (アプリ配布)
playerPlayer Card (動画サイト用)

大抵のサイトで利用するのは、上 2 つかと思います。Summary Card with Large Image の方は、画像が大きく表示されるやつです。

App CardPlayer Card にはもう少し色々な設定ができるようです。

検証方法

meta タグの設置が終わったら、こちらのサイトからうまく表示されるかテストできます。サイトを表示し、テストしたい URL を入力して Preview card をクリックするだけです。

Twitter のシェアボタン

クリックするとリンクを Twitter に投稿するボタンを設置します。こちらのサイトを参考にさせていただきました。

まずは、ボタン生成のサイトを開きます。

こちらのサイトで、シェアボタンやフォローボタンを作成できます。フォローボタンを作りたい場合は、「What would you like to embed?」に Twitter ID を入れます。シェアボタンの場合は空で良いようです。

次に、 [Or browse your options below] - [Twitter Buttons] を選び、ボタンの種類を選択します。これで、ボタンのコードが生成されます。

以下のコードが、シェアボタンで生成したコードです。

あとは、これをサイトの任意の場所に貼れば完成です。コードを貼ると、こんな感じです。

こちらのサイトによると、a タグの属性に諸々設定することで、デフォルトのツイート内容を編集できるようです。