Meta Tags and Structured Data Tutorial
HTML Meta Tags and Structured Data For Optimal SEO and Social Media Sharing
What are HTML meta tags, which ones should you use, and how can you optimize the use of meta tags to make your page perform well in search engines and social-media sharing?What about Open Graph
tags, Twitter Cards, and schema.org structured data – and why are they important for sharing and distributing content on Facebook, Twitter, and various Google properties?
The following code snippet provides a template of code for the head section of a webpage. It contains standard HTML meta tags as well as Open Graph tags used by Facebook, and additional custom tags used by Twitter.
Sample meta tag and title tag listing
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8" >
<!-- Title should be 50-60 characters in the following format: -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
<!-- Canonical links consolidate duplicate URLs to a single one -->
<!-- This consolidates search engine "juice" for duplicate content... -->
<!-- ...to a single URL -->
<link rel="canonical" href="http://coronite.net/">
<!-- Use the following for responsive sites -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Description should be less than 160 characters -->
<!-- It doesn't affect rank, but does often show up as snippet in SERPs -->
<!-- It should read naturally and contain likely search terms -->
<meta name="description" content="Less than 160 characters">
<!-- Control the content which renders when the page is shared on Facebook -->
<!--FACEBOOK-->
<meta property="og:title" content="Primary Keyword - Secondary Keyword | Brand Name" >
<meta property="og:site_name" content="name that you would like your website to be recognized by">
<meta property="og:url" content="canonical address" >
<meta property="og:description" content="Same rules as description above" >
<meta property="og:image" content="URL of image to be associated with page/object" >
<meta property="fb:app_id" content="facebook app ID" >
<!-- See http://ogp.me/#types for a list of types -->
<meta property="og:type" content="website" >
<!--TWITTER-->
<!-- Twitter uses some of the Open Graph declarations above plus these -->
<!-- Note the use of "name" and not "property" -->
<meta name="twitter:card" content="summary" >
<meta name="twitter:site" content="Twitter Handle" >
<meta name="twitter:creator" content="Twitter Handle" >
<head>
Similar to the data used by Facebook and Twitter in the meta tags above, Google also uses structured data – a type based on the
schema.org vocabulary. While schema.org “microdata” can be added to directly HTML tags (much like the twitter and facebook-specific data added to the meta tags above), luckily, it can also be added in one fell swoop. Schema.org data can be added to a webpage as a JSON object known as JavaScript Object Notation for linked data (JSON-LD). An example of such a JSON object is listed below:
A JSON-LD structured data schema used by Google
<script type='application/ld+json'>
{
"@context": "http://www.schema.org",
"@type": "ProfessionalService",
"name": "Coronite Creative",
"url": "http://coronite.net/",
"email": "john@coronite.net",
"logo": "http://static.coronite.net/img/logos/logo_footer.png",
"image": "http://static.coronite.net/img/portfolio/cc-port-lg-min.jpg",
"description": "Master the web, SEO, and eCommerce. Coronite Creative is a web and app-development firm in Phoenix, Arizona. We create websites that make your business money.",
"telephone": "+1-4807884635",
"address": {
"@type": "PostalAddress",
"streetAddress": "P.O. Box 38684",
"addressLocality": "Phoenix",
"addressRegion": "AZ",
"postalCode": "85069",
"addressCountry": "USA"
},
"openingHours": "Mo, Tu, We, Th, Fr 09:00-21:00 Sa, Su 09:00-17:00",
"priceRange": "$",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "sales",
"telephone": "+1-4807884635"
}
}
</script>
But now that you’ve seen examples of meta tags, meta tags containing microdata, and schema.org data tailored for Google, let’s take a step back and look at what all of this data is actually doing for your site and your business.
Meta and Structured Data:
- Metadata is data about data, and the meta tag is the “official” way of adding such data to an HTML document.
- More recently, custom meta tags and other data structures have been used by social media sites like Facebook, Twitter, and Google+ to standardize the rendering of website content on their platforms.
- Similarly, search engines use structured data to make absolutely sure they give their users correct information – e.g., business hours, locations, telephone numbers, etc.
- With just a little bit of effort, proper meta tags and data structures can benefit SEO, local search, click-through rate, and social media sharing. It can also help your customers find correct, up-to-date information about your business at all times.
The scope of data structures and social sharing is too vast to be contained in a single article, but with a setup like the one outlined here, site owners can be confident that their webpages and online content will be primed for being found, clicked, and shared online.
Charset Meta Tag
<!-- HTML 5 Use this -->
<meta charset="utf-8" />
<!-- HTML 4.01 Old Version -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
charset declares the character set for the page, and replaces an older way to do the same thing (shown above).
The Title Tag
<!-- Provide an accurate and concise description of page content -->
<!-- Try not to re-use page titles on different pages -->
<!-- The title tag should be 50-60 characters to render properly -->
<title>Widgets - Gizmos | Acme Widget and Gizmo Emporium</title>
<title>How to configure widgets | Acme Widget and Gizmo Emporium</title>
Though not a meta tag, the title tag is also placed in the document head. It’s often the first thing a user sees in a search result, and it’s important for SEO, usability and social sharing.
Title Tag Format:
Primary Keyword - Secondary Keyword | Brand Name
Title Tag Length
50-60 Characters – titles of this length will usually display properly in Google’s search results.
Keep In Mind:
Avoid generic titles like: “Acme Widgets Homepage”, “Acme Widgets New Page”, “Acme Widgets Product Page”, etc. Almost nobody searches for such things. Keep your user’s search in mind when crafting your page titles – like in the Title Tag Format section above.
Canonical Link Tag
<link rel="canonical" href="http://coronite.net/">
link rel="canonical" can be used to set a definitive URL for pages that serve duplicate content. This includes, for example, server redirects with and without the www subdomain (http//:www.example.com vs http://example.com). This tag helps to prevent splitting search engine rankings between two of your pages with the same content.
Viewport Meta Tag
<meta name="viewport" content="width=device-width,initial-scale=1"/>
The meta viewport tells the browser how the page should be rendered. The above code, for example, tells the browser to set the width of the content to the width of the device itself, and to scale that content to 1 on load. The viewport tag can take many values, but the setup above is often found in responsive (or mobile-only) websites.
Keep In Mind:
Unless there’s a specific reason not to, websites should be made responsive to display optimally on different device sizes. As such, the above code will be very commonly used for modern websites.
Description Meta Tag
<meta name="description" content="A description of the page"/>
The description tag describes the webpage to users in search engine ranking pages (SERPs).
Description Meta Tag Length
It is generally recommended that meta descriptions be less than 160
characters (including spaces) to avoid truncation on result pages.
Keep In Mind:
Google doesn’t use the meta description tag to influence a site’s ranking, but the meta description tag is used to display the snippet of text that shows up in Google’s search results page. Because this text can influence the user’s decision to click the link, craft it accordingly. What is your customer looking for? What search term(s) did they use to find you? Why would the user click your link instead of some of the others on the page? The meta description should read naturally, ideally in a non-hyperbolic, non-spammy way.
Like page titles, meta descriptions should be unique.
Google doesn’t always use the description meta tag if it decides that the content of the tag doesn’t adequately represent the purpose of a page. It uses a snippet from the page copy if it decides that this better matches the user’s search query.
Facebook Open Graph Meta Tags
<!-- Control the content which renders when the page is shared on Facebook -->
<!--FACEBOOK-->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
...
<meta property="og:title" content="Primary Keyword - Secondary Keyword | Brand Name">
<meta property="og:site_name" content="name that you would like your website to be recognized by">
<meta property="og:url" content="canonical address" >
<meta property="og:description" content="Same rules as description above" >
<meta property="og:image" content="URL of image to be associated with page/object" >
<meta property="fb:app_id" content="facebook app ID" >
<!-- See http://ogp.me/#types for a list of types -->
<meta property="og:type" content="website" >
</head>
Facebook uses Open Graph Tags which give developers a measure of control over how content is displayed when a page (or other content) is “liked” or shared on Facebook
Keep In Mind:
To use a namespace, we declare it on a parent element – in the above case, the head tag. We declare
og and fb namespaces. If we were to use the article type for our content, the namespace declaration would be:
<head prefix="og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#">
We can then supply data specific to articles like: article:author, article:published_time, and article:modified_time. Documentation for the “Article” Open Graph Object Type goes into further detail.
Facebook reminds us in their Sharing Best Practices for Websites:
Facebook Best Practices for Websites:
- Use “a clear title without branding or mentioning the domain itself.”
- Use “a URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article.”
- Use “images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size.”
- Avoid generic images and descriptions used on multiple pages.
- Use “a clear description, at least two sentences long.”
- Use: “A Facebook App ID that identifies your website to Facebook.” (Note: Confusingly, Facebook business pages also have an ID, but you’ll need to generate an app in Facebook For Developers to generate an ID that works here.)
- Use: “The type of object.”
- If the type of page/object you’re creating is an article, use: the
article:authorandarticle:publishertags. The author is defined as: “An array of Facebook profile URLs or IDs of the authors for this article.” The publisher is defined as: “A Facebook page URL or ID of the publishing entity.” - Running the page through the Facebook Sharing Debugger will pre-cache the image for faster loading.
- Consider using
og:image:widthandog:image:heightOpen Graph tags. Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
Twitter Card Markup
<!--TWITTER-->
<!-- Twitter uses some of the Open Graph declarations defined above. -->
<!-- It also uses these to define the type of card and Twitter handle... -->
<!-- ...of the site and creator. -->
<!-- Note the use of "name" and not "property" like the og tags -->
<meta name="twitter:card" content="summary" >
<meta name="twitter:site" content="Twitter Handle" >
<meta name="twitter:creator" content="Twitter Handle" >
Twitter uses some of the same Open Graph tags as Facebook, as well as the Twitter-specific tags above, to render Twitter Cards. On the
Getting Started with Twitter Cards page, Twitter tells us: “With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.”
https://t.co/dtiZ01wIhs
Just taking a look at Twitter Cards— Coronite Creative (@CoroniteCreativ) April 10, 2017
Keep In Mind:
All cards have one basic property in common – the card type value, denoted by the following tag:
<meta name="twitter:card" content="summary" >
The card type, can be one of “summary”, “summary_large_image”, “app”, or “player”.
Note that twitter:site and twitter:creator reference Twitter handles
Schema.org Structured Data
A JSON-LD structured data schema used by Google
<script type='application/ld+json'>
{
"@context": "http://www.schema.org",
"@type": "ProfessionalService",
"name": "Coronite Creative",
"url": "http://coronite.net/",
"email": "john@coronite.net",
"logo": "http://static.coronite.net/img/logos/logo_footer.png",
"image": "http://static.coronite.net/img/portfolio/cc-port-lg-min.jpg",
"description": "Master the web, SEO, and eCommerce. Coronite Creative is a web and app-development firm in Phoenix, Arizona. We create websites that make your business money.",
"telephone": "+1-4807884635",
"address": {
"@type": "PostalAddress",
"streetAddress": "P.O. Box 38684",
"addressLocality": "Phoenix",
"addressRegion": "AZ",
"postalCode": "85069",
"addressCountry": "USA"
},
"openingHours": "Mo, Tu, We, Th, Fr 09:00-21:00 Sa, Su 09:00-17:00",
"priceRange": "$",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "sales",
"telephone": "+1-4807884635"
}
}
</script>
Perhaps the most robust data structure vocabulary is provided by schema.org. Though it can be added to HTML tags, the sheer number of datapoints schema.org recognizes makes doing so tedious. Luckily, it can also be constructed as a JSON object like that above and added to, for example, the footer of a webpage. Study the schema.org documentation to find which data “itemtype” best matches your content, and which data “itemtypes” accept which data “itemproperties.” In the above JSON, for example, note that “address” is a property of “ProfessionalService,” but address, itself, is an itemtype as well. The address item has its own properties including: “streetAddress”, “addressLocality”, and “addressRegion” etc. Fortunately, tools such as the Hall Analysis JSON-LD Schema Generator For SEO make it remarkably easy to produce these data structures.
Note as well that Google has some requirements for the schema.org data structures they prefer – including those which refer to businesses. For more information, see:
The resources below can get you started in creating and validating the data in your webpages. Even still, the time and energy needed to optimize business websites for search and usability is never insignificant. At Coronite Creative, we’ve validated and battle tested these strategies so you don’t have to. If you’re interested in learning more about how we can help you build your business online, please feel free to reach out to us.
Resources:
Google Structured Data Testing Tool
Google’s Introduction to Structured Data Types
Hall Analysis JSON-LD Schema Generator For SEO
“Article” Open Graph Object Type Documentation
w3.org Recommendation for the meta tag
Google – Create good titles and snippets in Search Results
Read More Articles On:
