Add Markup For:
Twitter
Amount of Tags:
W3C Valid )W3C Valid )
Copy the data below to your website:
Because the social markup wars are getting ridiculous this tool will create
the least amount of markup code necessary that will work. Sometimes this
generator will even combine the markup for several services into one html tag.
Testing Tools
After you have added the markup to your page, test your page with these testing tools:
General Guidelines
Facebook: You might update the markup for your page but the updates still
may not show up in a Facebook post until you run the
Facebook Open Graph Object Debugger (Linter) tool.
Make sure you press "Fetch new scrape information".
The image may not update unless you press Refresh a couple times.
If the image still does not update then you may have to rename the
image to something that has not been used on facebook before.
Google+: You might update the markup for your page but the updates
may not show up in a Google+ post until you run it through the
Google Structured Data Testing Tool . However it can take Google over 24 hours to update
the image, description and/or title on Google+ so you may have to wait a while to post it.
Some Google+ documentation claims that Google+ can get itemtype specified in a
meta tag like:
<meta itemscope itemtype="http://schema.org/Article">
But in testing this did not prove to be true. If itemtype was specified in the <head>
section then Google+ only used it if it was declared in the <html> tag.
Facebook Open Graph (og) wins the social markup wars so far because
it actually does what it claims to now and assumes or infers og:
properties from the html <title> tag and meta "description" tags, etc.
Google+ claims
that it will use og:title and og:description for the snippet
if schema microdata markup is not used on the page. But in reality Google+ will randomly sometimes
choose not to use it. Google+ also claims that it will use <title> and meta "description" tags
if schema markup is not found on the page. But it often chooses to ignore these also.
Therefore this generator always uses schema markup.
Twitter cards
will use Facebook Open Graph meta tags for the twitter cards
as long as this code is in the <head> section of the webpage:
<meta name="twitter:card" content="summary">
Therefore this generator just uses Open Graph (og) for Twitter cards.
Twitter Card Validator will not validate with property="og:description" in the same meta tag as
name="description" or itemprop="description" unless property="og:description" comes first in the tag
as in this example:
<meta property="og:description" name="description" itemprop="description" content="...">
Pinterest
will use the same og:image og:title and og:description meta tags that Facebook uses. Or Pinterest will
use the same Schema itemprop "name", "description" and "image" tags that Google+ uses.
LinkedIn
will use the same og:image og:title and og:description meta tags that Facebook uses.
Schema itemtypes Article , Blog , and BlogPosting
require itemprop(s)
datePublished , headline and image . This markup generator includes
name and headline in one tag for good measure as follows:
<meta itemprop="name headline" content="Title of page">
w3.org made up this rule for itemprop :
If a meta element has an itemprop attribute, the name , http-equiv , and charset
attributes must be omitted, and the content attribute must be present.
This rule is ridiculous so
Google Structured Data Testing Tool ignores it and so does this generator in the "Least Amount" of tags mode.
The W3C Markup Validator will still give an error even
if you remove the name attribute from the meta tag but leave both itemprop and property .
The error will state something like:
Error: Attribute property not allowed on element meta at this point.
or
Error: Attribute itemprop not allowed on element meta at this point.
This error should not be given because there is no rule against having both itemprop and property in
the meta element.
Schema and Google+ seem to allow itemprop="name" inside the <title> tag.
Image Guidelines
Facebook will only display a thumbnail of the image if it is less than 600px wide.
Facebook recommends
images that are at least 600x315 or 1200x630 and close to a 1.91:1 aspect ratio.
Google+ will only show a thumbnail of the image if it is less than 400px wide and if the
aspect ratio is wider than 5:2 (width:height). When Google+ displays only a thumbnail then
the title is displayed next to the thumbnail but no description in displayed.
For Twitter standard Summary cards
<meta name="twitter:card" content="summary">
The image must be a minimum size of 120px by 120px and must be
less than 1MB in file size. The image will be cropped to a square on all platforms.
For Twitter Summary cards with large images
<meta name="twitter:card" content="summary_large_image">
The image should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size.
In recent testing it appears that using an image of 600x315 or 1200x630 does a full image with great previews for all three
social networks (Facebook, Google+, Twitter).
