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
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.
Similar to the data used by Facebook and Twitter in the meta tags above, Google also uses structured data – a type based on the
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.
- 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 declares the character set for the page, and replaces an older way to do the same thing (shown above).
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.
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.
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.
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 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
fb namespaces. If we were to use the
article type for our content, the namespace declaration would be:
We can then supply data specific to articles like:
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:
- 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: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: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 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.”
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”.
twitter:creator reference Twitter handles
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.