Twitter cards

How to use Twitter Cards

How to use Twitter Cards

June 16th, 2017 – 7 Comments

Back in 2012, Twitter introduced a system called Twitter Cards which allows site owners to display enhanced tweets on their websites using a syntax very similar to that of OpenGraph. Thanks to this new system, Twitter can show nicer looking tweets, including ones containing media such as images, audio and video.

How does it work?

As mentioned in the introduction, Twitter Cards make use of a very similar syntax to that of OpenGraph. Twitter has some properties that are specific for their platform which you can see in the following snippet:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yoast"/>
<meta name="twitter:creator" content="@michielheijmans"/>

The twitter:card property is required and defines the type of card you want to show. You have four flavors here: summary, summary_large_image, app and player. What the difference is between all these different cards can be found in the documentation.

Both twitter:site and twitter:creator are optional and point to the Twitter account of the website publishing the content and the author.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

OpenGraph

When it comes to parsing URLs, images and descriptions, Twitter makes use of existing og: properties. You can overwrite these og: properties with Twitter specific ones, but most of the time this isn’t something you’d want. If your goal is to display completely different information on Twitter, then these tags allow you to override default behavior.

There’s one thing to take into account when using both the Twitter and OpenGraph options. Twitter uses name to specify the attribute whereas OpenGraph makes use of the property attribute. Take this into account if you plan on manually implementing Twitter Cards.

Implementing Twitter Cards

As with other meta tags, you need to add the Twitter tags in the <head> of your website and ensure that the values are set properly on a per-page basis. This can quickly becomes an unwieldy task for a blog, so we built a feature that generates the proper meta tags for you.

Twitter Card settings in Yoast SEO

Twitter Card input field in Yoast SEO

Want to change the look of the Twitter Card for a specific post or page? Just use the form on the Social tab. Here you can tweak specific properties to your liking.

Additionally, our Premium plugin contains Social Previews which display what the Twitter Card will eventually look like based on the current page or post:

twitter cards in yoast seo premium

Twitter Card: Preview your Twitter post with Yoast SEO Premium

Twitter Cards are a great (visual) addition and can help increase traffic to your website!

Read more: ‘SEO basics: how to use social media’ »


7 Responses to How to use Twitter Cards

  1. Adriano
    By Adriano on 21 June, 2017

    Thanks for sharing an amazing post, so I always follow this site, congratulations.

  2. Todd Fulks
    By Todd Fulks on 19 June, 2017

    Could you explain methods you reccomend to best overcome the dreaded Twitter cache problem for the image if Twitter has the featured image stored already?

    Or are you going to add this as a feature to Yoast Premium? Maybe a checkbox that simply sends a different looking image file meta name.

    • Jimmy Comack
      By Jimmy Comack on 21 June, 2017

      Hi Todd,

      Currently we have no plans to add a feature to handle this, but it’s definitely something we could look at!
      The best way to overcome this issue for now is to append the image’s filename with a random sequence of characters. For example, the URL to the image would look like this: http://yoast.com/some-image.png?28494020

      Whenever you alter the image but keep using the same filename, make sure to have a unique sequence at the end to force Twitter to refresh its cache.

      Hope this helps!

  3. Lrers
    By Lrers on 19 June, 2017

    thanks for sharing amazing post

  4. Silva
    By Silva on 18 June, 2017

    Very Good, I will always follow your site

  5. Pattipie
    By Pattipie on 17 June, 2017

    Cool! I love the idea! Thank you for it!

  6. priya
    By priya on 17 June, 2017

    Greetings! This is my first visit to your blog!
    Your blog provided us useful information to
    work on. You have done a wonderful job!


Check out our must read articles about Analytics