3

Eu gostaria de saber qual a utilidade das meta tags do HTML. E se existe algum livro que poderiam me recomendar sobre as elas, pois queria entender mais sobre esse assunto. Pode ser em inglês ou espanhol, mas se tiver em português também, seria ótimo.

2
  • recomendo a leitura de w3schools.com/tags/tag_meta.asp
    – carlaodev
    Commented 1/06/2020 às 0:41
  • 2
    Eu nunca achei w3schools bom, antes era pior, hoje um pouco melhor, mas bom não é, pra quem tem uma certo entendimento um ou outro código lá até ajuda, pra quem esta começando é um lugar ruim de se aprender, fora que os textos de documentação deles são 10% do que são os textos dos sites oficiais, como mysql, as páginas que falam sobre mysql no w3schools são fraquissimas e muitas vezes mostram forma que até podem levar indiretamente ao sqlinjection pra quem não entende disto, já os textos no site oficial do mysql são bem claros e instrutivos.
    – Syzoth
    Commented 1/06/2020 às 2:06

2 Respostas 2

5

Não tem uso especifico, existem tags usadas por navegadores, para SEO, para redes sociais, e até que são usadas apenas internamente pelo próprio desenvolvedor do site, exemplos de uso por navegadores:

  • Controlar o zoom em sistemas mobile (ou com suporte a isto, como alguns computadores com touch): <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

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

  • Para forçar um charset especifico: <meta charset="UTF-8">

  • Uma meta tag com diversos usos é o: http-equiv (a meta tag com este atributo tem tantos usos e que variam de navegadores que pode ser um pouco complicado falar)

Vale lembrar que existem meta tags que só funcionam em navegadores específicos, pois foram criados para aquele navegador, como dentro de http-equiv existe o X-UA-Compatible que era especificamente usada no Internet Explorer 9 e 10, exemplo:

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

Aqui eu explico bastante sobre o X-UA-Compatible e DOCTYPES:

Qual é a função da meta tag X-UA-Compatible dentro do HTML

Existem meta tags que geralmente não fazem nada no navegador, mas que servem para propósitos de outras ferramentas, como:

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

Que não vai traduzir seu site obviamente, mas serve para facilitar que outras ferramentas ou buscadores identifiquem o idioma da sua página de forma "explicita", ou seja você já estará informando o idioma da página, expliquei mais sobre isto em:

Diferença de lang e meta charset em html

Outro exemplo é a tag <meta name="csrf-token" content="{{ csrf_token() }}">, usada pelo framework Laravel (e provavelmente outros frameworks), tecnicamente no HTML ela não faz nada diretamente, ela é criada pelo próprio desenvolvedor e usada posteriormente via JavaScript pelo próprio desenvolvedor também:

E para pegar:

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

Ou jQuery para configurar todas chamadas Ajax da página atual:

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

Vale lembrar que você poderá até dar outro nome pra esta tag, mas mesmo com nome diferenciado devo ressaltar (fugindo um pouco do assunto da pergunta), que esta técnica de "anti-csrf" não é uma técnica eficiente e facilmente pode ser contornada, alguns detalhes a mais em:

Como esconder o token gerado na url pelo laravel

META tags em SEO

Um uso para facilitar ferramentas externas, assim como citei sobre o lang, é o uso em SEO, ou seja facilitar os buscadores como Google, Bing, etc identificarem certos conteúdos em suas páginas de seu site, como as meta tags, por exemplo:

Definir o que um BOT (de um buscador) pode fazer sobre o conteúdo de uma página especifica, exemplo para impedir de indexar:

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

Definir a descrição da página atual para que apareça quando o resultado é mostrado no google (geralmente bastante mal usada pelos desenvolvedores):

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

Um exemplo de grupo de tags são as "GEO", podem ser usadas por indexadores que apontam uma página como tendo uma localização física, como um comercio, mas que são usadas por um buscador o Bing também (google creio que não usa isto), exemplo:

<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">

Existem tags que hoje tem pouca ou nenhuma relevancia para SEO, como a keywords, mais detalhes em:

Como usar keywords no google atualmente?

Outro exemplo de tag que pode até ser usada, mas tem pouco ou nenhum efeito é o <meta name="revisit-after" content="15 days">, que deveria servir para indicar a média que o conteúdo de uma página especifica em seu site tem atualização, acabava como a maioria das meta tags para SEO, sendo mal usada pelos desenvolvedores, tem um pouco mais de detalhes sobre ela em:

Como alterar o cache do google para site reformulado

Open Graph, as tags para redes sociais

Existem também as tags OG (Open Graph) que tem como propósito facilitar obter imagens, textos, informação do autor do texto no momento de compartilhar em redes sociais (como Twitter e facebook), mensageiros (como Telegram e Whatsapp) e outros programas, exemplo de uso:

<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">

Claro que isto é um exemplo básico do que provavelmente o IMDB usa, para mais detalhes sobre como usar acesse o site: https://ogp.me/


Pra resumir não tem como enumerar tudo o que as METAs tags podem ser usadas, porque existem coisas que são funcionamento técnico, outro que são apenas para dados e uso de terceiros, o que importa é entender que o uso pode variar e dependerá do que pretende fazer e até de quais serviços de terceiros irão usar a tag

Por exemplo, existem sistemas que usam uma meta tag em seu site para validar um serviço, como o "google search" e o bing, que pode tem mais de um meio de validar se o site é seu (ou você o gerencia) com a tag:

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

Citei o google porque é o unico que me recordo, mas havia um serviço que usei em uma empresa certa vez que para vincular o site precisava de uma META tag especifica deles, não tem como citar porque cada serviço de terceiro pode criar sua própria META tag (apesar de que hoje a maior parte das validações é resolvida no back-end sem interação alguma com o usuário e navegadores)

2

Se entendi sua pergunta, as tags indicam ao navegador algumas "configurações", como por exemplo o tipo de ortografia que ele deve utilizar. essa especificamente indica que você vai utilizar os caracteres conhecidos como acentos, traços entre outros, caso você não especifique essa tag no seu HTML e colocar um título com acentuação, ficará todo desconfigurado. Existem outras que indicam aos "robôs" de pesquisa a descrição da página, o autor entre outros.. como o colega citou, no site w3schools você encontra a documentação que precisa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .