WordPressサイトをTwitterカードで強化することで、ソーシャルメディアでの存在感とユーザーエンゲージメントを大幅に向上させることができます。Twitterカードは、誰かがあなたのコンテンツをシェアした際にX（旧Twitter）に表示される画像と説明を提供します。
WPBeginnerでは、この機能を使ってツイートの外観をコントロールし、ユーザーとのインタラクションを高めています。また、Twitterカード（またはXカード）を使用することで、私たちのコンテンツが評価されるようになります。
この投稿では、WordPressにTwitterカードを追加して、ツイートを目立たせる方法を紹介します。
なぜWordPressでTwitterカードを使うのか？
Twitterカードでは、ツイートにタイトル、要約、画像、動画または音声ファイルを追加できます。こうすることで、より多くのクリックやリツイートを獲得できる可能性が高まります。
XのWPBeginnerページでライブ例を見ることができます。
Twitter Cardを持つ最大のメリットは、コンテンツのアトリビューションを通じて、あなたのXアカウントをフォローする人の数を増やすことができることです。しばしば、あなたのリンクをツイートする人は、あなたに適切なクレジットを与えることなくツイートします。
例えば、@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 ” ソーシャルネットワークに移動します。次に、「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カードの画像ソースを選択します。ドロップダウンメニューを使って、投稿に表示したい画像（アイキャッチ画像、添付ファイル、コンテンツ内の最初の画像など）を選択します。
最後に、ドロップダウンメニューから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.
Nick Farrell
You can also just throw your meta tags right into the body of your post. Not the ideal way, since this creates empty white space where your tags are, but it’s a good workaround for those having trouble.
Laurel
If the php code above seems to break your site, it could be that your server doesn’t use php short tags (using “<?" as an opening tag instead of "<?php"). Try this version instead:
Prabs
Hi thanks for the informative post. However I did all this and when testing my site through the card validator, was told it was unable to generate image because my site isn’t whitelisted! Any idea what I can do?
Sarah
Hi,
I realise this is an old post,
IF you HARDCODE into your header.php; make sure you change the values line 10 and 19 as these point to the contributors account so be sure to change them to yours.
just sayin …
Jahmya
Hi,
I have done all the steps when I try to validate with twitter it tells me my text description meta tag is missing. I don’t know anything about code so I used the first method. Any help?
sonam
is it free ?
Tyler
Finally a helpful tutorial! You would think that Twitter would make it a little simpler to do this. Thank you so much for your help on this!
Michael
Is there a way to automatically notify the twitter validator when a post/page is updated?
I have a site that gets content published automatically from a source without a featured image so once I manually add the image I also have to manually validate the post/page again to get the cards to show on twitter.
Was hoping there could be some way to automatically ping the twitter validator when a page/post is updated.
Azita
I don’t know why the code above cut off.
Here is the code am using:
ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = ‘url of imag’;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name="twitter:title" content="” />
<meta name="twitter:description" contente="” />
<meta name="twitter:image" content="” />
Azita
Thank you so much. I figured out. No worries. Please disregard this comment.
Thank yu again.
Adrian Robertson
Another awesome post … great stuff!
For anyone having issues with the image being display (I have Summary selected as my Twitter Card option) just make sure you are using a featured image, as this is where it pulls from.
Without this specified, what I saw was my site logo (which was way too big for the Summary image)
Nefeli D
Can’t thank you enough !
Cheo
Hi, i’ve made all steps and got the twitter card ok, but the preview image is not loading! what should i do?
WPBeginner Support
If you are using code method, then please try using the plugin method. If you are already using the plugin method, then try repeating all the steps carefully.
管理者
shamsher
i have a question that when where to upload it on all pages and post or on home page only.
bcoz when i share any link of my blog on twitter after adding this in header every time same image appears.
Adrian Robertson
Is it your site logo that appears?
Just check that you have a feature image set against your post, and it should pull from there
Roger Dunkelbarger
Found this article and followed the steps to set up Twitter Cards since we already had Yoast. We want to use the video Player Card but that doesn’t appear to be an option. Do we need to use a different plug in, or is that option available?
Amanda
I”m using twitter cards through my Yoast SEO, however when I post I have a link and a view summary button that people have to click to see my pictures. I want the pictures to be auto populated without the need for a click. How do I make that happen?
Here is my twitter account so you can see my tweets for an example
Graham
All going well with the inclusion of twitter cards. I would like to make the image that displays on twitter link able or to a link underneath to take it to a third part site any ideas?
Oh and by the way I would like to thank you guys for realizing that not everyone degree is in computer science and won at MIT !!
WPBeginner Support
The image can only be linked to the link you are sharing.
管理者
Tina Marie Ernspiker
Thank you very much! My blog is white-listed now, with Twitter Cards
Whoot, whoot!
Jas
Hi,
Thanks for your tutorial. I have tried with above code. But can you please explain how to make Twitter card working for multiple accounts.
I have ten different twitter pages where same post will go out as Twitter card.
So do I need to repeat this below line 10 times with different names:
…..
…
….
….
Please suggest?
Thanks!
jas
code doesn’t shows in my previous comment I mean to say meta tag with Twitter site name need to get repeated with different names?
<meta name="twitter:creator" value="@” />
Edna
This was super helpful, thanks!
One quick thing, I noticed the validation link is no longer working. I think this is the Card Validator link now (got it from the twitter blog, seemed to work fine for me):
WPBeginner Support
Thanks, we have updated the article.
管理者
Maha
How to request to twitter for approvel my site ..please help me i tried twitter card ,the preview tool say your card is whitelisted ..
riad
hi i love your site very nice i want to asking you how to change the language of wordpress from franch to english or arabic
WPBeginner Support
You can change the language from Settings > General page in WordPress admin area.
管理者
Paul Middlebrooks
The Yoast solution did not work for me. I followed the instructions (3 times to make sure), and the Card Validator sees my metadata but tells me I have no card.
Also, neither the Preview Tool nor the “FIll out This Form” links worked:
https://dev.twitter.com/docs/cards/preview
Maybe this solution is already history?
samiOOTB
I had done this and Twitter cards were working perfectly for months. Suddenly the past few days they’ve stopped working. What can I do?
Megan Kubasch
So I have installed WP SEO by Yoast, and I have followed all of the instructions up to the point where I insert the Card URL on the Preview page for the Card Validator on Twitter. What URL am I supposed to Insert? I have used my URL for my blog, but it comes up with an error, saying No Card Found (Card Error). Any help you can provide would be greatly appreciated.
Paula
It will not do it for a main blog page. You have to enter a post page url. So something like http://www.blogname.com/title-of-blog-post not http://www.blogname.com Hope that helps!
Eric Yoffie
My twitter card has been approved, but I don’t know how to make it work. Am I supposed to fill out a form? I am a WordPress user.
Lauren Riley
This is really useful thank you.
One thing, we have enabled this using the WordPress Yoast SEO Plug-in and set up a Twitter card manually entering all of the information on the card validator for one blog post.
This worked, however when I tweet a link to my other blog posts it doesn’t pull through the Twitter card. Do you have to set up the Twitter cards for each blog post or should it do it automatically for each blog post?
Manuel Echeverry
graciass!!! thank you! finally I managed to submit my request to twitter, hopefully i will get my card approved
Ruth
Oh, and ps
Do we have to approve each post, or will that be automatic after our first post was approved… Again, thank you
Ruth
Thanks, it works great, except for one thing: I can’t get an image to be included. How would I do that,
Karan Singh
when i install this plugin then it is asking for “You’ve just installed WordPress SEO by Yoast. Please helps us improve it by allowing us to gather anonymous usage stats so we know which configurations, plugins and themes to test with” Allow Tracking or not, what should i do,
Allow tracking or not.
Sri Ganesh.M
The codings are not working for animhut blog. Showing error ! Invalid card type
Kevin
Hello there. Great guide, thanks!
I’m currently stuck trying to validate twitter:creator. When I look at the source for one of my posts, I don’t see the twitter:creator meta tag at all. Would you mind, pointing me in the right direction? I’m hard-coding it.
Gareth
Great post – i was struggling to set up twitter cards using a wordpress plug in without realising that Yoast had it in-built!
All set up and awaiting approval – thanks guys
Jason Acidre
Useful post! Been planning to add Twitter cards on my blog for ages now, and just had the time to tweak it earlier, found this guide very helpful, so thanks.
Reap3RGHS
Hello,
I having a simple problem. I going to add my twitter username to my profile settings. I just add Reap3R_GHS and turn it into http://reap3r_ghs. What can I do?
Editorial Staff
That’s weird. Did you post it in the support forum for Yoast to see?
管理者
Reap3RGHS
Isn’t in Yoast settings but in profile settings…
Julien Maury
Hi,
It’s great but because we call the excerpt outside the loop (header), people could get bad surprises for their description.
So here is a good snippet from uplifted.net that fixes the problem :
function get_excerpt_by_id($post_id){
$the_post = get_post($post_id); //Gets post ID
$the_excerpt = $the_post->post_content; //Gets post_content to be used as a basis for the excerpt
$excerpt_length = 35; //Sets excerpt length by word count
$the_excerpt = strip_tags(strip_shortcodes($the_excerpt)); //Strips tags and images
$words = explode(‘ ‘, $the_excerpt, $excerpt_length + 1);
if(count($words) > $excerpt_length) :
array_pop($words);
array_push($words, ‘…’);
$the_excerpt = implode(‘ ‘, $words);
endif;
$the_excerpt = ” . $the_excerpt . ”;
return $the_excerpt;
}
Then you might replace get_the_excerpt() with this :
get_excerpt_by_id($post_id)
Thanks.
Julien Maury
Sorry that wasn’t exactly that :
Call the function this way : get_excerpt_by_id($post->ID) otherwise you’ll get notice !
$post_id is undefined.
Plus get_the_excerpt() is deprecated.
You can also add an esc_attr() on $the_excerpt to avoid broken meta if the excerpt has quotes
Thanks !
Julien Maury
Finally made a plugin to solve this issue : http://wordpress.org/extend/plugins/jm-twitter-cards/
Main Uddin
There is no needs to use any code , simply use Wordpress SEO by Yoast as Syed Balkhi has said which is the best for Twitter card
Julien Maury
Hi,
There’s no need to use any code. But still my plugin allows you to choose which type of card you want to use on each post. Moreover you can change meta creator (guest blogging) per each post too. I think it’s worthy
Roy McKenzie
Totally Worthy!
Manuel Garcia
When I preview my twitter card, the error says:
“Internal Error. Most likely an fetcher error.”
What to do?
Sai Liou
Thank you for the article! I went with method #1. In the twitter preview, I’m only seeing the summary of the post and not the image. I’ve updated the robot.txt file to allow twitterbot. However, it’s still not showing any image in the preview. Any thoughts on this? Thank you in advance.
Editorial Staff
Look in your view:source to see if you have the image tags. The image is usually pulled from your featured image.
管理者
Mattia Frigeri
Good article. I activated the summary card…
Anyway: how do you change the anchor text name of the website in the attribution below?
For instance yours is “Wordpress Beginner”, other sites use “example.com”. In my case it uses my name. How do you manage it? I’d like to show a piede of my URL like “example.com”
David Benson
Just wanted to let you know that this post saved me HEAPS of time trying to get this to work. Clear, clean and to the point walkthrough. It’s very much appreciated.
A followup question. I added all the steps to my blog, TheSocialChic.com, but I’m curious as to how much time it usually takes for them to turnaround an approval process. Will I get an email or anything when I (or if) I am approved for Twitter cards? No worries if you don’t know, but I greatly appreciate any guidance on this topic.
Thanks again for such a helpful post. Keep up the good work and I will be definitely staying tuned to all future posts.
Editorial Staff
Approval time varies. In our experience, twitter cards were enabled on our account before we received an email from twitter. But yes, we did receive an email from twitter.
管理者
David Benson
Thanks for letting me know. Very much appreciated. Keep up the great work with this site. I will be staying tuned.
Bridie Jenner
I now have this on my site, and very exciting as the first blog post I tried worked – fantastic!
But I’ve tried it with a few others and it’s not showing the summary… any ideas?
Editorial Staff
Did twitter approve your site yet? Remember, they have to approve the site first.
管理者
Bridie Jenner
These are great! Just applied to Twitter for mine and will be sharing this. Thanks.
John John
Awesome article, thank you for all these infos.
Parvez Ansari
I got “Summary Card” working for me by following method 2 for my website which is built usng wordpress. I inserted the code to generate meta data in the single-page wordpress template.
I want to know “how” and “when” to use “Photo Card”
Editorial Staff
You would use photocards on photo specific pages. For example if you have a photo blog, then it makes more sense for you to use a photocard.
管理者
Chris Kovalenko
Setting this up today
Urban Renstrom
Thank for the twitter card tip.
under my profile my twitter handle was missing, doh…
Brent Pittman
Wow! Thanks for keeping us updated with the latests. It seems like this will save a lot of time and we won’t have to attribute the source since it is done automatically.
Lisander
Thanks for the tutorial.. I was wondering what that twitter card on yoast’s plugin was.
But now I know, I hope I get accepted.
Rakesh M. Pawar
Hello, thanks for article, we’ll try this code to implement Twitter Cards.
I’ve one more question (I know this question is not related to this article): How to get such effects like in your post, when we hover mouse over twitter handle it shows popup with follow button, please tell us how to implement that? Thanks in advance.
Nino Blasco
Always good articles, congratulations.
I’ll try just the code.
Thank you.