HTML meta tags: a practical and comprehensive guide to effective SEO management

SEO admin 25 July 2023 Reading time : 9 minutes

Put us to the test!

Analyze your site

Select the database

Invisible to users but vitally important to search engines, they are small content descriptors that help us tell crawlers what a page is about. More specifically, meta tags are areas of HTML code that contain information about a site and that specific page, and are therefore a key component in creating optimized web pages that are easily indexed by search engines. So let’s delve into what and what HTML meta tags are and why they are an important part of a sound SEO strategy.

What meta tags are

HTML meta tags are small snippets of text that serve to describe the content of a page for search engines: unlike other pieces of code or old tags that appeared (and sometimes still appear) in sites and especially blogs, in fact, these snippets only exist in the page code in HTML, do not affect the graphical layout and are not visible to ordinary readers except through the display in the source code (if used, in fact, meta tags appear at the top – the head – of the displayed content).

The extended name would be metadata and derives from the union of the words meta (from the Greek μετὰ “beyond, after, by means”) and data (Latin plural of datum “information”): it means that these tags give more information and data about the page to which they refer, and it is basically data on the page.

The meaning of HTML meta tags: the alphabet of SEO

Thus, meta tags are HTML elements that provide information about the content of a web page to search engines, and they are located within the <head> element of an HTML page.

Although they are not visible to the user visiting the page, they play a crucial role in indexing and ranking the site in search results, so much so that they are often referred to as the “alphabet of SEO“: just as the letters of the alphabet combine to form words and phrases, meta tags combine to create an overall picture of the content of a web page, which helps search engines understand what the page is about, who it should be shown to, and how it should be ranked in search results.

The syntax of meta elements: how meta tags are composed and how they are inserted

To use these elements correctly, we need to familiarize ourselves with their “grammar,” just as we do with the alphabet, and in particular, writing a meta tag requires understanding its syntax and structure.

It is then important to premise that meta tags are not formally coded: potentially, the webmaster can therefore use them at his own discretion, according to his needs, but each system processes only the meta tags it recognizes, while ignoring all others.

Basically, as mentioned, these HTML tags are located within the <head> element of a web page and are usually specified by two attributes: name identifies the type of information the tag is providing, while content describes the actual content of the tag.

From a formal point of view, therefore, a meta tag is to be added in the <head> section of the HTML page between the <HEAD> </HEAD> tags, does not require a closing tag, and appears written like this:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="Description" CONTENT="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price:  £9.24, Length: 784 pages">

    <meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>

    <title>Example Books - high-quality used books for children</title>

    <meta name="robots" content="noindex,nofollow">

  </head>

</html>

Formal grammar requires a name/value pair and at least two elements, namely the “name” “content” attributes, to which the third main element, “http-equiv”, is added.

Where Name is used to indicate the type of information contained in the tag and Content informs the content of the tag by determining the value to be assigned to the property preceding it, the data in http-equiv tells the browser that these are HTTP connection header (HTTP Headers) values.

An example of correct syntax

The basic syntax of a meta tag is as follows:

<meta name="name" content="content">

Where “name” is the type of information the tag is providing and “content” is the actual information. For example, a meta tag that provides a description of a web page might look like this:

<meta name="description" content="This is the description of my web page.">

In this case, the name attribute is “description,” which indicates that the tag is providing a description of the page, and the content attribute is “This is the description of my web page.” which is the actual description.

Some meta tags use a slightly different name attribute. For example, the viewport meta tag, which controls how a page is displayed on mobile devices, might look like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

In this case, the name attribute is “viewport” and the content attribute is “width=device-width, initial-scale=1,” which tells the browser to adjust the width of the page to the width of the device and to set the initial zoom to 1.

The guidelines for writing meta tags

Although it is not particularly complicated, writing effective meta tags is still a mix of art and science: these small snippets of HTML code, hidden within the <head> element of a web page, play a key role in communicating the content of our pages to search engines, and there are a few points to adhere to in order to ensure that we are including meta tags that are not only technically correct, but also SEO effective.

First, it is essential to understand the basic structure of a meta tag that we described above, which is only the beginning, however, because to write good meta tags we must also consider the content. Each page on our site should have unique meta tags that accurately reflect its specific content, and this applies in first to the title tag and description meta tag, which are displayed in search results and can influence whether users choose to click on our site or not.

Length is another key factor: search engines often cut title tags and meta descriptions that are too long, so in principle it would be important to try to keep title tags under 60 characters and meta descriptions under 160 characters. But we should not let length limit our creativity: a good meta tag should be concise, but also descriptive and engaging.

Finally, it is important to use keywords appropriately in the meta tags: keyword stuffing is discouraged and risky here as well, because the ploy of including an excessive number of keywords in an attempt to manipulate search engines can lead to penalties, but on the contrary, the inclusion of relevant keywords can help search engines understand the content of the page and rank it correctly.

What are the most important HTML meta tags

These HTML meta tag elements thus act as a bridge of communication between a site and search engines, but they are not of equal importance: indeed, over time some have become obsolete or otherwise less relevant to search marketing, partly as a result of the spread of structured data, which improves and simplifies the communication of information to search engines.

Anyway, there are some meta tags that are worth knowing and using to let Google know who we are and what we provide through our pages, and in particular:

