Twitter Cards（ツイッターカード）を設置する方法

こちらの記事では、Twitter Cards（ツイッターカード）を設置する方法をご紹介します。知っていながらまだ設定されていない方も多いのではないでしょうか？意外と簡単に設定できますので今回の記事を参考に設定してみてください。

Twitter Cardsとは

Twitter Cardsとは、Twitter（X）でリンクをシェアするときに、リンク先の情報を綺麗なプレビューカードとして表示する仕組みです。Twitter Cardsを設定すると、ウェブページの画像やタイトル・説明文等を、通常のツイートよりも目立たせることができます。

新しいWordPressテーマをリリースしました。

今回は企業様の求人採用サイト！https://t.co/GFM5Mg1msp

— WordPressテーマTCD (@tcd_jp) March 28, 2024

一方、次の画像は、Twitter Cardsが設定されていない例です。

設定の有無でかなり印象が変わりますね。タイムラインに流れてきた時の目立ち方が雲泥の差です。しっかりとユーザーの目に留まるように、ぜひTwitter Cardsを設定しておきましょう。

Twitter Cardsの設定に必要なOGP

Twitter Cardsを設定するにあたり

1. SNSサービス共通のOGP
2. Twitter Cards表示用のOGP

の二種類のOGPが必要です。

1. SNSサービス共通のOGP

OGPは、ウェブページの情報をシェアするときに使われる専用のコードです。ウェブページのタイトルや説明、そして表示したい画像を設定できます。

これにより、FacebookやTwitter（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設定の他に、Twitter（X）固有の設定ができる、Twitter Cards表示用のOGP設定もあります。設定をすると、Twitter（X）上でより目立たせることができます。

代表的なTwitter Cards表示用のOGP設定を紹介します。

「Twitter Cards」のカードの種類

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

表示したいカードの種類を記載します。サマリーカードの場合は”summary“、大型画像付きサマリーカードの場合は”summary_large_image”と指定します。

Twitter（X）のユーザー名

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

Webサイトを使用しているTwitter（X）のユーザー名を指定します。Twitter（X）のユーザー名は、ご自身のアカウントIDをご記入ください。

Twitter Cardsの設定方法

こちらでは、Twitter Cardsの設定方法を説明します。Twitter Cardsの設置するには、以下の方法があります。

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="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">

2.TCDテーマの機能を利用する

TCDテーマのFacebook OGP/Twitter Cards設定機能では、テーマオプションからTwitter（X）アカウント名を設定するだけで、OGP設定が簡単にできます。

3. プラグインを利用する

「All in One SEO」や「Yoast SEO」などのプラグインを利用して、OGP設定をする方法もございます。

なお、プラグインの設定により、meta descriptionタグなどのタグの重複が発生する場合があります。

弊社テーマにおいてプラグインの設定を優先したい場合は、下記記事を参考にカスタマイズをお願いします。

Twitter Cardsの動作の確認

Twitter Cardsの設定が出来ましたら、専用のサイトを利用して動作の確認をします。

1. OGP確認サイトを利用する
2. 公式のCard validatorを利用する

1. OGP確認サイトを利用する

サイトのURLを入力するだけで、Twitter Cardsの設定が出来ているかを確認できるサイトがあります。

• OGPチェッカー | Web ToolBox
• OGP確認ツール – Analyze OGP and Twitter Cards

Web ToolBoxのOGPチェッカーを利用した場合、サイトにURLを入力すると、設定されているOGPの項目が一覧で表示されます。

2. 公式のCard validatorを利用する

Twitter（X）の公式サイトで公開しているCard validatorを使って、Twitter Cardsの動作の確認もできます。

Card validator

OGP設定が更新されない場合

キャッシュの影響で、OGP設定を更新しても反映されない場合があります。

SNSでURLを共有すると、各SNSサービスでOGP設定に関するキャッシュが作成され、キャッシュ情報を元に、Twitter Cardsなどのプレビューカードが作成される仕組みです。

OGP設定を更新したい場合は、SNSサービス上のキャッシュを削除するか、キャッシュが削除されるまで放置する必要があります。

公式からのアナウンスによると、Twitter上でのOGP画像のキャッシュは最大7日残ると記載されています。
公式サイト：Card Validator – preview removal

SNSサービス上のキャッシュについて、こちらの記事でも紹介しております。

Twitter（X）サービス上でのOGP画像の更新方法

以前は、Card Validatorにてキャッシュクリアが可能でしたが、現在はTwitter（X）の仕様変更により、キャッシュのクリアができなくなりました。

現在、公式サイトにてTwitter Cardsのキャッシュをクリアする方法が記載されています。
公式サイト：Refreshing a Card in a Tweet

Twitter Cards内で参照される画像は、URLに基づいてキャッシュされる仕様になるため、

• OGP画像のURLにパラメータを加える
• OGP画像のURLを変更する

などの対策を取ることで、OGP画像が再取得され、反映されやすくなると記載されています。

まとめ

Twitter Cardsの設定方法についてカスタマイズでの設定方法を紹介しました。Twitter Cardsの設定をすることで、視覚的なわかりやすさでユーザーにインパクトを与えられます。SNS上で拡散される場合には、OGP設定と合わせてTwitter Cardsの設定も必須でしょう。