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.
First think we have to have in mind, is that there are several kind of Twitter Cards:
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:
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.
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">
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.
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">
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.
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
Artículo buenísimo y super detallado!! Lo he probado con mi proyecto y funcionó a la primera.