Twitter Cardとは
auです。
Twitterでシェアされた際に表示される、Twitter Cardを設定しました。
どんな変化がるのかみてみようと思います。
Twitter Cardとは
Twitterでシェアされた際に、画像とタイトルが表示されると思います。それを変更するのがこのTwitter Cardです。
HTMLのheadに設定することで利用することができます。
Webサイトをシェアした場合に、どんな表示になるかは以下のサイトを使えばわかります。
Twitterが出してるテストをするためのページですね。URLを入力するだけで利用することができます。(ログインする必要があるみたいです)
cards-dev.twitter.com
このように使うみたいです。
<meta name="twitter:card" content="ここにカードを設定する" /> <!-- ここはOGPの設定です --> <meta property="og:title" content="タイトル"> <meta property="og:type" content="website or blog or article"> <meta property="og:description" content="ページの説明"> <meta property="og:url" content="ページのURL"> <meta property="og:site_name" content="サイトの名前"> <meta property="og:image" content="サムネイル画像のURL>
また、利用する際にはOGPも同時に設定する必要があります。あくまでTwitter CardはTwitter上での表示の仕方であり、中身の内容は別で設定する必要があります。
OGPの方はこちらでまとめています。
program-shoshinsya.hatenablog.com
何も設定しない場合
恐らく、「summary_card」が設定されますね。
横長の表示ですね。よくみます。
summary_large_imageを設定した場合
headに以下の要素を追加します。
<!-- Twitter cards --> <meta name="twitter:card" content="summary_large_image" />
表示のされ方はこっちの方が合ってそうですね。
app_card, player_card
この二つは少し特殊かもしれません。
App Card: アプリダウンロード先へのリンク
Player Card: 動画のためのTwitter Card
Webサイトによっては使うかもしれませんが、通常ではあまり使わないと思います。
使い方は他のサイトを見てみてください！
