What are HTML meta tags for?

I would like to know how useful the meta tags of HTML are. And if there is any book you 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 Portuguese too, it would be great.

Author: Thyago Erick Silva Gois, 2020-06-01

2 answers

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:

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

  • Redirect: <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 that vary from browsers that it can be a bit complicated to talk about)

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

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

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

Which it is the function of the X-UI-Compatible meta tag within HTML

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

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

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

Difference of lang and meta charset in html

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

And to catch:

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

Or jQuery to configure all Page Ajax calls current:

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

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

How to hide the generated token in the url by laravel

META tags in SEO

A use to facilitate external tools, as well as I mentioned about the lang, is the use in SEO, IE facilitate search engines like Google, Bing, etc identify certain content in your pages of your site, such as meta tags, for example:

Define what a bot (from a search engine) can do about the content 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 on google (usually rather poorly used by developers):

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

An example of a group of tags are the "GEO", they can be used by indexers that point out a page as having a physical location, such as a commerce, but that are used by a Bing search engine as well (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 for SEO, such as keywords, more details in:

How to use keywords on google currently?

Other example of a tag that can even be used, but has little or no effect is <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 Update, ended up as most meta tags for SEO, being poorly used by developers, has a little more detail about it in:

How to change Google cache to redesigned site

Open Graph, the tags for social networks

There are also tags OG (Open Graph) that 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 go to the site: https://ogp.me /


To summarize there is no way to enumerate all that the goals tags can be used, because there are things that are technical functioning, another that are only for data and use of third parties, 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 cited google because it is the only one I remember, but there was a service that I used in a company once that to link the site needed a specific META tag of them, there is no way to cite because each third party service can create its own META tag (although today most validations are solved in the back-end without any interaction]}

 5
Author: Guilherme Nascimento, 2020-12-04 22:44:38

If I understood your question, the tags tell the browser some "settings", such as the type of spelling 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, it 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 quoted, on the site w3schools you find the documentation you need.

 1
Author: Vinícius, 2020-06-01 01:12:04