WPBeginner - 初心者のためのWordPressチュートリアル

Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

最終更新日 by Editorial Staff | レビュー Syed Balkhi

シェア フェイスブックメッセンジャー WhatsApp
編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトにTwitterカードを追加したいですか？Twitterカードとは、誰かがあなたのコンテンツをシェアした際にTwitter上に表示される画像と説明のことです。

Twitter上で自分のツイートがどのように表示されるかをコントロールしたり、ツイートに自分の名前を自動的に含めることで信用を得たり、ユーザーのエンゲージメントを高めたりするのに役立ちます。

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

Beginners Guide on How to Add Twitter Cards in WordPress

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

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

私たちのTwitterページでライブの例を見ることができます。

twitter card example

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

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

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

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

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

  1. Using AIOSEO Plugin to Add Twitter Cards (Recommended)
  2. Adding Twitter Cards in WordPress (Code Method)
  3. Test and Validate Your Twitter Cards
  4. 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 ” ソーシャルネットワークに移動します。次に「Twitter」タブをクリックし、「Twitterカードを有効化」オプションが設定されていることを確認します。

enable twitter card option

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

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

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

default card type

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

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

select default post image source

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

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

upload default post twitter image

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

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

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

home page settings

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

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

home page card type and image

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

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

home page title and description

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

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

aioseo settings

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

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

twitter card settings for posts and pages

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

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

image source and card type

次の投稿を更新または公開します。これで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; ?>" />
<?
  }
}
?>
Hosted with ❤️ by WPCode
1-click Use in WordPress

大きな画像でサマリーカードを表示したい場合は、14行目の’twitter:card’の値を’summary_large_image’に変更してください。

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

Twitterカードのテストと正しい使い方

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

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

Twitter Card Validator

カードバリデータはツイートのプレビューを表示しなくなりましたが、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$編集プロセスをご覧ください。

Avatar

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.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション！

今すぐダウンロード

Reader Interactions

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

  1. 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!

  2. 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.

    返信

  3. 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.

      返信

      管理者

  4. 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.

    返信

  5. 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.

      返信

      管理者

  7. 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

    返信

  8. 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.

    返信

  9. 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!

    返信

  10. 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?

    返信

  11. 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.

    返信

  12. Chinny says

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

    返信

  14. Nick Farrell says

    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.

    返信

  15. Laurel says

    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:

    返信

  16. Prabs says

    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?

    返信

  17. Sarah says

    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 … ;-)

    返信

  18. Jahmya says

    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?

    返信

  20. Tyler says

    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!

    返信

  21. Michael says

    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.

    返信

  22. Azita says

    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="” />

    返信

  23. Adrian Robertson says

    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)

    返信

  25. Cheo says

    Hi, i’ve made all steps and got the twitter card ok, but the preview image is not loading! what should i do?

    返信

  26. shamsher says

    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 says

      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

      返信

  27. Roger Dunkelbarger says

    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?

    返信

  28. Amanda says

    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

    返信

  29. Graham says

    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 !!

    返信

  31. Jas says

    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 says

      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="@” />

      返信

  32. Edna says

    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):

    返信

  33. Maha says

    How to request to twitter for approvel my site ..please help me i tried twitter card ,the preview tool say your card is whitelisted ..

    返信

  34. riad says

    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

    返信

  36. samiOOTB says

    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?

    返信

  37. Megan Kubasch says

    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.

    返信

  39. Lauren Riley says

    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?

    返信

  41. Ruth says

    Oh, and ps
    Do we have to approve each post, or will that be automatic after our first post was approved… Again, thank you

    返信

  42. Ruth says

    Thanks, it works great, except for one thing: I can’t get an image to be included. How would I do that,

    返信

  43. Karan Singh says

    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.

    返信

  45. Kevin says

    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.

    返信

  46. Gareth says

    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

    返信

  47. Jason Acidre says

    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.

    返信

  49. Julien Maury says

    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 says

      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 !

      返信

    • Main Uddin says

      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 says

        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 :)

        返信

  50. Manuel Garcia says

    When I preview my twitter card, the error says:
    “Internal Error. Most likely an fetcher error.”
    What to do?

    返信

  51. Sai Liou says

    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.

    返信

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。

著作権 © 2009 - 2024 WPBeginner LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。

Awesome Motiveが管理する｜WordPressホスティングがSiteGroundが管理する

を手伝ってほしい。…

人気のある検索

ブログの開始 ワードプレス SEO WordPress パフォーマンス WordPress エラー WordPress セキュリティ オンラインストアの構築