SEO and Social Markup Meta Tag Generator

Last updated on
Created on November 5, 2015
Subscribe to Internet Tips and Tools Feed

This SEO and Social Markup Generator will instantly create html markup for your webpage for Search Engines, Google+ Schema Rich Snippet microdata, Facebook Open Graph and Twitter Card. Pinterest will also use the Google+ Schema meta tags or the Facebook og: tags. LinkedIn will also use the Facebook og: tags.

Add Markup For:

Amount of Tags:

Add Google+ Schema Data To:

Google+ Schema Page Type:
Twitter Card Type:

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

  1. 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.
  2. 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.
  3. Some Google+ documentation claims that Google+ can get itemtype specified in a meta tag like:
    <meta itemscope itemtype="">
    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.
  4. 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.
  5. 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.
  6. 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.
  7. 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="...">
  8. 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.
  9. LinkedIn will use the same og:image og:title and og:description meta tags that Facebook uses.
  10. 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">
  11. 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.
  12. 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.
    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.
  13. Schema and Google+ seem to allow itemprop="name" inside the <title> tag.

Image Guidelines

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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).
Back to
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 50 comments.