WPBeginner Sites»WPBeginner»ブログ»チュートリアル»WordPressでTwitterカードを追加する初心者ガイド

WordPressでTwitterカードを追加する初心者ガイド

By Editorial Staff | Reviewed by Syed Balkhi | 7月 16, 2024 | Reader Disclosure

WordPressサイトをTwitterカードで強化することで、ソーシャルメディアでの存在感とユーザーエンゲージメントを大幅に向上させることができます。Twitterカードは、誰かがあなたのコンテンツをシェアした際にX（旧Twitter）に表示される画像と説明を提供します。

WPBeginnerでは、この機能を使ってツイートの外観をコントロールし、ユーザーとのインタラクションを高めています。また、Twitterカード（またはXカード）を使用することで、私たちのコンテンツが評価されるようになります。

この投稿では、WordPressにTwitterカードを追加して、ツイートを目立たせる方法を紹介します。

Beginners Guide on How to Add Twitter Cards in WordPress

なぜWordPressでTwitterカードを使うのか？

Twitterカードでは、ツイートにタイトル、要約、画像、動画または音声ファイルを追加できます。こうすることで、より多くのクリックやリツイートを獲得できる可能性が高まります。

XのWPBeginnerページでライブ例を見ることができます。

Twitter Cardを持つ最大のメリットは、コンテンツのアトリビューションを通じて、あなたのXアカウントをフォローする人の数を増やすことができることです。しばしば、あなたのリンクをツイートする人は、あなたに適切なクレジットを与えることなくツイートします。

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

多くの場合、コンテンツ・キュレーターはツイートの長さを短く保ち、自分のツイートのリツイートを確保するためにこのようなことをする。

Twitter Cardを使えば、あなたの投稿がツイートされるたびにWordPressサイトにクレジットが入るので、この問題は解決します。

Twitterカードのメリットがわかったところで、WordPressにTwitterカードを実装する方法を見てみましょう。ここでは2つの方法を取り上げ、Twitterカードをテストして正しいかどうかを確認する方法を紹介します：

Using AIOSEO Plugin to Add Twitter Cards (Recommended)
Adding Twitter Cards in WordPress (Code Method)
Test and Validate Your Twitter Cards
Expert Guides on Using Twitter With WordPress

方法1：AIOSEOプラグインを使ってTwitterカードを追加する（推奨）

サイトにTwitterカードを追加する最も簡単な方法は、WordPress用のAll In One SEO（AIOSEO）プラグインを使用することです。WordPressのSEOプラグインとして最も優れており、300万以上のサイトで使用されています。

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

AIOSEOの無料版は、WordPressサイトにTwitterカードを設置する機能を提供していますので、ご利用いただけます。

プラグインを有効化した後、WordPressの管理エリアに移動し、All In One SEO ” ソーシャルネットワークに移動します。次に、「X (Twitter)」タブをクリックし、「Xカードを有効化」オプションが有効になっていることを確認します。

Twitterカードを有効化すると、さまざまな設定を使って外観を変更できます。

AIOSEOでは、コンテンツのカードタイプを初期設定することができます。プラグインは、コンテンツのタイトル、概要、サムネイル画像を表示する「サマリー」を初期カードタイプとして設定します。

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

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

ドロップダウンメニューを使用して、さまざまなオプションを選択することができます。例えば、X（Twitter）カードに表示される初期設定の画像をアップロードまたは選択したり、アイキャッチ画像、添付ファイル、コンテンツの最初の画像などを選択することができます。

この画像は、コンテンツに画像がない場合のバックアップとして使用されます。

例えば、投稿画像のソースがアイキャッチ画像で、投稿にアイキャッチ画像がない場合、Xは初期設定の画像を代わりに使用します。

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

また、この機能を使用するにはAIOSEO Pro以上のライセンスが必要です。

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

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

これは先に紹介した手順と似ているが、異なるのは、これらの設定があなたのホームページのためのものだということだ。

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

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

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

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

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

新規にタイトルと説明を書くことも、スマートタグを使うこともできます。例えば、Twitterタイトル欄の上に’+投稿タイトル’タグを使用すると、AIOSEOは自動的にTwitterカードに投稿タイトルを使用します。

twitter card settings for posts and pages

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

