Twitter meta tags in HTML
Twitter meta tags in HTML
In order to have a website URL showing properly in a Twitter card, some extra meta tags are necessary, with the publisher handle, the page title, the content description up to 200 characters, the creator content handle, and an image, that must be larger than 120×120 pixels.
Twitter SEO meta tags in HTML
The following meta tags have to be used, with below template that can be copied and pasted.
This is for Twitter cards only, and the meta tag in HTML should be pasted in the head section of the code:
<!– Twitter card –> <meta name=“twitter:card” content=“summary_large_image” /> <meta name=“twitter:site” content=“@Twitter_publisher” /> <meta name=“twitter:title” content=“Page title” /> <meta name=“twitter:description” content=“Page description” /> <meta name=“twitter:creator” content=“@Twitter_creator” /> <!– Twitter 280x150px image –> <meta name=“twitter:image:src” content=“http://www.url.com/img.jpg” />
Twitter open graph
In order to have the whole Twitter website card specs, including the Twitter card meta tags and the Facebook open graph meta tags, the full code below can be used.
This will cover all social medias meta data HTML cards, and allow a proper sharing of your URLs on all of them:
<!DOCTYPE html> <html xml:lang=“en” xmlns=“http://www.w3.org/1999/xhtml” lang=“en” prefix=“fb: http://www.facebook.com/2008/fbml”> <head> <title>60 char title</title> <meta name=“description” content=“200 char description” /> <!– Twitter card –> <meta name=“twitter:card” content=“summary_large_image” /> <meta name=“twitter:site” content=“@Twitter_publisher” /> <meta name=“twitter:title” content=“Page title” /> <meta name=“twitter:description” content=“Page description” /> <meta name=“twitter:creator” content=“@Twitter_creator” /> <!– Twitter 280x150px image –> <meta name=“twitter:image:src” content=“http://www.url.com/img.jpg” /> <!– Open graph Facebook card –> <meta property=“og:url” content=“https://www.url.com/”/> <meta property=“og:type” content=“website/article/…”/> <meta property=“og:locale” content=“en-US” /> <meta property=“og:site_name” content=“Site name” /> <meta property=“og:image” content=“http://www.url.com/img.jpg” /> <meta property=“og:title” content=“60 char title”/> <meta property=“og:description” content=“Page description” /> <meta property=“article:published_time” content=“2018-11-06 11:32:39” /> <meta property=“article:modified_time” content=“2018-11-06 11:32:39” /> <meta property=“article:section” content=“Section” /> <!– Schema.org markup for Google+ –> <meta itemprop=“name” content=“Site name”> <meta itemprop=“description” content=“Page description”> <meta itemprop=“image” content=“http://www.url.com/img.jpg”>
Twitter card meta tags
Once the Twitter metadata has been implemented on the website, sharing them will produce the look below, as the title, image and description will be properly retrieved by Twitter.
Twitter card validator
An online application for developers is available on Twitter website, and allows devlopers to check by themselves if the rich cards have meta tags been properly implemented on their websites.
Simply open the webpage, paste a URL in which the Twitter rich cards should appear, and see the results, or the potential errors in case of tags wrongly implemented.
Card validator Twitter developers
Twitter post image size
An image posted in a Twitter post must be at least 120 pixels wide by 120 pixels large, or 120x120px.
Respect this minimum requirements to be sure that your images will always appear properly on the Twitter posts and will make them have a good look.
Where Can I FLY ? (@wcanifly) Twitter
Yoann Bierling (@ybierling) Twitter
Help Smartphone (@help_smartphone) Twitter
Travel Comparator (@travelcomparato) | Twitter
Twitter developer platform – Twitter developers
Kiev beach club and Kiev nightlight in summer – Where Can I FLY?
Must-have social meta tags for Twitter, Google+, Facebook and more – Moz
Further readings
In order to optimize your meta tags for rich cards display and other social media sharing puroposes, have a look at these great websites full of useful information:
The Web Developer’s SEO Cheat Sheet 2.0
18 Meta Tags Every Webpage Should Have in 2014
The Open Graph Protocol
Snippet – Google+ Platform
Pinterest Rich Pins for Business
WooCommerce – Free WordPress toolkit that adds product markup