WordPressにTwitterカードを追加する方法：初心者ガイド

ツイートの中には、大きな画像で目を引くものもあれば、単につまらないプレーンテキストのように見えるものもあることに気づいたことはありませんか？投稿に一生懸命取り組んだのに、視覚的な魅力がないためにフィードの中で見失ってしまうのはフラストレーションがたまります。

WPBeginnerでは、X（Twitter）でのコンテンツの表示方法を制御するためにTwitterカードを使用しています。このシンプルなツールは、追加の作業なしで注目を集め、クリック数を増やすのに役立ちます。

良いニュースは、これを設定するために技術的な達人である必要はないということです。このガイドでは、WordPressにTwitterカードを簡単に追加して、リンクが常に素晴らしい見た目になるようにする方法を説明します。

WordPressでTwitterカードを使用する理由

Twitterカードを使用すると、ツイートにタイトル、概要、画像、ビデオまたはオーディオファイルを追加できます。これにより、より多くのクリックやリツイートを獲得できる可能性が高まります。

ライブ例は、XのWPBeginnerページにアクセスしてご覧いただけます。

Twitterカードの最大の利点は、コンテンツの帰属表示を通じてXアカウントのフォロワー数を増やすことができることです。多くの場合、人々は適切なクレジットなしにあなたのリンクをツイートします。

例えば、@syedbalkhiが@wpbeginnerの投稿を帰属表示なしでリツイートし、他の人が@syedbalkhiをリツイートしたとします。すると、それらのリツイートを見ているユーザーは、@wpbeginnerよりも@syedbalkhiをフォローする可能性が高くなります。

コンテンツキュレーターは、ツイートの長さを短く保ち、自分自身のツイートのリツイートを確実にするために、しばしばこれを行います。

Twitter Cardsを使用すると、ツイートであなたの記事に言及するたびに、あなたのWordPressウェブサイトにクレジットが付与されるため、この問題は解決されます。

Twitter Cardsの利点がわかったところで、WordPressでそれらを実装する方法を見てみましょう。2つの方法をカバーし、Twitter Cardsのテストと検証方法を示します。

方法1：AIOSEOプラグインを使用してTwitter Cardsを追加する（推奨）

ウェブサイトにTwitter Cardsを追加する最も簡単な方法は、WordPress用のAll in One SEO (AIOSEO)プラグインを使用することです。これは最高のWordPress SEOプラグインであり、300万以上のウェブサイトで使用されています。

まず、AIOSEOプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップチュートリアルをご覧ください。

WordPressウェブサイトでTwitter Cardsを設定する機能を提供しているため、AIOSEOの無料版を使用できます。

プラグインが有効になったら、WordPress管理エリアに移動し、**All in One SEO » Social Networks**に移動します。次に、「X (Twitter)」タブをクリックし、「Enable X Card」オプションが有効になっていることを確認してください。

Twitterカードを有効にすると、さまざまな設定を使用してその外観を変更できます。

AIOSEOでは、コンテンツのデフォルトカードタイプを選択できます。プラグインはデフォルトのカードタイプとして「概要」を設定します。これは、コンテンツのタイトル、概要、サムネイル画像を表示します。

ただし、ドロップダウンメニューから「大きな画像付き概要」に変更すると、Twitterはツイートを大きな画像で表示します。

その後、デフォルトの投稿画像ソースを選択する必要があります。これは、Twitterカードに表示したい画像です。

ドロップダウンメニューから選択できるさまざまなオプションがあります。たとえば、X (Twitter)カードに表示されるデフォルト画像をアップロードまたは選択したり、アイキャッチ画像、添付画像、コンテンツ内の最初の画像などを選択したりできます。

次に、コンテンツに画像がない場合のバックアップとして使用されるデフォルトの投稿X画像を追加します。

例えば、投稿画像のソースがアイキャッチ画像であるにもかかわらず、投稿にアイキャッチ画像がない場合、Xはデフォルト画像を使用します。

それとは別に、AIOSEOは投稿の著者や記事を読むのにかかる時間などの追加データを表示するオプションも提供しています。

デフォルトのターム画像ソースを設定するオプションもありますが、この機能を使用するにはAIOSEO Pro以上のライセンスが必要です。

次に、下にスクロールすると、Twitterのホームページ設定が表示されます。プラグインは、ホームページがTwitterカードでどのように表示されるかのプレビューを表示します。

このセクションでは、カードタイプを変更し、ホームページ画像を追加できます。

これは、先ほど示した手順に似ていますが、これらの設定はホームページ用であるという点が異なります。

次に、Twitterカードに表示されるホームページのタイトルと説明を入力します。

それが完了したら、「変更を保存」ボタンをクリックします。

それとは別に、AIOSEOでは個々の投稿やページのX（Twitter）カード設定を変更することもできます。

これを行うには、任意のブログ投稿またはページを編集し、コンテンツエディターのAIOSEO設定までスクロールダウンします。次に、「ソーシャル」タブをクリックし、「X（Twitter）」を選択します。

プラグインは、投稿のXカードのプレビューを表示し、Facebookタブのデータを使用するオプションを提供します。また、Xのタイトルと説明を編集することもできます。

新しいタイトルと説明を記述するか、スマートタグを使用できます。例えば、Twitterタイトルフィールドの上に「+投稿タイトル」タグを使用すると、AIOSEOは自動的にTwitterカードに投稿のタイトルを使用します。

その後、下にスクロールして、Twitterカードの「画像ソース」を選択します。ドロップダウンメニューを使用して、投稿に表示したい画像（アイキャッチ画像、添付画像、コンテンツ内の最初の画像など）を選択します。