最後に、ドロップダウンメニューからTwitterカードの種類を選択します。初期設定では、AIOSEOは’Summary’に設定しますが、’Summary with Large Image’に変更することができます。

次の投稿を更新または公開します。これで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カードのテストと正しい使い方

WordPressサイトからのリンクがTwitterカードを表示するようになる前に、まずTwitterカードバリデータでチェックする必要があります。

Twitter開発者のサイトにあるCard Validatorのページにアクセスするだけです。WordPressサイトの投稿URLを入力し、「Preview card」ボタンをクリックします。

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

更新：以前は、Twitterカードへの参加を申請する必要がありました。しかし、Twitterは、ドメインをバリデータでテストしたり、TwitterでURLを共有したりすると、自動的にホワイトリストに登録するシステムを導入しました。

WordPressでTwitterを使うためのエキスパートガイド

WordPressにTwitterカードを追加する方法はおわかりいただけたと思いますが、WordPressでTwitterを利用する他のガイドもご覧ください。

この投稿がWordPressにTwitterカードを追加するのにお役に立てば幸いです。WordPressでランディングページを作成する方法や、WordPressのエキスパートが選んだサイトを成長させるための必須プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

WPBeginnerで人気今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源をご覧ください。3$編集プロセスをご覧ください。

について Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

87件のコメント返信を残す

Aramide

You’ve been so awesome in passing great information on WordPress. Your tutorials are so great and are wonderful learning materials. Thanks for always being there for us.

返信
- WPBeginner Support
  
  Goad you’ve found our content helpful
  
  返信
  
  管理者
Dee

Hi! I have a free wordpress.com blog, and I’m not sure how to add twitter cards to that. I don’t know if I can edit the html of my theme without a plugin (if I can, I don’t know how to find the html code) (super new to WP) is there any way to add twitter cards for free

返信
- WPBeginner Support
  
  You would need to reach out to WordPress.com for what they currently have available.
  
  返信
  
  管理者
MStokely

Thank you! It took awhile for this to work I guess because cache needed to be cleared but this is the ONLY solution I found that worked.

返信
- WPBeginner Support
  
  Glad our guide was able to help
  
  返信
  
  管理者
Pierre

Question about this, when I am posting a link from my site on Twitter, the preview image is only showing the Wordpress W logo instead of what I set in Yoast. Is it just a matter of waiting it out or a, I doing something wrong?

返信
- WPBeginner Support
  
  You may want to ensure you’ve cleared any caching on your site for twitter to get the correct image and after that, you would need to wait for Twitter’s cache to clear.
  
  返信
  
  管理者
neo

thanks for the guide, adding Twiter Cards through Yoast was the easies way for me

返信
- WPBeginner Support
  
  Glad our article could help
  
  返信
  
  管理者
MIke

Hey there, very late to this article but am wondering how to amend the php code to produce the large image with summary card.

I’ve given it a shot but not managed it yet. Ideas and advice appreciated.

cheers

返信
Mark Larson

I’m getting this error:

“Notice: Use of undefined constant full – assumed ‘full’ in”

Not sure how to get rid of it.

返信
Ted Bergman

Thanks for this post. When I need to know how to do something on Wordpress I come here first. Your easy to understand instructions are priceless!

返信
Sarah Bridge

I’ve done all the steps using Yoast and validated my url – but there is still no image coming up when I post my URL on Twitter? It said this:

Sarah Bridge
The card for your website will look a little something like this!

and underneath on the right hand side it has the correct words but on the left hand side where an image should be there’s nothing but a grey box with what looks like a grey scroll in it. You can click on it to get to my website but I’d like a image there rather than a grey box. Any thoughts?

返信
Daniela

Have successfully done this in the past. However, it was always when using summary card with large image (which is set as the default in my Yoast settings). Now trying to post summary card (regular, not large image), but Yoast is overriding it to summary card large image. How do I prevent this?

As a note, I’m doing both methods: adding info to Yoast plug in and writing metadata tags in a plug in.

返信
Chinny

This was very helpful! Thanks. Did it and the twitter cards automatically came up even for previous tweets.

返信
Haris

ERROR: Required meta tag missing (twitter:text:description)

Getting this error

返信

« 古いコメント

« 1 2