Meta tags are the foundation of HTML code, the building blocks of a good website.
They’ve been around for decades, and act as the interlocutor between you, search engines, and users – making sure there’s nothing standing in the way of your content distribution strategy. What’s more, they are an invaluable part of your SEO strategy, without which your content would be lost among the internet tubes, never to reach its true audience.
But with the internet growing every day and the number of web-building tools threatening to overwhelm website makers, it can be easy to not know what elements are worth your time. So many designers approach coding without a dedicated plan and end up wasting valuable time on elements that do not drive true value to your page.
As all industries become more focussed on their online presence, Meta tags are more important than ever. Search engine results are more flooded with competing sites than ever, and each is trying to rank on the first page. These types of tags are one of the only things enabling you to achieve that high ranking.
Of course, a website cannot thrive on meta tags alone. Great content is what wins users, and delivering customer satisfaction is what retains them. However, without SEO meta tags, no one will be able to find your great content and enjoy your optimum customer service.
Meta tags can even contribute to SEO in indirect ways. Google has admitted that user behavior is a consideration when ranking pages, meaning the search engine ranks highly any site which has a significant number of clicks. That means designing your content to be engaging to the visitor is half the battle, and meta tags are an important tool in achieving this.
Not all meta tags are created equal: some are more useful for modern applications than others, and some barely derive any value to SEO anymore. In some cases it’s down to what Google counts in its ranking and what it doesn’t. Anything that doesn’t count is a waste of your coding time. Here are nine top picks for indispensable tags that will help you rank high in searches, boost your click-through rate and streamline your web presence.
The meta content type tag is used to specify the type of media in your code. It’s what sets up the rest of the header section and it ensures your page displays as it should in all browsers, so it’s important to include whenever you’re coding.
Here’s an example of the tag. Edit the type of content depending on what you’re looking to display:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
This next meta element is an HTML element used to summarise your web page. Another element nestled in your header section, the summary is what comes up underneath your Title tag in Google searches, giving visitors an idea of what to expect from your page.
While the meta description isn’t one of the elements Google ranks in its searches, that doesn’t mean it’s not important for SEO. Think of it as your shop front: a sales pitch for why visitors should click on through to your site.
Descriptions can be between 150 and 160 characters long, though generally only 120 to 130 characters will show up in mobile searches. There’s no magic number for how long description should be, but it’s important to fill it with targeted keywords and a call to action to encourage users to click through. You want users to know that your page is answering the question they’re asking, but not give too much away that they don’t need to continue to your site.
Here’s an example of the meta description tag:
<head>
<meta name=”description” content=”This is an example of a meta description. It includes all the relevant information for your page. It can be up to 160 characters long.”>
</head>
The title tag is the opening act to your web page, the first HTML element that differentiates your web page to site visitors and search engines. It should be pretty clear already: a title is important.
Bear in mind there are some elements you can include in a title tag to improve your chance of search engine recognition and click-through rate. Embed your tags with keywords or better yet, long-tail keywords. These are three- or four-word keywords specific to your niche. Then again it’s important not to overdo it. The first word in your title tag should be your main keyword, and you shouldn’t overwhelm the reader with too many more.
Here’s what a title tag looks like:
<head>
<title>This is an Example of a Title Tag</title>
</head>
While there is no limit to the length of titles, the best length for your title tags is between 55 and 60 characters. This is mostly due to Google’s practices: they’ll only display 60 characters of any title before cutting off the rest. Stay below that threshold and you can be almost certain your title will display in its full glory.
If you’re really looking to maximize the number of characters displayed on Google, there is one trick you can employ. The search engine’s display system is dependent on pixels rather than strictly characters, meaning if you use lower case letters that take up fewer pixels (like i, l, t) you can fit more in than larger, caps lock letters (like M, W).
As for the number of words in a title, it depends on your aim.
“Titles engage differently depending on the platform. The most clicked-on links on Facebook have titles between 12 and 14 words, while the most popular on Twitter have between 8 and 12 words.”
Terrance Rattigan
Tech Writer, Writemyx and Britstudent
The canonical tag is used to help out the search engine when you have multiple URLs with the same content. Often your page might generate a number of URLs that all lead to the same place, rather than to copies of one original.
This can also be applied to pages with similar but not exactly the same content, to avoid dividing SEO efforts for one set of keywords across multiple pages. Without this tag, Google would return “http://your page.com and http://yourpage.com/index.php as different pages when they have the same content. This tag is also useful for automatically generated Session ID URLs, to make sure they are seen as canonical to your original page and not a new one.
Another instance this meta tag is useful is in tying mobile URLs to your page. Mobile pages are designated as such with an m. before the domain name. By including the canonical tag on your mobile code ensures that the mobile page is the same as the desktop page, only with different formatting.
Here’s how to insert the canonical tag into your code:
<link rel=”canonical” href=”http://example.com/” />
The alternative text tag is important to include around any images on your page. Search engines can’t read images, so they need alt text to know what’s on your page.
When creating alt text tags, the aim of the game is to be concise and informative. Make sure your text is clear and informative of what the image is and avoids extraneous or overly subjective language (avoid adjectives if possible). Alt text tags should be no longer than 16 words, between 50 and 55 characters.
When it comes to the image itself, use the original where possible and try not to degrade the quality of the image. This will ensure your page loads faster and keeps the search engines happy.
Here’s how to write an alt text tag:
<img src=”http://example.com/abc.jpg” alt=”abc” />
This meta tag is aimed at web crawlers, bots designed to sift through thousands upon thousands of web pages for indexing. The most common types of web crawlers are employed by search engines, so a robot meta tag is essential to include if you want your page to show up in web searches.
There are two main elements in a robot meta tag that command the web crawlers. FOLLOW tells a crawler to follow all the links on the designated page, and INDEX commands the crawler to index that page.
The command looks like this:
<meta name=”robots” content=”index, follow”>
If you have a page that you would not like a web crawler to index or follow, you can negate the above commands: NOFOLLOW and NOINDEX. The function is the same but in reverse. Google is well known for severely policing linking practice to avoid manipulation, so these functions are useful in avoiding a ranking penalty from the search engine. For example, you can set NOFOLLOW to paid or sponsored links, untrusted content or spam-risk content.
Also known as the responsive design meta tag, the viewport element can control the layout of web pages on mobile devices. Before mobile web surfing, all pages were designed for the standard dimensions of a desktop or laptop computer. Now that more and more users use a mobile device for the majority of their web use, it’s important to make sure your page is set up for these users.
Here’s the basic structure of the element:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
The most important element here is “width=device-width”. This sets the screen-width of your page to whatever device the user is on, making this tag a great catch-all solution for multiple devices.
The viewport is not directly associated with SEO performance, but it does affect the UI experience so it is an important factor in user retention. Website that doesn’t perform well on mobile will be avoided by millions of users, and your brand could be associated with outdated practices and a fiddly interface – definitely not something you want.
Open Graph is designed to integrate your page with another key aspect of audience outreach: social media. This tag does for social media display what Viewport does for device display and what Title tags do for SEO: it makes sure your content displays well and ranks high on social media.
These are quite dense tags, here are some examples:
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”This is the Title of Your Page or Post” />
<meta property=”og:description” content=”This is a Description of Your Page Content” />
<meta property=”og:image” content=”This is a Link to an Image” />
<meta property=”og:url” content=”PERMALINK” />
<meta property=”og:site_name” content=”This is the Name of Your Website” />
“These are slightly different from your typical SEO tags, but they add just as much value to your audience growth strategy. Tumblr took advantage of this in 2012 and saw their click-through rate increase by 250%.”
Solange Uhara
SEO Expert, 1Day2Write and Nextcoursework
Meta tags are and probably always will be essential in building any webpage, and at least for now they are the key to good SEO performance. The above tags are considered some of the most important to user experience and search engine ranking by designers all over the internet, so it’s safe to say your time will not be wasted on implementing them.
When it comes to other tags, take a moment to consider what you’re trying to achieve and whether its worth your time. Website design is a marathon, not a sprint, so pace yourself and make sure the work you do is always building towards positive growth for your site.
Become more skilled in all things SEO. Discover the right SEO software for your needs, and keep on top of the necessary components of a proper SEO strategy, meta tags and beyond.
Mildred Delgado is a marketing strategist at AcademicBrits. She works with marketing teams to create fully-functional sites that accurately portray companies and their values. Mildred presents her information via marketing proposals.
Technical SEO. A short phrase that has been known to strike fear into the hearts of SEOs and...
by Ken Marshall
One of the fundamental items when organizing an event is the event budget.
by Tiago Caramuru
In this post, we’ll break down the difference between PPC and CPC, describe how they work and...
by Kevin Kapezi
Technical SEO. A short phrase that has been known to strike fear into the hearts of SEOs and...
by Ken Marshall
One of the fundamental items when organizing an event is the event budget.
by Tiago Caramuru
Never miss a post.
Subscribe to keep your fingers on the tech pulse.
