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

コンテンツが似ているのに、他のツイートよりもクリック数がはるかに多いツイートがあるのはなぜか疑問に思ったことはありませんか？その秘密は、共有されたときにコンテンツがどのように表示されるかにあります。プレーンテキストのツイートはスルーされがちですが、目を引くプレビュー付きのツイートは注目を集め、クリックを促進します。

WPBeginnerでは、ツイートの外観を制御し、エンゲージメントを高めるために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を追加する（推奨）
2. WordPressにTwitter Cardsを追加する（コード方法）
3. Twitter Cardsのテストと検証
4. よくある質問
5. WordPressでTwitterを使用するための専門家ガイド

方法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カードを追加する（コード方法）

この方法では、テーマまたは子テーマファイルにコードを追加する必要があります。header.phpファイルを開くか、WPCode無料プラグインを使用して、</head>タグの直前にこのカスタムコードを追加します。

<?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.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

大きな画像付きの概要カードを表示したい場合は、14行目の「twitter:card」の値を「summary_large_image」に変更できます。

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

Twitter Cardsのテストと検証

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

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

カードバリデーターはツイートのプレビューを表示しなくなりましたが、Twitterカードが正常に読み込まれたかどうかを示すログは表示されます。

よくある質問

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

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

Twitterカードは、サイトにメタタグを正しく実装すれば自動的に機能するはずです。ただし、Twitterがカードを認識して表示を開始するまでには時間がかかる場合があります。Twitterのカードバリデーターツールを使用してURLをテストし、Twitterにサイトをクロールするように要求することで、このプロセスをスピードアップできます。

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でもフォローできます。