# Meta tags
> Guia completo de meta tags para SEO e redes sociais. Open Graph, Twitter Cards, viewport e tags HTML essenciais para otimização. Implemente!
URL: https://dpw.dev/html/meta-tags/
Publicado em: 2008-09-26
Categoria: html
Tags: analise, basico-da-web, planejamento
Autor: Tárcio Zemel
**Meta tags** são tags "especiais" e "ocultas" que são colocadas no cabeçalho (_head_) de documentos _web_ (html, xhtml, xml, e outros). A correta inserção e utilização das _meta tags_ muitas vezes determina se as páginas serão bem indexadas ou não, se a **meta informação** a respeito daquele site e daquela página, em especial, está correta e realmente reflete a realidade daquele _web site_.
Muitos desconhecem e negligenciam o uso de _meta tags_ para a mais eficiente colocação do _web site_ na _internet_ e auto-emplicação sobre seu conteúdo, o que é importante para diversas coisas. Muitos dos que já mexem com desenvolvimento para _web_ há algum tempo não dão a devida importância às meta tags e, com isso, perdem a oportunidade de descrever melhor seu conteúdo e o que os sites que desenvolvem têm a oferecer.
## "Meta" + "Tag" = Meta Tag
O termo **meta tag** é, na verdade, formado por 2 palavrinhas que se juntam para dar seu significado. E para entender este significado, é preciso entender as 2 palavras, em separado:
**Meta** é um prefixo grego que significa algo como "após, "que ultrapassa", "que engloba", "que está além". Este não é um prefixo utilizado somente no desenvolvimento para _web_; você já deve ter ouvido e lido palavras como "metabolismo" e "metamorfose". Este prefixo **meta** refere-se à "coisas sobre a própria coisa" ou, em outras palavras, **dados sobre dados**, **informação sobre a informação**.
**Tag** é uma palavra do inglês que significa "etiqueta" ou "rótulo". Tanto nos EUA, no Brasil ou qualquer parte do mundo, etiquetas servem para identificar, nomear e marcar algo ou alguma coisa para que possa ser identificado e/ou corretamenta catalogado - dentre outras coisas.
Então, juntando os 2 termos, "_meta_" e "_tag_", temos **meta tag** que, como você já deve ter "adivinhado", são _tags_ que descrevem o documento _web_ a qual pertencem ("informação sobre a informação"); as meta _tags_ são para descrever informações sobre _sites_ e páginas que as contém; informam sobre qual conteúdo está ali e mostra informações extras a respeito deste conteúdo.
As _metatags_ são colocadas como elementos-filho de _head_, no (X)HTML, e sua sintaxe obedece à seguinte convenção:
****
Então, para qualquer das meta tags existentes que você for usar, a convenção para seu uso é esta, onde se informa primeiramente de qual meta se está inserindo e, posteriormente, qual valor se dá. Para os acostumados com a sintaxe XHTML e afins - grande parte dos leitores do [desenvolvimento para _web_](http://www.desenvolvimentoparaweb.com/ "desenvolvimento para web.") -, não há nenhuma novidade.
## Meta tags mais usadas e conhecidas
Existem muitas meta tags disponíveis para se usar, entretanto, algumas são de especial importância e devem ser obrigatoriamente inseridas em cada uma das páginas de seu _web site_. Sem elas, diversos prejuízos podem acontecer ao contexto geral de seu site e os objetivos traçados para ele terão mais dificuldade em serem alcançados.
Lembre-se: comece a inserção de suas meta tags sempre depois de inserir o título de seu documento, através da _tag_ ``, já que esta deve ser a primeira tag a constar dentro do cabeçalho (seção `<head>`) de cada uma de suas páginas web.
### **Meta tag "description"**
Esta _meta tag_ descreve o conteúdo do documento. É muito importante, já que mecanismos de busca que suportam esta meta exibem seu conteúdo na descrição de página da página de resultados de pesquisa.
Portanto, esta _meta tag_ deve ser sabiamente utilizada e o responsável pela elaboração de seu conteúdo deve usar sentenças crutas, com as principais palavras-chave do documento e de forma a ser atrativa para um potencial visitante se interessar em conhecer seu conteúdo somente por ter lido a descrição.
### **Meta tag "keywords"**
Nesta _meta-tag_ você coloca uma lista de palavras-chave (palavras-chave estas que, obviamente, têm a ver com o conteúdo da página _web_). Os _bots_ de busca verificam quais as palavras-chaves foram apontadas nesta meta e, segundo seus critérios, armazenas as informações em seus bancos de dados para melhor servir as pessoas com seus resultados de procura.
Cuidado para não abusar, na tentativa de ser "espertinho" e burlar os _spiders_ de busca, pois em seus algoritmos já é previsto este tipo de prática e, ao invés de "se dar bem", seu _site_ será severamente penalizado, podendo, no pior caso, ser **banido** do índice de resultados de procura dos buscadores.
### Meta tag "robots"
A "robots" serve para, de certa maneira, controlar os _bots_ de busca quanto à sua tarefa de indexação. Através dos diferentes valores possíveis para seu conteúdo, é possível passar instruções aos bots de busca para dizer qual o critério de indexação foi escolhido para tal ou qual página de seu site. Os valores mais comuns para esta meta tag são:
- **all.** Valor padrão, significa "vazio" - o robô de busca não recebe nenhuma informação;
- **index.** Os robôs de busca podem incluir a página normalmente;
- **follow.** Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém;
- **noindex.** Os links podem ser seguidos, mas a página não é indexada;
- **nofollow.** A página é indexada, mas os links não são seguidos;
- **none.** Os robôs podem ignorar a página;
- **noarchive** (apenas GoogleBot). A página não é arquivada.
## Outras metatags
Além das principais e mais conhecidas _meta-tags_, ainda existem outras que, embora de uma maneira diferente, têm seu devido valor e importância. O uso delas pode auxiliar na performance e desempenho do _site_, ter relação com o tipo de conteúdo você publica e outras coisas.
### Meta tag "author"
Serve para especificar e indicar quem é o autor da página. Comumente, as agências de _web_ colocam seus nomes e endereços para seus _web sites_ como valor desta _tag_. Teoricamente, isto aumenta o índice de visitação dos _bots_ de busca e aumenta o _pagerank_, consequentemente colocando a agência em boas colocações nos mecanismos de busca.
Sinceramente, não sei se é verdade ou boato; de qualquer maneira, não custa nada e é justo colocar o nome e endereço virtual de quem fez a página, não é?
### Meta tag "revisit-after"
Ao contrário do que muitos pensam, esta meta tag **não** informa aos _bots_ de busca com qual frequencia eles devem voltar ao site para reindexar os conteúdos (quando eles voltam é mais ou menos aleatório). Sua real função é informar com qual frequencia os proxys devem refazer os chaches das páginas de seu web site.
Seu uso consiste em informar, em dias, o período que você deseja, **em dias**. Por exemplo:
<meta name="revisit-after" content="7 days" />
Não existe um "número ideal" para se colocar na meta revisit-after; vai de cada caso. Se você tem um _blog_ ou _site_ que é frequentemente atualizado, então pode ser uma boa você especificar um valor mais baixo. Se não atualiza muito seus conteúdos, pode ser um valor um pouco mais alto. Cada caso é um caso.
### Meta tag "expires"
Esta _meta tag_ indica a "data de validade" de uma página _web_, quer dizer, indica quando uma página será considerada como expirada. Se você espeficicar "0" (zero) como valor, então ele considera isso como "agora" (por isso essa _meta tag_ é muito usada em dobradinha com a **revisit-after**).
Visite o [gerador de _meta tags_](http://www.submitcorner.com/cgi-bin/tools/metagen.cgi) para gerar um valor adequado à meta expies, que é meio chatinha de calcular...
## Meta tags padrão Doblin Core
Assim como aconteceu com os [microformatos](http://webinsider.uol.com.br/index.php/2006/01/16/microformats-aprenda-a-descrever-seus-dados/ "Mais sobre os microformatos."), no sentido de criar sua própria marcação, alguns desenvolvedores resolveram criar suas próprias _meta tags_. O mais conhecido e aceito antes a comunidade de desenvolvedores é o padrão **Doblin Core**, que existe e é aprimorado há mais de 10 anos!
[Visite o _web site_ oficial do projeto Dublin Core](http://www.dublincore.org/ "Página oficial do Dublin Core.") para saber mais informações a respeito e conhecer as _meta tags_ DC que você pode usar em suas páginas.
## Meta tags são importantes
Saber utilizar as _meta tags_ é importante para dar um **ajuste fino** ao _web site_. Saber usar corretamente e decidir qual _meta tag_ usar e qual não usar em determinada página, apesar de não parecer, pode fazer toda a diferença para seu _web site_. Mas estas foram somente algumas das meta que existem; veja uma relação mais completa e detalhada nos seguintes endereços:
- [Mozilla developer center: utilizando meta tags](http://developer.mozilla.org/pt/Utilizando_meta_tags);
- [Wired 2000: meta tag guide](http://www.submitcorner.com/Guide/Meta/);
- [HTML tag reference guide: `<META>`](http://www.html-reference.com/META.htm).
Guarde bem seus "meta conhecimentos"! ;-)
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml