Meta Tags for SEO: Complete Guide for Beginners
What Are Meta Tags and What Are They Used For
Meta tags are parts of HTML code that provide site information to search engines. Some meta tags are visible to users (for example, title) but most of them are designed to help the search robot to correctly rank and display pages. It’s rather difficult to group meta tags into the same category since they all have different functions. Correctly prescribed meta tags are the basis of good SEO. in this article, we will talk about the functions and importance of each tag separately.
List of Meta Tags
Before you go any further, you need to understand the term “relevance” in SEO. It will often be found in the article, and it is important to understand what is at stake.
SEO relevance is the degree of relevance to a search query. Search engines sometimes have difficulties with this, since the same word has different meanings. Golf, for example, can mean a sport, clothing, or a car.
Let’s move on to the main meta tags that are important for SEO:
This tag is used as the page title in the search results of Google and most other search engines.
Google can ignore this and give out another text in the title if it seems that the title is irrelevant.
The title is the most important detail for providing the user with a quick understanding of what information is contained on the page and how it relates to one’s search query.
Often, the title is the only information that a person uses to decide whether to click on the link or not. That is why headings need to be given special attention, as Google states in its instruction.
For a search engine, it is imperative that the user can quickly receive the relevant page on request.
If users don’t find the information they need when visiting a page, they may leave the page and Google will lower the page its search results.
How to make the title
Create a unique title for each page by avoiding common phrases.
Keywords should be used only if they look organic in the heading. To begin, the headline should attract the user and motivate them to click on the link.
The optimal length of the title tag is 60-70 characters. It is not recommended for it to be shorter since you are losing a valuable resource. If you write more, the text will be cut off in the search results:
In the source code, the title, like all meta tags, is written in <head> </head>.
<title> Blog – SeoQuake </title>
The description meta-tag describes the content of the page; Google often uses it in a snippet if it is relevant to the page.
Google writes in its instructions that the description is not taken into account when ranking but it still remains an important part of search engine optimization, as it can appear in a snippet and affect the user’s decision to click on the link.
How to write a meta description
Use a unique description for each page by avoiding vague phrases.
Try to clearly describe the content of the page. If the user cannot understand whether the page is relevant to their request, they are unlikely to follow the link.
The recommended description length is 160 characters.
Here is what description looks like in the source code:
<meta name=”description” content=”Mobile search in 2020 is more important to SEO than ever. This article will help you learn how to optimize your site and attract more users.” />
More information in the How to Build a Nice Meta Description article.
The keywords meta-tag has not affected ranking since 2009. This is because this tag was too often used for other purposes such as indicating irrelevant keys.
Google’s official statement on this topic, in which Matt Cutts answers user questions, is as follows:
Despite the fact that Google has been ignoring keyword tags for 11 years, they are still registered on some sites.
The tag is used to set the visible area of the page on different devices.
The instructions from Google state that this tag tells the search engine about the adaptability of the page. For search engines, design adaptability is important. Since 2019, traffic from mobile devices is 50% of all traffic on the Internet.
Correctly adjusting the viewport is not all that needs to be done to create a responsive design on the page, but it is better than nothing. Read more about responsive design and mobile-friendly in the article Mobile Search.
Responsive design is important not only for SEO as not having a convenient version of the site for mobile devices. You lose about half of the potential customers.
Given that Google tracks behavioral factors, you lose your position in search results.
Here’s how meta viewport looks like in source code:
More about the attributes of this tag:
- Width – sets the size of the viewport, the value in pixels (for example, width=1080). You can set a special value – “device-width”, which means the width of the screen in pixels. There is a similar “device-height” value, but it should be used if there are elements on the page that change their size depending on the height of the screen.
- Initial-scale – sets the level of scalability at the first boot. The attributes “maximum scale, minimum scale, user scalable” specify how much the user is allowed to enlarge or narrow the page.
The standard version of the tag (as in the screenshot above) is suitable for most pages. Use it if you have nothing unusual on the page.
The alternative image text tells the search engine what is shown in the image. Well-optimized alt tags can bring you traffic from Google image search.
You can place keywords in this description but the most important is the relevance of the description to the image. Do not overload alt with keywords.
Alt is written in <body> after the image link. Most CMS have convenient tools for adding alt tags, and you do not need to work with the source code of the page.
Users will be able to see alt on the site only if they disable the loading of graphic content in the settings, or in the case when the page is not fully loaded.
However, in the image search, this tag is pretty easy to see. Read more about SEO images.
rel=”canonical” exists to solve the problem with duplicate content.
If a search robot encounters duplicate content, it has to decide which page should be in the search results, since only one of the duplicates can be there.
Finding duplicates causes the search engine to spend a scan budget, which is why your unique content may go unnoticed. This is especially if the site is large.
Canonical tells the search engine the source page that the owner wants to see in the search results. If this tag is missing, Google selects the page on its own. It is better not to allow this.
Read more about duplicate content and how to avoid it in the Rel=Canonical Tag article.
This tag tells the search engine the detailed page settings on which indexing and appearance in the search results depend. Meta robots have two commonly used attributes: follow/nofollow and index/noindex
The “index” attribute indicates that the page needs to be indexed, and “noindex” indicates that there is no need to index.
The follow and nofollow attribute indicate whether it is necessary to scan links on the page.
If you need to allow scanning the page and following the links – it looks like this:
<meta name = ”robots” content = “index, follow”>
If you need to prohibit scanning the page and links:
<meta name = ”robots” content = “noindex, nofollow”>
They can be combined depending on your tasks.
The absence of meta robots actually means “index, follow”. Google says that “nofollow” is a hint and not a directive, which means it can ignore it.
Important tips for using meta robots:
- You can disable indexing in robots.txt. Meta robots are used for finer tuning (you can prevent indexing of page content and allow link scanning, etc.). The main thing is that robots.txt and meta robots do not contain is conflicting instructions. Otherwise, the robot will have to decide for itself which of the instructions to follow.
- Use it when you need to prohibit indexing a page or indexing links on a page.
Now a little information about other meta robots attributes that are not used so often:
- None – includes “noindex, nofollow”;
- Noarchive – prohibits showing the cached copy of the page in the search results;
- Noimageindex – prohibits indexing pictures on the page;
- Notranslate – prohibits Google from offering a page translation in search results;
- Nosnippet – all text and video content on the page will not be shown in the search results;
- Max snippet – allows you to set a limit on the size of the content.
In this meta tag, “robots” is an attribute. By registering it, you give instructions for all search robots. This can be configured more clearly by specifying the name of the desired bot instead of “robots”.
The standard Google search robot is called “GoogleBot.” If the instructions are created only for it, it will look like this:
<meta name=”googlebot” content=”noindex” />
If you want to make the page appear in search results but not appear in Google News, you can go to googlebot-news and it looks like this:
<meta name=”googlebot-news” content=”noindex” />
A list of Googlebots can be found in their official instructions.
This tag is useful if the site has several language versions. Hreflang aims to tell Google which language version to show users from different countries.
If you have a page in English and Spanish and a user from Spain searches for your site in English, then, Google will offer them a version in Spanish.
Hreflang does not directly affect rankings, but it can significantly reduce the bounce rate and increase conversion. It will be more convenient for the user to use the site in their own language.
Hreflang is a hint for a search robot. This means that other ranking factors may affect the fact that another page will have a higher ranking.
In official instructions, Google says that the search engine itself can determine the appropriate language for different geolocations, but it is advisable to use hreflang.
Tips for using hreflang:
- Hreflang on each page must link to itself, as well as to all alternative pages.
- Google uses the ISO 639-1 format for marking up languages and countries. Before registering hreflang, check if it is correctly indicated in the markup (in this format, the UK is GB and not UK).
- If the page asks the user to choose their preferred language or does not have a target orientation, you can use x-default, in the source code it looks like this:
<link rel=”alternate” href=”website.io” hreflang=”x-default” />
Hreflang can be prescribed in three ways:
- The HTML meta tag discussed above is indicated in the <head> of the page.
- HTTP header in response to a request for a GET page. Google recommends using this option for files other than HTML such as PDF.
- Sitemap file. Using the “loc” element, indicating the page URL in it, and in the child tags “xhtml:link” links to language versions, including the page itself.
Meta charset tells the browser how the text should be displayed on the page.
Problems with character encoding on the page will not harm you, but it will lead to negative behavioral factors: a high percentage of failure, low latency on the page, etc.
In addition, you will lose users who might stay. Google recommends using Unicode/UTF‑8 wherever possible.
More information in their document on this topic.
Meta Author and Copyright
The function of these tags is to inform the author of the content or whether the content belongs to an organization.
Author – author’s indication
<meta name=”author” content=”Fraser Raimond” />
Copyright – an indication of the organization to which the rights of the document belong.
<meta name = “copyright” lang = “en” content = “Seoquake” />
These tags have lost their relevance and are rarely used.
This tag forces the browser to redirect the user to a different URL after a set time.
<meta http-equiv=”refresh” content=”time; website.io”>
Where “time” is written, you need to specify the time before moving to the next page. You can specify 0 and the redirect will go without delay.
Try not to use this redirect without extreme need. In most cases, it is better to use a 301 redirect. More information on the topic in the 301 vs 302 redirects article.
Meta refresh redirect is not supported by all browsers. It is not the most pleasant experience for the user and can cause security problems.
How to add meta tags to your website
All meta tags are registered in the <head> section of the source code. Each CMS has its own tools for adding meta tags and we will talk more about them later.
It is also worth mentioning that many meta tags cannot be configured in the CMS because they are configured by default (viewport, charset).
- On the toolbar, find the line “Edit Site.”
- Then find “Site Menu.”
- Open page settings (more – settings).
4. Find the “Advanced SEO” tab and scroll to the line “SEO features.”
Here, you can add your meta tags for a page.
The way you change meta tags in WordPress depends on the plugin you choose for the site.
Let’s consider adding meta tags to Yoast.
To be able to customize more than the the title and description in Yoast, you need to enable advanced settings.
To do this, go to the Console – Security tab.
How to audit meta tags
Auditing tags manually will be quite difficult, so it is worth using specialized services for this. Most of them have good functionality for audits (SEMrush, Screaming frog, ahrefs, etc.).
The Google Search Console may show some errors, but I recommend conducting regular audits of your site in the service of your choice.
Talking in detail about audits with the help of tools makes little sense. The services analyze your site and will issue a report with the errors found. The audit does not require any necessary actions from you. Learn more in the Technical SEO Checklist article.
The only problem is to fix errors that the services will find; this is exactly why the article was written.