WordPressサイトにTwitterカードを追加したいですか？Twitterカードとは、誰かがあなたのコンテンツをシェアした際にTwitter上に表示される画像と説明のことです。
Twitter上で自分のツイートがどのように表示されるかをコントロールしたり、ツイートに自分の名前を自動的に含めることで信用を得たり、ユーザーのエンゲージメントを高めたりするのに役立ちます。
この投稿では、WordPressにTwitterカードを追加して、ツイートを目立たせる方法を紹介します。
なぜWordPressでTwitterカードを使うのか？
Twitterカードでは、ツイートにタイトル、要約、画像、動画または音声ファイルを追加できます。こうすることで、より多くのクリックやリツイートを獲得できる可能性が高まります。
私たちのTwitterページでライブの例を見ることができます。
Twitterカードを持つ最大のメリットは、コンテンツのアトリビューションを通じて、あなたのTwitterアカウントをフォローしてくれる人の数を増やせることです。しばしば、あなたのリンクをツイートする人は、あなたに適切なクレジットを与えずにツイートします。
例えば、@syedbalkhiが@wPBeginnerの投稿を無記名でリツイートし、他の人が@syedbalkhiをリツイートしたとします。すると、それらのリツイートを表示するユーザーは、@wpbeginnerよりも@syedbalkhiをフォローする可能性が高くなる。
多くの場合、コンテンツ・キュレーターはツイートの長さを短く保ち、自分のツイートのリツイートを確保するためにこのようなことをする。
Twitter Cardを使えば、あなたの投稿がツイートされるたびにWordPressサイトにクレジットが入るので、この問題は解決します。
Twitterカードのメリットがわかったところで、WordPressにTwitterカードを実装する方法を見てみましょう。ここでは2つの方法を取り上げ、Twitterカードをテストして正しいかどうかを確認する方法を紹介します：
方法1：AIOSEOプラグインを使ってTwitterカードを追加する（推奨）
サイトにTwitterカードを追加する最も簡単な方法は、WordPress用のAll In One SEO（AIOSEO）プラグインを使用することです。WordPressのSEOプラグインとして最も優れており、300万以上のサイトで使用されています。
まず、AIOSEOプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。
AIOSEOの無料版は、WordPressサイトにTwitterカードを設置する機能を提供していますので、ご利用いただけます。
プラグインを有効化した後、WordPressの管理エリアに移動し、All In One SEO ” ソーシャルネットワークに移動します。次に「Twitter」タブをクリックし、「Twitterカードを有効化」オプションが設定されていることを確認します。
Twitterカードを有効化すると、さまざまな設定を使って外観を変更できます。
AIOSEOでは、コンテンツのカードタイプを初期設定することができます。プラグインは、コンテンツのタイトル、概要、サムネイル画像を表示する「サマリー」を初期カードタイプとして設定します。
しかし、ドロップダウンメニューから「大きな画像で要約」に変更すれば、Twitterはツイートを大きな画像で表示します。
その後、デフォルト投稿画像ソースを選択する必要があります。Twitterカードに表示したい画像です。
ドロップダウンメニューから様々なオプションを選択できます。例えば、Twitterカードに表示される初期設定の画像をアップロードまたは選択したり、アイキャッチ画像、添付ファイル、コンテンツの最初の画像などを選択することができます。
この画像は、コンテンツに画像がない場合のバックアップとして使用されます。
例えば、投稿画像のソースがアイキャッチ画像であるにもかかわらず、投稿にアイキャッチ画像がない場合、Twitterは初期設定の画像を代わりに使用します。
それ以外にも、AIOSEOは投稿者や記事を読むのにかかる時間などの追加データを表示するオプションを提供している。
また、この機能を使用するにはAIOSEO Pro以上のライセンスが必要です。
下にスクロールすると、Twitterのホームページ設定が表示されます。このプラグインは、Twitterカード上であなたのホームページがどのように表示されるかのプレビューを表示します。
このセクションでは、カードタイプの変更とホームページ画像の追加ができます。
これは先に紹介した手順と似ているが、異なるのは、これらの設定があなたのホームページのためのものだということだ。
次に、Twitterカードに表示されるホームページのタイトルと説明を入力します。
それが完了したら、「変更を保存」ボタンをクリックします。
それ以外にも、AIOSEOは個々の投稿やページのTwitterカードの設定を変更することができます。
それを行うには、任意のブログ投稿またはページを編集し、コンテンツエディターのAIOSEO設定までスクロールダウンします。ソーシャル “タブをクリックし、”Twitter “を選択します。
このプラグインは、投稿のTwitterカードのプレビューを表示し、Facebookタブのデータを使用するオプションを提供します。また、Twitterのタイトルと説明を編集することもできます。
新規にタイトルと説明を書くことも、スマートタグを使うこともできます。例えば、Twitterタイトル欄の上に’+投稿タイトル’タグを使用すると、AIOSEOは自動的にTwitterカードに投稿タイトルを使用します。
その後、下にスクロールして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で新規投稿を公開したら自動的にツイートする方法
- WordPressでTwitterのシェアとリツイートボタンを追加する方法
- WordPressブログ投稿に実際のツイートを埋め込む方法
- WordPressで壊れたTwitterカードの画像を修正する方法
- プロフィールページに投稿者のTwitterとFacebookを表示する方法
- WordPress用ベストTwitterプラグイン（比較版）
- WordPressで最近のツイートを表示する方法（ステップバイステップ）
- WordPressにソーシャルメディアのフィードを追加する方法（ステップバイステップ）
この投稿が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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Aramide says
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 says
Goad you’ve found our content helpful
管理者
Dee says
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 says
You would need to reach out to WordPress.com for what they currently have available.
管理者
MStokely says
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 says
Glad our guide was able to help
管理者
Pierre says
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 says
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 says
thanks for the guide, adding Twiter Cards through Yoast was the easies way for me
WPBeginner Support says
Glad our article could help
管理者
MIke says
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 says
I’m getting this error:
“Notice: Use of undefined constant full – assumed ‘full’ in”
Not sure how to get rid of it.
Ted Bergman says
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 says
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 says
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 says
This was very helpful! Thanks. Did it and the twitter cards automatically came up even for previous tweets.
Haris says
ERROR: Required meta tag missing (twitter:text:description)
Getting this error