O que é uma meta tag?
Se você já conhece algum HTML, provavelmente sabe o que é uma tag HTML. Uma tag é uma palavra especial entre colchetes angulares, o que torna muito legível para organizar as coisas em um documento de página da web. Aqui está um exemplo de tag HTML:
 |
Então essa é uma tag. Eles geralmente vêm em pares de abertura e fechamento como os mostrados no exemplo acima (por exemplo, <inserir tag>, </ inserir tag>). Uma meta tag é muito parecida com uma tag HTML normal, exceto que a palavra 'meta' significa 'sobre' (e não precisa de uma tag de fechamento, a menos que você esteja usando XHTML). O fato é que a maioria das tags HTML define ou contém dados reais que você pode ver no site, enquanto uma meta tag define algo 'sobre' dados (o que chamamos de metadados ) que você normalmente não pode ver .
Imagine que é Natal e você deseja manter um registro de todos os presentes que comprou para todos, mas não quer escrever nas embalagens. Você pode manter uma etiqueta de inventário para cada pacote. Bem, isso é o que uma meta tag também é. É um pouco de informação sobre a sua página web destinada à organização, ou alguma outra necessidade, sem ser visível para os destinatários. Igual a:
 |
Metadados são como texto oculto em páginas da web para que os usuários não possam vê-los, embora ainda estejam lá. Por quê? As páginas da web usam meta tags para que os mecanismos de pesquisa, robôs, rastreadores da web e outras coisas automáticas possam varrer as páginas da web e coletar as informações críticas necessárias para localizá-las ou organizá-las. Aqui está um exemplo comum de uma metatag muito útil, que foi inserida nos marcadores abertos e fechados da seção <head>:
 |
(Observe que as metatags não vêm em pares abertos e fechados. A meta informação está simplesmente contida em um colchete angular aberto no início e um colchete angular fechado no final. Consulte a seta verde na imagem acima.)
Como você pode ver, uma metatag sempre usa um par nome / valor , com o lado esquerdo do sinal de igual listando o nome ou rótulo, e o lado direito listando seu valor associado (por exemplo, nome = 'palavras-chave'). No exemplo acima, a meta tag 'nome' é pareada com o termo palavras - chave e a meta tag 'conteúdo' é pareada com as palavras metadados, lição html . É apenas uma maneira fácil de associar um rótulo a algo.
Esta meta tag específica lista as palavras-chave associadas à nossa página da web. Agora, quando os mecanismos de pesquisa examinam a página, eles encontrarão as palavras-chave 'metadados' e 'lição html' - mesmo que a maioria das pessoas que visitam a página não consiga ver essas palavras. Portanto, se alguém pesquisar por 'lição html', há uma boa chance de que veja nossa página listada em seus resultados de pesquisa. Legal, hein?
Tipos de metatags
Você gostaria de ver alguns outros exemplos de metatags? Vimos um para palavras-chave; também existem meta tags para o autor da página da web, a descrição do site e a última versão revisada da página (entre outros). Todas as nossas metatags vão na seção do cabeçalho (ou <head>), não na seção do corpo (ou <body>). Aqui está um exemplo dos três que acabamos de mencionar:
 |
Como você pode ver, na seção <head>, o meta nome de 'autor' é pareado com o conteúdo (ou o nome do autor neste caso) 'Sammy Sue.' As metainformações para a descrição do site e os detalhes da revisão vêm logo em seguida, seguidas pela tag de fechamento </head>.
Também podemos fazer algumas coisas complicadas com meta tags. Podemos dizer à nossa página da web para redirecionar o usuário para outro lugar, o que pode ser muito útil:
 |
Como você pode ver, na seção <head>, usamos a meta tag 'atualizar' e configuramos para três segundos. Após três segundos, o navegador do usuário os redirecionará para a URL que especificamos.
Podemos até usar uma meta tag para definir cookies (acompanhar o que os usuários fazem enquanto visitam nossa página da web e salvá-lo em seus computadores). Dessa forma, quando esses mesmos usuários visitarem nossa página novamente, eles podem continuar de onde pararam:
 |
Quando um usuário visita nossa página, a meta tag acima definirá um cookie, que tem seu nome de usuário (estamos usando 'sammy' para simplificar aqui) e que irá expirar em uma determinada data futura.
Meta tags especiais
Devemos mencionar que existem algumas tags supercomuns que não são tecnicamente meta tags. Meta tags são opcionais, enquanto algumas tags são consideradas obrigatórias de acordo com o W3C (que é o World Wide Web Consortium - elas garantem que temos algum tipo de padrão). Mas tenha em mente que os 'requisitos' do W3C são apenas diretrizes padrão e suas páginas não precisam segui-los (embora seja uma boa ideia tentar). O exemplo mais óbvio dessas tags especiais é a tag <title> localizada na seção <head>. Aqui está. Notou que tem uma tag de fechamento (</title>)?
 |
É isso aí! Você acabou de aprender a maior parte do que precisa saber para começar a usar metatags!
Resumo da lição
Devemos revisar rapidamente o que aprendemos hoje? HTML usa tags para agrupar informações e meta tags são um tipo especial de tag que lista informações sobre nossas páginas. Esta é uma informação que queremos compartilhar, mas não queremos que todos vejam. As tags regulares geralmente vêm em pares abertos e fechados (por exemplo, <head>, </head>), mas as meta tags não (a menos que estejamos usando XHTML, mas isso é para outra lição).
As metatags usam pares de nome / valor para associar um rótulo a um pouco de informação. Alguns dos tipos de meta tags são para palavras-chave , o autor do site , uma descrição do site e informações de revisão da página da web . Alguns truques interessantes que podemos fazer com meta tags incluem redirecionar os visitantes do site e adicionar cookies . É basicamente isso! Com meta tags, pode ser como o Natal todos os dias, com uma tag oculta em cada pacote.