Title Tag – is what search engines interpret as the page title (possibly unique for each page published), which is displayed at the top of the browser.
Meta description – is the brief description of the page that appears in the Google SERPs: appears in search engine results pages and, if well written, can entice users to click on the link and learn more about the content.
Meta Tag Robots – They are stop-and-go signals for search engine crawlers, which read these confidential instructions and adjust accordingly with respect to the opportunities they have to take and display content. For example, they can be labeled as “noindex” or “nofollow,” depending on how we want search engines to interact with the page.
Hreflang Tag – is an attribute that allows the search engine to identify the language and Country in which you want to view the content when you have an international audience.
Canonical tags – serves to specify the main or preferred version of a page.
Meta Tag Keywords – These tags contain a number of keywords relevant to the content of the page. Although their value for SEO has declined over the years, they can still provide useful context for content.
Viewport tag – This attribute controls how content is displayed on mobile devices, ensuring an optimal user experience on all devices.
Open graph tags – These tags determine how content is displayed when it is shared on social media, affecting the image and title that are displayed.Basically, they allow you to determine by default which resources are displayed in the title, description, and imagewhen you share links on social media.

Meta Tags and Google: instruction acknowledged by Google

Google pays special attention to the general definitions of meta tags, with a specific page that introduces the topic and clarifies what are the elements that Googlebot actually recognizes: it is right here that we read that “Page-level meta tags are an excellent tool available to website owners to provide search engines with information about their sites“, and can be used “to provide information to all types of clients“.

To get a clear picture, we can say that Google definitely recognizes these meta tags – the list is not complete, but the guide points out that “Google will ignore meta tags it does not recognize”:

<meta name=”description” content=”A description of the page” />

It is a brief description of the content of the page that, writes Google, in some situations “is used in the snippet visible in the search results”.

<meta name=”robots” content=”…, …” />
<meta name=”googlebot” content=”…, …” />

They allow you to control the behavior of scanning and indexing by search engines. The <meta name=”robots” tag applies to all search engines, while the <meta name=”googlebot” tag is specific to Google. In the case of conflicting meta tag robots (or googlebots), the more restrictive one is applied. For example, if a page has both max-snippet:50 and nosnippet tags, the nosnippet tag is applied. The default values are index, follow and should not be specified.

<meta name=”google” content=”nositelinkssearchbox” />

When users search for a site, sometimes in the Google Search results a specific search box for that site and other direct links to its pages are displayed: this tag tells Google not to show the sitelink search box.

<meta name=”google” content=”notranslate” />

When Google acknowledges that the contents of a page are probably not in the language used by the user, it often provides a link to a translation in the search results; generally, this allows you to offer exclusive and attractive content to a much wider group of users, but situations may occur where it is not appropriate. This meta tag informs Google that we do not intend to provide a translation of the page.

<meta name=”google” content=”nopagereadaloud” />

It prevents web browsers from reading the page out loud using the Google Assistant’s voice commands “Read this page” and “Read”.

<meta name=”google-site-verification” content=”…” />

We can use this tag on the top-level page of the site to verify the property for Search Console. The values of the attributes name and content must correspond exactly to those provided (respecting lowercase and uppercase), but it is irrelevant if we modify the tag from XHTML to HTML or if the tag format corresponds to the page format.

<meta http-equiv=”Content-Type” content=”…;
charset=…” />
<meta charset=”…” >

This code defines the type of content and the character set of the page.

<meta http-equiv=”refresh” content=”…;
url=…” />

This tag directs the user to a new URL after a certain period of time and is sometimes used as a simple form of redirection. However, it is not supported by all browsers and may confuse the user, to the point that the World Wide Web Consortium (W3C) does not recommend using this tag (better replace it with a redirect 301 server side).

<meta name=”viewport” content=”…”>

This tag tells the browser how to show a page on a mobile device. The presence of this tag indicates to Google that the page is optimized for mobile devices.

<meta name=”rating” content=”adult” />
<meta name=”rating” content=”RTA-5042-1996-1400-1577-RTA” />

Allows you to indicate that a page includes adult content so that it is filtered by Safesearch results.

Among the aspects to consider, the official document of Mountain View recalls that Google can read meta tags of the HTML and XHTML type, regardless of the code used on the page, and that generally meta tags are not case sensitive, so the use of upper and lower case letters is irrelevant (except google-site-verification).

Meta Tags and SEO, why they should be used properly

If used correctly, meta tags can potentially help improve a site’s visibility in search results and increase organic traffic, and more generally affect the way a site appears in SERPs and the engagement of people and their clicks.Thus, it is understood that they can have relevant value for SEO, and in particular titles and descriptions are crucial elements for capturing clicks and thus have a potential impact on clicks and engagement rates.

They are not a direct ranking factor and do not have a direct impact on rankings, but they can still affect the way the site appears within the digital ecosystem, as well as representing a source of information for visibility in non-traditional search results, such as Knowledge Graph, Google image search, voice and more.

In general, a good SEO strategy must take care of optimizing these elements because they can help Google to better understand the type of content proposed and improve the experience provided to users, especially from mobile. Other tags, and in particular the Robots and hreflang tags, are crucial for an optimal management of the content to be indexed or to be conveyed to people in certain countries and a careful use of meta tags ensures that our content is indexed appropriately and displayed to the right audience, avoiding problems such as duplicate content or served to users of wrong countries, which can damage the ranking and reputation of the site.

In short, meta tags are like a business card for search engines: they provide a summary of the page content, allowing search engines to understand what the page is about and to rank it correctly in search results. Of course, they are not all equally useful and it is essential to apply them correctly and thoughtfully, avoiding excessive or manipulative optimization techniques that could lead to penalties but, in principle, it only takes a little practice to master the art of managing meta tags to improve site visibility, increase traffic and provide a high-quality user experience.