Twitterカードとシェアボタン

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

---

Twitter カード

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

meta タグの設置

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

<meta name="twitter:card" content="summary" /> 

を設定すると、Twitter カードが有効になり、それ以下の property の内容が表示されるようなります。property の内容は想像がつくと思いますので説明は省略します。

twitter:card

の

content

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

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

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

検証方法

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

• Card validator | Twitter Developers

Twitter のシェアボタン

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

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

• Twitter Publish

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

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

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

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

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