What are HTML meta tags for?

Question

I would like to know the usefulness of meta tags of HTML. And if there is any book that could recommend me about them, because I wanted to understand more about this subject. It can be in English or Spanish, but if you have it in Portuguese too, it would be great.

Answer 1

It has no specific use, there are tags used by browsers, for SEO, for social networks, and until they are only used internally by the site developer himself, examples of use by browsers:

• Zoom on mobile systems (or with support for this, such as some touch computers): <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

• Redirecting: <meta http-equiv="refresh" content="<TEMPO PARA REDIRECIONAR>; URL='<URL DE DESTINO>'">

• To force a specific charset: <meta charset="UTF-8">

• A meta tag with several uses is the: http-equiv (the meta tag with this attribute has so many uses and ranging from browsers it can be a bit tricky to talk)

Remember that there are meta tags that only work in specific browsers, as they were created for that browser, as inside http-equiv there is the X-UA-Compatible which was specifically used in Internet Explorer 9 and 10, for example:

<meta http-equiv="X-UA-Compatible" content="ie=edge">

Here I explain a lot about the X-UA-Compatible and DOCTYPES:

What is the function of the X-UA-Compatible meta tag within HTML

There are meta tags that usually do nothing in the browser, but serve other tool purposes, such as:

<meta http-equiv="Content-Language" content="pt-br">

That will not translate your site obviously, but serves to facilitate other tools or search engines identify the language of your page in a "explicit" way, ie you will already be informing the language of the page, I explained more about this at:

lang difference and meta charset in html

Another example is the tag <meta name="csrf-token" content="{{ csrf_token() }}">, used by laravel framework (and probably other frameworks), technically in HTML it does nothing directly, it is created by the developer himself and used later via Javascript by the developer himself as well:

And to catch:

document.querySelector('meta[name="csrf-token"]').getAttribute('content');

Or jQuery to set up all Ajax calls from the current page:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

It is worth remembering that you may even give another name to this tag, but even with a different name I must point out (avoiding a little of the subject of the question), that this technique of "anti-csrf" is not an efficient technique and easily can be circumvented, a few more details on:

How to hide the token generated in the url by the variable

META tags in SEO

A use to facilitate external tools, as I mentioned on the lang, is the use in SEO, ie facilitate searchers like Google, Bing, etc identify certain content on your site pages, such as meta tags, for example:

Define what a BOT (from a search engine) can do about the contents of a specific page, example to prevent indexing:

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

Set the description of the current page to appear when the result is shown in google (usually quite poorly used by developers):

<meta name="description" content="Foo bar baz"/>

An example of a group of tags are the "GEO", can be used by indexers who point a page as having a physical location, as a trade, but which are used by a search engine Bing also (google I believe does not use this), example:

<meta name="geo.position" content="latitude; longitude">
<meta name="geo.placename" content="Nome do local">
<meta name="geo.region" content="detalhes da localização, como endereço, bairro">

There are tags that today have little or no relevance to SEO, like Keywords, more details on:

How to use Keywords in google currently?

Another example of tag that can even be used, but has little or no effect is the <meta name="revisit-after" content="15 days">, which should serve to indicate the average that the content of a specific page on your site has updated, ended up as most meta tags for SEO, being misused by developers, has a little more detail on it in:

How to change google’s cache to a redesigned website

Open Graph, the tags for social networks

There are also the tags OG (Open Graph) which aims to facilitate obtaining images, texts, information of the author of the text at the time of sharing on social networks (such as Twitter and facebook), messengers (such as Telegram and Whatsapp) and other programs, example of use:

<meta property="og:title" content="The Rock">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg">

Of course this is a basic example of what IMDB probably uses, for more details on how to use the site: https://ogp.me/

---

To summarize, there is no way to enumerate everything that Meta tags can be used, because there are things that are technical, other that are only for data and third party use, what matters is to understand that the use may vary and will depend on what you want to do and even which third party services will use the tag

For example, there are systems that use a meta tag on your site to validate a service, such as "google search" and Bing, which may have more than one means of validating whether the site is yours (or you manage it) with the tag:

<meta name="google-site-verification" content="<sua chave>">

I quoted google because it is the only one I remember, but there was a service I used in a company once that to link the site needed a specific META tag from them, there is no way to quote because each third party service can create its own META tag (although today most validations are solved in the back end without any interaction with the user and browsers)

Answer 2

If I understand your question, the tags indicate to the browser some "settings", for example the type of spelling that it should use. this specifically indicates that you will use the characters known as accents, strokes among others, if you do not specify this tag in your HTML and put a title with accent, will be all disfigured. There are others that indicate to the search "robots" the description of the page, the author among others.. as the colleague mentioned, on the site w3schools you find the documentation you need.