Twitterカードの設定方法


自分が運営しているサイトの記事をTwitterでこんな風にリンクしてみたくないですか?

↑こんな感じに。これはTwitterカードと言い、一言でいうと「画像付きリンク情報」になります。
今から、どうすればTwitterカードを設定できるのか、説明していきます。

Twitterカードとは

Twitterカードとは、設定していない場合は次のようになります。

それに対して Twitter カードが設定されている場合は次のようになります。

やはり、Twitterカードが設定されている方がクリックしたくなりますよね。

Twitterカードの4種類ある

Summary Card
サマリーカードは小さめの画像と記事のタイトルおよび概要を表示できる、Twitterカードです。

Summary Card with Large Image
大きな画像付きサマリーカードは大きめの画像と記事のタイトルおよび概要を表示できる、Twitterカードです。

App Card
アプリ用のカードです。アプリのダウンロードページへのリンクを表示する、Twitterカードが表示されます。アプリ用なので今回は省略します。
Player Card
動画を配信しているサイト向けのTwitterカードです。ツイートに表示されたカード上で動画のダイジェストなどを再生することができます。動画用なので今回は省略します。

metaタグに記載する

<meta name="twitter:card" content="1.カードの種類">
<meta name="twitter:site" content="2.Twitterのユーザー名">
<meta name="twitter:title" content="3.記事のタイトル">
<meta name="twitter:description" content="4.記事の概要">
<meta name="twitter:image" content="5.カードに表示する画像のURL">

1.「カードの種類」には
Summary Card の場合 ⇒ summary
Summary Card with Large Image の場合 ⇒ summary_large_image
を指定します。

2.「Twitter のユーザー名」には
Twitterアカウントのユーザー名を@に続けて入力するだけです

3.「記事のタイトル」には
Twitterカードを設定するページの記事のタイトルを指定します。

4.「記事の概要」には
Twitterカードを設定するページの記事の概要を指定します。文字数に制限はありませんが、定められた文字数以上の値は省略されます。

5.カードに表示する画像のURLには
Twitterカードに表示される画像が設置されているURLを指定します。

最後に

ツイートにurlを記載するだけで、このようになります。

今回の記事を見てくれてありがとうございます。
最後に自分のNewsサイトでも、Twitterカードを使って、記事の宣伝をしているので、もし良かったら見てください。
NewsTweet|Twitterで注目されているニュースが分かる

お世話になったリンク
【2020年版】Twitterカードとは?使い方と設定方法まとめ
Twitterカードの使い方と設定方法