SNSで記事URLを投稿したときに、タイトル・サムネイル画像・説明文が表示される「リンクカード」を見たことがあると思います。
これは「Twitterカード（Twitter Cards）」という仕組みです。
現在は X（旧Twitter）へ名称変更されていますが、技術仕様としては今でも「Twitterカード」という名称が使われています。
この記事では、XのTwitter Cards（ツイッターカード）とは、そして設定方法まで解説しています。知っていながらまだ設定されていない方も多いと思うので、設定してみてください。
目次
Twitter Cardsとは
Twitter Cardsとは、X（旧Twitter）でリンクをシェアするときに、リンク先の情報を綺麗なプレビューカードとして表示する仕組みです。Twitter Cardsを設定すると、ウェブページの画像やタイトル・説明文等を、通常のツイートよりも目立たせることができます。
不動産ポータルサイトが作れるWordPressテーマを作りました。レインズのように自社サイトに物件掲載ができます。
https://t.co/nw5cpOpYJJ— WordPressテーマTCD (@tcd_jp)
February 7, 2025
一方、次の画像は、Twitter Cardsが設定されていない例です。
設定の有無でかなり印象が変わりますね。しっかりとユーザーの目に留まるように、ぜひTwitter Cardsを設定しておきましょう。
Twitter Cardsの設定に必要なOGP
Twitter Cardsを設定するにあたり、2種類のOGPが必要です。
1. SNSサービス共通のOGP
OGPは、ウェブページの情報をシェアするときに使われる専用のコードです。ウェブページのタイトルや説明、そして表示したい画像を設定できます。
これにより、FacebookやXなどのソーシャルメディアでそのページを共有するときに、きれいなプレビューカードが表示されるようになります。
代表的なOGPのmetaタグを紹介します。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:url" content="ページのURL">2. Twitter Cards表示用のOGP
SNSサービス共通のOGP設定の他に、X固有の設定ができる、Twitter Cards表示用のOGP設定もあります。設定をすると、X上でより目立たせることができます。
代表的なTwitter Cards表示用のOGP設定を紹介します。
「Twitter Cards」のカードの種類
<meta name="twitter:card" content="summary">表示したいカードの種類を記載します。サマリーカードの場合は”summary“、大型画像付きサマリーカードの場合は”summary_large_image”と指定します。
Xのユーザー名
<meta name="twitter:site" content="@ユーザー名">Webサイトを使用しているXのユーザー名を指定します。Xのユーザー名は、ご自身のアカウントIDをご記入ください。
Twitter Cardsの設定方法
Twitter Cardsの設定方法は以下の3つです。いずれか1つの方法で設定できます。お好みの方法で設定してみてください。
1. HTMLでmetaタグを挿入する
2. TCDテーマの機能を利用する
3. プラグインを利用する
1. HTMLでmetaタグを挿入する
タグ内にOGP用のmetaタグを挿入することで、Twitter Cardsの設定ができます。
あくまで一例となりますが、SNSサービス共通のOGP設定と、Twitter Cards表示用のOGP設定をあわせたmetaタグはこちらです。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:url" content="ページのURL">
<meta name="twitter:site" content="@Xのユーザー名">
<meta name="twitter:card" content="summary">2.TCDテーマの機能を利用する
TCDテーマのFacebook OGP/Twitter Cards設定機能では、テーマオプションからXアカウント名を設定するだけで、OGP設定が簡単にできます。
記事やホームページがSNSで紹介された際に、ページのタイトルや画像や説明文を正しく伝えるために必要な設定が「OGP」。TCDテーマには、OGPを設定できるオプションが内蔵されています。 とても便利な機能なのでぜひ使ってほしいところですが、やり方がわからない方のために使い方を解説します。 ...
3. プラグインを利用する
「All in One SEO」や「Yoast SEO」などのプラグインを利用して、OGP設定をする方法もございます。
なお、プラグインの設定により、meta descriptionタグなどのタグの重複が発生する場合があります。TCDテーマでプラグインの設定を優先したい場合は、下記記事を参考にカスタマイズをお願いします。
Q.「All in one SEO pack」を使うとメタタグが重複する？記事ごとににmetaタグ、metaディスクリプションを設定する機能がありますが、プラグインの「All in one SEO pack」を入れると、それらは重複しま...
Twitter Cardsの動作を確認する方法
Twitter Cardsの設定が完了したら、専用のサイトを利用して動作を確認します。
サイトのURLを入力するだけで、Twitter Cardsの設定が出来ているかを確認できるサイトがあります。
いずれのサイトでも、URLを入力するだけで、設定されているOGPの項目が一覧で表示されます。
OGPの項目一覧が表示されている例
従来は公式の確認ツールとして使えた「Card Validator（https://cards-dev.twitter.com/validator）」は、
現在ログイン画面へ遷移するのみで、プレビュー機能は利用できない状態です。
Twitter Cardsの確認は、上記のようなサイトで行うといいでしょう。
参考：X公式アナウンス（Card Validatorのプレビュー機能終了）
OGP設定が更新されない場合
キャッシュの影響で、OGP設定を更新しても反映されない場合があります。各SNSがURLごとにOGP情報をキャッシュしているためです。
キャッシュが残っている間は、過去の情報をもとにプレビューやカードが表示されるので、最新のOGPが反映されるまで、キャッシュの更新を待つ必要があります。
SNSサービス上のキャッシュについて、こちらの記事でも紹介しております。
SNSマーケティングは、個人だけでなく企業でも一般的になっています。 しかし、Webページをシェアした際に表示されるOGP画像やタイトルが更新されず、古いまま表示されてしまうケースもあります。 そこで今回は、OGPが更新・反映されない原因と対策についてご紹介します。 ...
XのOGP画像の更新方法
以前はCard Validatorを使ってOGPのキャッシュ更新ができましたが、先述のとおり、現在はCard Validator自体が利用できません。
Twitter Cards内で参照される画像は、URLに基づいてキャッシュされるので、次のようにURLを変える方法が効果的です。
- OGP画像のURLにパラメータを追加する（例：?v=2 など）
- OGP画像そのもののURLを変更する
どちらも別の画像として認識させる方法になります。
まとめ
Twitter Cardsは、WebページのURLをXに投稿したときに、リンクをリッチ表示させる仕組みです。
2種類のOGPをWordPressサイトに設定して、タイトルやサムネイル画像をSNS上に表示させましょう。
以下はXのポストの取り扱いに関する関連記事です。よろしければ併せてどうぞ。
WordPressテーマ集