最後に、ドロップダウンメニューから「Twitterカードタイプ」を選択できます。デフォルトでは、AIOSEOはこれを「概要」に設定しますが、「大きな画像付き概要」に変更することもできます。

次に、ブログ投稿を更新または公開します。これで、WordPressウェブサイトにTwitterカードを正常に追加できました。

方法2：WordPressでTwitterカードを追加する（コード方法）

この方法では、WordPressテーマファイルにコードを追加する必要があります。ファイルを直接編集することは推奨しません。なぜなら、わずかな間違いでもサイトが壊れる可能性があるからです。

代わりに、コードを追加する最も安全な方法は、WPCode無料プラグインを使用することです。設定手順については、WordPressにカスタムコードを簡単に追加する方法のガイドに従ってください。

WPCodeがアクティブになったら、以下のカスタムPHPスニペットを追加します。

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
  $twitter_title  = get_the_title();
  $twitter_desc   = get_the_excerpt();
  $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
  $twitter_thumb  = $twitter_thumbs[0];
  if(!$twitter_thumb) {
    $twitter_thumb = 'http://www.example.com/default-image.png';
  }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" content="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" content="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" content="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" content="@YourSiteHandle" />
<?php
  if($twitter_name) {
?>
<meta name="twitter:creator" content="@<?php echo $twitter_name; ?>" />
<?php
  }
}
?>

@YourSiteHandleを実際のX（Twitter）のユーザー名に置き換える必要があります。また、$twitter_thumb行のURLを、ご自身のデフォルトのフォールバック画像のリンクに置き換えてください。

デフォルトではカードタイプをsummary_large_imageに設定しています。これはパフォーマンスが良いからです。ただし、小さい画像がお好みであれば、14行目をsummaryに変更できます。

PHPの操作方法がわからない場合や、方法2で問題が発生している場合は、方法1を使用してください。

Twitter Cardsのテストと検証

WordPressサイトからのリンクにTwitterカードが表示される前に、まずTwitterカードバリデーターで確認する必要があります。

Twitter開発者ウェブサイトのカードバリデーターページにアクセスします。WordPressサイトのいずれかの投稿のURLを入力し、「カードのプレビュー」ボタンをクリックします。

カードバリデーターはツイートのビジュアルプレビューを表示しなくなりました。ただし、キャッシュのクリアには引き続き非常に役立ちます。

投稿の画像や説明を更新しても、Xに古いバージョンが表示される場合は、URLをバリデーターに入力すると、Xは最新のデータをすぐに取得するようになります。

よくある質問

WordPressサイトにTwitterカードを追加する基本的な方法については説明しましたが、まだいくつかの疑問があるかもしれません。以下に、Twitterカードとその実装に関してよく寄せられる質問とその回答をまとめました。

1. WordPressサイトに追加したら、Twitterカードは自動的に機能しますか？

メタタグを正しく実装すれば、Twitterカードは自動的に機能するはずです。ただし、X（Twitter）が古い情報をキャッシュしている可能性があります。カードがすぐに表示されない場合は、URLをカードバリデーターに通してキャッシュをクリアしてください。

2. SummaryとSummary with Large ImageのTwitterカードの違いは何ですか？

主な違いは、画像サイズとレイアウトです。サマリーカードはツイートの左側に小さなサムネイル画像を表示しますが、Large Image付きサマリーカードはテキストの上に大きく目立つ画像を表示します。大きな画像カードはエンゲージメントが高くなる傾向がありますが、タイムライン上でより多くのスペースを占有します。

3. サイトのページごとに異なるTwitterカードタイプを使用できますか？

はい、ページごとに異なるTwitterカードタイプを絶対に使用できます。All in One SEO (AIOSEO)のようなほとんどのSEOプラグインでは、個々の投稿やページごとに特定のTwitterカード設定を行うことができます。これにより、各コンテンツに最適なカードタイプを選択する柔軟性が得られます。

4. コンテンツを共有してもTwitterカードが表示されないのはなぜですか？

Twitterカードが表示されない理由はいくつかあります。メタタグが正しく実装されていない、Twitterがまだサイトをクロールしていない、カードマークアップにエラーがある、または画像がTwitterの要件を満たしていないなどです。Twitterのカードバリデーターを使用してトラブルシューティングを行い、問題を特定してください。

5. Twitterカードを使用する前に、Twitterに承認してもらう必要がありますか？

いいえ、TwitterはTwitterカードの承認を必要としなくなりました。カードが正しく実装され、Twitterのガイドラインに従っていれば、コンテンツが共有されたときに自動的に表示されるはずです。

6. Twitterカードにはどの画像サイズが最適ですか？

サマリーカードの場合、少なくとも144×144ピクセル（正方形のフォーマットが適しています）の画像を使用してください。Large Image付きサマリーカードの場合、アスペクト比1.91:1で少なくとも300×157ピクセルの画像を使用してください。画像の最大ファイルサイズは5MBで、TwitterはJPG、PNG、WebP、GIF形式をサポートしています。

WordPressでのTwitter利用に関する追加リソース

この記事がWordPressにTwitterカードを追加するのに役立ったことを願っています。WordPressでX（Twitter）を使用することに関連する他のガイドも参照したい場合があります。

• WordPressで新しい投稿を公開したときに自動的にツイートする方法
• WordPressにTwitter共有・リツイートボタンを追加する方法
• WordPressブログ投稿に実際のツイートを埋め込む方法
• WordPressで壊れたTwitterカード画像を修正する方法
• プロフィールページに著者のTwitterとFacebookを表示する方法
• WordPress向けの最高のTwitterプラグイン（比較）
• WordPressで最近のツイートを表示する方法（ステップバイステップ）
• WordPressにソーシャルメディアフィードを追加する方法（ステップバイステップ）

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。