Adding Twitter Cards to your website

Step by step, how-to add Twitter Cards to your website and common errors fixed.
Twitter Website Twitter Cards Online Marketing SEO Responsive

Twitter Cards is a tool that Twitter gives to web developers to share links to websites, blogs, videos, images and multimedia on a more visual and rich way than just only showing a link on the Tweet. With Twitter Cards will make any link we add to a Tweet to be shown below the text of the actual Tweet in a small box with a preview of the link we are sharing.

Twitter Card

First think we have to have in mind, is that there are several kind of Twitter Cards:

1. Summary Card: this will be a small card shown below the tweet and it will have a small image, a title, a short description and a link to show the attribution of the card. These cards are used to show a small preview of the content of the link.
2. Summary Card with Large Image: these are basically the same type of cards than the first ones but this time, the card will hold a much bigger image and it will be placed right above the title and the description of the card.
3. App Card: these are a type of cards with a direct link to download an app. These are designed to show the app title, the icon, description and elements like the rating and the price.
4. Player Card: these are Twitter Cards specially design to share multimedia: video, audio or media. With these cards and always you follow the Twitter Policy for Developers you will be able to share multimedia content right above the text of your tweet.

Now we already know what kind of Twitter Cards we have available tto share our content on Twitter, we can start the process to add a Twitter Card to our blog, website, app or multimedia content, chossing in each case, the more suitable to show our content. Let's start with the whole process:

  • 1. Choose the Twitter Card we need

    In this case and for this "tutorial" we will implement a Twitter Card to the divs of this blog, so, I picked the Summary Card with Large Image. First thing we will need is a good image for each div, it should be the best image we can get so we can get the attention of possible readers and visitors of the blog. Then, of course, we'll need a title and a description also to grab some attention from possible readers and visitors to the blog.

  • 2. Add the code

    Already? Yes! It's this easy, once we pick the type of Twitter Card, we only need to add the meta tags to our website so when we share the link on Twitter it will show the card we've picked before with our content.

    The tags that we need to add are available in the developer's Twitter website:

    For this example we'll add the following meta tags:

                                                    <meta name="twitter:card" content="summary_large_image">
                                                    <meta name="twitter:site" content="@Gal_Code">
                                                    <meta name="twitter:creator" content="@Gal_Code">
                                                    <meta name="twitter:title" content="Adding Twitter Cards to your website">
                                                    <meta name="twitter:description" content="Step by step, how-to add Twitter Cards to your website and common errors fixed.">
                                                    <meta name="twitter:image" content="http://galcode.com/content/img/articulos/twitter-card-imagen.jpg">
                                                

  • 3. Validate the Twitter Card

    After we have added the meta tags to the website, we'll be able to check if the meta tags and our content is valid just going to Validador de Twitter Cards. There, we can check that the code and the image we used to create the card are valid and it works correctly. Remember that Player Cards should be added to a whitelist before Twitter publish our content.

  • 4. Common Errors
    • The Twitter Card is not shown

      We cannot forget that we are adding HTML tagging to our website so if we didn't do it before, we need to add some marking tool to the html tag at the beginning of the wesite, something like:

                                                              <html xmlns="https://www.w3.org/1999/xhtml" xmlns="https://ogp.me/ns#" xmlns="https://www.facebook.com/2008/fbml" lang="es">
                                                          
    • The image is not shown on the Twitter Card

      Sometimes we share the link and after adding all the meta tags, the image we've selected is still not shown in the Twitter Card. In many occasions the error is that we don't follow the guide lines for the image, these are: 280px min width, 150px min height and 1MB max size. There are also limits on the max width and height but are not written, so what I found is that I usually use images double of the min width and height, 560 by 300 px.

    • I've checked everything but the Twitter Card is still not shown

      Sometimes is hard to find the error but in my experience, if you're adding a Twitter Card to a multi-language website be sure to use in the validator the url for the english version. Usually, when we develop a multi-language website we use a small piece of code in the header to redirect a visitor to the correct language version, the Twitter Card Validator doesn't understand this and it shows an error even we know everything is right.

      My advise in this case, is that you validate the url with the English version and you can find a better way to redirect in your website because if you don't find another way for this, you Twitter Card won't be shown on Twitter either.

We already have our Twitter Cards ready, now, do I need to do this for each div on my web? Well, yes and no, you can automate this process by adding some coding to your website if you know how to program or hire us to improve your web and include the Twitter Cards to your blog and website.

Ignacio Borrajo
14 de febrero de 2017, Ourense

Leave a comment

Comments

  • Miguel, 22.04.2016:

    Artículo buenísimo y super detallado!! Lo he probado con mi proyecto y funcionó a la primera.