SEO has a range of technical components including snippets of code nestled into your web pages. One of the most important groups of HTML code snippets for SEO are meta tags. These seemingly inconspicuous tags give important instructions to search engines about the information on your web pages.
There are over 50 different meta tags but not all are vital for SEO. So, to get you started and to give you a solid introduction, I explain the most important meta tags below and how you can optimise them for your web content to boost search engine rankings.
Meta Tags – What Are They and Why Are They Important?
A meta tag is a string of HTML code nestled in the header section of your web pages. Meta tags give valuable insight to search engines and users about the content on each page.
A meta tag typically has two core components – the name and content sections. The name= section is used to define the meta tag type, while the content= section is the actual information. This holds true for most meta tags but there are some exceptions such as meta http-equiv= tags.
These code snippets give clear instructions to search engines instead of leaving things to chance, and as you will see below, you can include important components like keywords to further bolster your SEO effectiveness.
Title Tag – The Title of Your Web Page and a Brief Description
The title tag is the Holy Grail of meta tags. It’s the starting point and the most important tag you need to understand. Search engines like Google use the title tag directly in search engine results and it’s usually the string of text that is converted into the link to your content.
A title tag gives users a short and snappy overview of the web page’s content. They should be able to look at the title tag and quickly discern if the page has what they want. Google uses meta title tags as a ranking factor, and there are some best practices you should observe:
- Every web page must have a unique meta title tag.
- It should be no longer than 60-65 characters.
- Your target keyword should be included at the start (but it must be logical in the context).
- The title should be short, snappy, and informative.
- Write the title tag in title case.
We can see an example title tag below:
<meta name=”title” content=”Meta Tags Explained – The Ultimate Guide | Key Principles”>
This title tag is 57 characters, uses the target keyword “meta tags” at the start, and explains clearly what the user can learn by reading the article. Note how I’ve used title case as well as including the brand name at the end of the title tag. If you are unsure how title case works, you can use capitalizemetitle.com which automatically formats text into this case.
Meta title tags are incredibly useful for local SEO too as you can include location-specific keywords so users immediately know your business services their area.
Description Tag – A Longer Description That Gives More Insight Than the Title Tag
In our free SEO guide we delve into the meta description tag and it’s another especially important component for each page. This tag gives a longer summary of the web page’s contents. Where a title tag is typically limited to 65 characters, the description tag is usually 130-160 characters.
The aim is to provide more information than the title tag gives so that users and crawlers understand what the page is about.
The meta description tag is often displayed in Google search engine result snippets underneath the website link. However, it’s important to note that Google doesn’t always do this. Instead, it could chose to show a snippet of the first paragraph of text, for example.
Regardless, the description tag is important to include on each web page with the following best practices:
- Every web page must have a unique description – don’t copy and paste.
- The description must reflect the content and purpose of the web page.
- Try and include your target keyword near the start of the description.
- Make the description length between 130-160 characters.
- Write the description as a proper sentence, not a series of statements.
I have created an example meta description below:
<meta name=”description” content=”Learn the importance of meta tags for SEO including how they work, the most common options to use, and best practices for implementation.”/>
This description could be used for this blog – it is 136 characters, uses the important keyword “meta tags”, and explains exactly what the user can expect from reading the article.
Robots Tag – Instructions to Crawlers on How They Should Access Your Pages
After the title and description tags, the meta robots tag should be addressed asap. You must also be incredibly cautious when using this tag. If you use it incorrectly it can have a negative impact on your SEO.
This is because the robots tag is telling search engines how to access and crawl your website. Therefore, if those instructions are wrong, the crawlers could miss pages, or fail to access your website at all.
The meta robots tag has four key values:
- Index: This tells the crawlers to index the web page.
- Noindex: This tells bots to ignore the page and not index it.
- Follow: This tells crawlers to follow any links on the page and that you “endorse” them.
- Nofollow: This tells bots not to follow any links on the page and that you don’t “endorse” them.
Any of these four values can be combined in pairs such as:
<meta name=”robots” content=”index, follow”>
In this example, the meta tag is telling crawlers to index the web page and follow any links on it. I generally advise to only use the robots tag if you don’t want Google to crawl a page.
For example, you may have a customer login page that contains no keywords or useful SEO elements. By using the noindex tag for this page, you can ensure crawlers don’t use their limited search time indexing this page but instead crawl your SEO-rich content.
Aside from restricting crawler access, make sure that you perform regular audits to check for rogue meta robots tags that could be negatively impacting crawler access.
Refresh Redirect Tag – Avoid Unless Necessary
The refresh redirect tag is supported by Google, but I advise not using them. Still, it’s important to understand what this tag is and how it works.
The refresh redirect meta tag tells a browser to send the user to a different website address after a specific period. This can be useful to fix broken links and for URL changes, but there are more efficient ways to do this such as 301 redirects and these should always be used instead.
Charset Tag – Defines the Character Encoding for Your Web Pages
Unless specified, different web browsers may display the text of your web pages differently. This can result in a disjointed website that looks different to different people. The simplest way to avoid this is to use the charset meta tag.
The meta charset tags allows you to tell web browsers exactly which character encoding to use for the text on your website. The list of potential charsets is vast, but two common options are typically used:
- ISO-8859-1
- UTF-8
Other examples include US-ASCII, Shift_JIS, EUC-JP, and Big5. Aside from creating uniformity for your web pages across all browsers, defining the character encoding also ensures that there are never any display errors.
For example, if the encoding is not defined, certain text characters might display as other letters or symbols, making your content unreadable. I advise sticking with UTF-8 as it’s the most universally accepted character encoding. The code for the meta charset tag is as follows:
<meta charset=”UTF-8″>
Please note that this is the correct format for HTML5 (the latest HTML code version). If your website is using HTML 4 or older (it shouldn’t be), the code is as follows:
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
It’s worth noting that if you are using a content management system (CMS) such as WordPress or Shopify its highly likely that the charset tag has already been implemented on your website.
Other Important HTML Tags to Optimise
Meta tags are highly important, but there are some other key html tags that you must give equal attention too. These are heading tags and image alt tags.
Heading Tags (H1, H2, H3, etc.)
Heading tags are used in your web page content to break up walls of text and segment your writing into easy-to-read chunks. There are several best practices to remember when using heading tags:
- Always include a H1 tag for each web page.
- Break your content into logical sections using H2s and H3s.
- Make sure the headings have a logical flow from top to bottom.
- Include your target keyword in the H1.
- Include secondary keywords in H2s and H3s.
- Make sure the headings make sense and are relevant to the following paragraphs.
You can see in this article that I have used a clear H1 that describes the article content and followed this with a series of H2s that break up the text into digestible blocks. I then use H3s where appropriate if I feel there is an important subject that needs emphasising within the H2.
Image Alt Tags
Any image you use in your web content should have an alt tag. This is alternative text that should describe what the image is. The html code for an image with an alt tag is as follows:
<img src=”image file path” alt=”description of image”>
Alt tags are vital for accessibility and for use with screen readers. For example, if someone who is visibly impaired views your web page, a descriptive alt tag can be read by a screen reader and they can still benefit from the content.
Additionally, alt tags can be used to strategically place keywords. However, it’s important that your alt tag primarily describes what the image is. If you can insert a keyword naturally in the alt tag, and it still makes sense, then do so.
For example, for the images used in this article, I could simply create alt tags that read “Meta tags explained” to reflect the primary keyword. However, that has nothing to do with the image’s content and this could result in a really poor user experience for anyone using a screen reader.
Meta Tags Are a Vital Part of SEO so Check Yours Today
You can learn more about different SEO techniques in our free webinars, but nailing meta tags is a fantastic starting point. Whether you use WordPress or a website builder like Wix, you should easily be able to edit meta tags. This could be directly in the HTML code, or finding the relevant toolbars on your CMS.
I advise looking into your meta title and descriptions tags first to make sure every web page has them. Next, using your keyword research, ensure the title and description tags are optimised and re-write them if necessary.
With your meta title and description tags optimised, you can look at the other meta tags such as robots. Please be aware that optimising your meta tags should be just one part of your SEO strategy.
You must consider other factors like technical SEO, on-page SEO, and PPC marketing to create a robust digital marketing blueprint. If any of this sounds daunting, or you don’t have experience with directly editing meta tags, please contact us and we can arrange a free strategy session and SEO audit to point you in the right direction.
