<meta> Tags-Best Practices
HTML <meta> tags are critical for how your web page is represented in search results, but are important everywhere else too. Everything from the Chrome tab title, to whether your page appears in search results at all, and even whether people with bad vision can zoom for a better look, is controlled by <meta> tags.
To see my recommend best practices meta tags setup, skip to the Conclusion.
How to see <meta> tags
Life is controlled by invisible forces, and for websites, it's the unseen HTML <meta> tags that exist on every page which determine success or failure.
While usually hidden, with special effort you can see <meta> tags. To see the meta tags on this page (instructions for Google Chrome):
- Press CTRL+SHFT+I to inspect the page
- Near the top, find the <html> element, and inside it find the <head> element.
- Inside the head element will be all the <meta> elements we are talking about (though it might require some eagle-eyed effort to spot them among the <script> and <link> elements. These tags are what we are talking about.
These are the tags we are talking about:
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags-Best Practices</title>
<meta name="description" content="The best practices to use with HTML <meta> tags. Learn the basics of representing your page on search engines. Find out what you need to know!">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">
</head>
</html>
The Basics
There are two basic tags, and they are important because they control what your page looks like in search results.
- <title>
- Description <meta>
<title>
Unlike all the other tags we’ll talk about, the title tag isn’t a <meta> tag, it’s a <title> tag:
<title>Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.</title>The title tag is important because its content will be used as the name of the link in a Google search result:
And not just in Google. The title will represent your page to users everywhere, whether on LinkedIn, Twitter, or some other service, or in their very own browser.
The title appears in their Chrome tab:
Or at least the first few words of the title.
And in their browser history:
So think about it: if you were linking to another site and needed a quick, easy, simple way to name the link, what would you use? The title! So your title should be able to identify the content of the link, in a way that is attractive, informative, and brief.
For the decision to visit your site made a by a prospective user looking at search results, what percentage of that decision is based on the title? Maybe 90%? A good title is really important.
But while creating a good title is a whole topic of its own, the key is:
=> keep it short!
Description-<meta>
The description meta tag looks like this:
<meta name="description" content="Documentation for the Tailwind CSS framework.">The description meta tag is important because it is also included in search results. Your description will be the sub-title of the search result (with the caveat that sometimes Google will write its own description).
In the same crucial decision to visit your site, what percentage of the decision is based on description? Maybe 90% of whatever is not explainable by the title? If the title seems interesting, but the potential visitor is still unsure, a good description can push your website over the finish line.
Writing a good description is also a topic of its own, but a good framework I use is ABC:
- A - Accurate description of the content.
- B - Benefit to the visitor.
- C - Call to action.
Usually I have one sentence for each, and try to be concise. Keeping the description short is important because the space Google is willing to give your link is limited.
How short is short? There is research suggesting 155 characters. And in the search results for “meta tag description length”, Google cuts off descriptions at 158 characters. Just to give you a sense for how long 158 characters is, this paragraph would be:
How short is short? There is some research that suggests 155 characters. And in the search results for “meta tag description length”, Google cuts off ...Again, the key is:
=> keep it short!
The Boilerplate
There are two meta tags that should be included in every page because they are important for how your page actually looks on a user’s screen:
- Character Set-<meta>
- Viewport-<meta>
Character Set-<meta>
The character set meta tag looks like:
<meta charset="utf-8">And you should always include it in your pages, even though it’s probably not needed.
The character set meta tag is important because it absolutely guarantees that the user’s browser, no matter how old the version, no matter what human language they prefer, will interpret your page using UTF-8 encoding.
Encoding is important since your webpage is actually transmitted as a series of ones and zeros, and only by interpreting those ones and zeros using an encoding can you even talk about characters like ‘a’ and ‘b’.
Most modern browsers assume UTF-8 encoding if none is specified. But what about all the people using old browsers? Or other modern browsers that don’t assume UTF-8? Also, what happens if there are unique characters in the HTML of your webpage, like emojis or Korean characters? Without specifying an encoding you might mean 🙂 but get 글, or vice-versa!
The worst part of this problem is that the page would always look fine to you as the developer. Your browser used whatever encoding it was set to use, and you changed things until they looked good for you. But to different people, in different lands, at different times, your page would look different. These are the diffuse, rare, and hard-to-diagnose bugs that make programming miserable!
So, mostly due to whispers of “very bad things” happening if you don’t, the character set is always included.
Include it.
Viewport-<meta>
In comparison to the character set meta tag, there is no controversy about whether to include the viewport meta tag; it's absolutely essential.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5"/>Let’s unpack that.
The width of the page is set to whatever the width of the device showing the page is. While that might seem obvious, I’m sure you have also seen web pages with long lines of text that scroll out to the side. Maybe there are sections of the webpage that have side-to-side scrollbars. Maybe you are on a mobile device looking at a page designed for a much wider desktop screen.
All these maybes add up to lots of options for how wide a webpage might be, and it’s nice to know for sure that your unstated assumption that width of the device will be the width of the webpage holds true.
Next, we want to set the initial scale at which we view the page, and the minimum and maximum scales we can use to zoom-in or pinch-out on a phone screen. Generally, you want to know the content you have painstakingly designed will be seen at the scale you designed it for. Not too big, not too little. So you might think to set all scales to 1 (no zoom).
But, it is important to allow people with impaired vision to be able to zoom-in and see details. So, the recommended maximum scale is 5 (5x bigger, or 500% zoom).
The title and description elements we’ve covered control how your page is represented in Google search results.
Facebook (OpenGraph)
There are meta tags to control how your page is represented on Facebook:
<meta property="og:title" content="the title">
<meta property="og:description" content="the descritpion">
<meta property="og:type" content="article">
<meta property="og:image" content="image url">
<meta property="og:url" content="canonical url for page">Warning! Be sure to note that the <meta> attribute used for the property name is "property" (everywhere else the attribute is "name").
What’s interesting is that the word “facebook” is missing from all these tags. That’s because Facebook created the OpenGraph protocol, then used that.
OpenGraph is a way of creating structured data that can be used by other by anyone to create a representation of your page. Even though OpenGraph is used by Facebook, anyone could actually use it!
For example, LinkedIn and Pinterest, and to some extent Twitter, also use OpenGraph data.
There are meta tags to control how your page is represented on Twitter:
<meta name="twitter:card" content="a summary">
<meta name="twitter:title" content="the title">
<meta name="twitter:description" content="the description">
<meta name="twitter:image" content="url of image">
<meta name="twitter:url" content="canonical url of page">Robots-<meta> (SEO)
Moving back to how your page will look in search results, there is a vast body of knowledge related to search engine optimization (SEO). At it’s most basic, SEO starts with a robots <meta> tag.
The robots meta tag is not actually required if you want Google to show your page in search results. By default, Google will index your page, rank your page partly based on the pages you link to, and maybe even archive your page.
If you don’t want any of this behavior, use a robots meta tag to turn it off.
NoIndex
You might have pages you do not want to appear in search results. For example, you might have contact details somewere on your site that you would like people to be able to find after visiting, but not directly from Google by typing in your name.
To do that, use the noindex attribute:
<meta name="robots" content="noindex">NoFollow
Let’s say you have an article “10 spammiest websites on the internet that are terrible and bad”. In that case you will want to keep those sites from hurting the search ranking of your site; just because those 10 sites are terrible doesn’t mean *your* site is terrible. You site could be a *great* list of terrible websites!
The key to Google’s algorithm giving you good search results is that a page is ranked based on the rankings of pages that link to the page (in-bound links), and rankings of pages that the page itself links to (out-bound links).
Because those 10 terrible websites have bad rankings, because you linked to them, by default Google will assume you are terrible. It’s guilt by association.
In this case, you will want to explicitly tell Google not to ding you for the links on your site:
<meta name="robots" content="nofollow">But doing this also means you won't get any benefit from any links on your page either. (The "nofollow" attribute can also be applied to links individually, yet another topic.)
NoArchive
Google might save a copy of your website, and when someone clicks on your website in search results they will be directed to Google’s copy of your website.
This can be good or bad. On the good side, this means that your webserver doesn’t have to serve all those requests! For pay-as-you-go webservers, this is great: you don’t have to pay any computation or bandwidth charges for visitors to your page who received Google's archived copy. It also means that if your article gets internet-famous and millions of people want to read it, Google is far better equipped to handle that peak load than you are.
On the bad side, if your article has changed recently, everyone will get the old article in the search results. Also, if you do visitor analysis on the server-side (such as basic visitor counting), you won’t have any visitors to your server: everyone is getting Google’s archived version of your website. In case you don’t want Google to archive a copy of your site:
<meta name="robots" content="noarchive">Other Google <meta> tags
Here is a link to information on other tags that Google understands:
https://developers.google.com/search/docs/advanced/crawling/special-tags
Combining Tags
Tags can easily be combined:
<meta name="robots" content="noindex, nofollow, max-snippet:20">Other <meta> Tags
There are many other useful meta tags. Some are:
- Author-<meta>
- Keywords-<meta>
Conclusion
If you want your site to work right and be represented in Google search results, all you need is:
- Charset-<meta>
- Title
- Description
- Viewport-<meta>
<meta charset="utf-8">
<title>Meta Tags-Best Practices</title>
<meta name="description" content="The best practices to use with HTML <meta> tags. Learn the basics of representing your page on search engines. Find out what you need to know!">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">
If you want your site to be represented differently in Facebook or Twitter, use the og and twitter tags:
<meta property="og:title" content="the title">
<meta property="og:description" content="the descritpion">
<meta property="og:type" content="article">
<meta property="og:image" content="image url">
<meta property="og:url" content="canonical url for page">
<meta name="twitter:card" content="a summary">
<meta name="twitter:title" content="the title">
<meta name="twitter:description" content="the description">
<meta name="twitter:image" content="url of image">
<meta name="twitter:url" content="canonical url of page">Finally, if you want to prevent your site from being indexed by search engines, or you want more specific behavior, like indexed but not judged based on outgoing links, then use a robots meta tag. But you probably want your site by index, judged by outgoing links, and archived. So by default, you don't need a robots <meta> tag.
The best way to work with meta tags is to see them in action. To see the meta tags for this page (in Google Chrome): inspect the page by pressing CTRL+SHFT+I, then look inside the <html> and the <head> tag.
Thanks a bunch for reading! And I would love it if you contacted me. Here’s how: Contact. If I got something wrong, or left something out, or maybe you would like help with something I wrote about, just let me know.