Com o avanço das tecnologias voltadas para a Web, é essencial e indispensável que um bom profissional conheça conceitos básicos sobre a estruturação do HTML, e neste artigo explicaremos como funcionam as Meta Tags.

Meta Tags

As Meta Tags auxiliam os mecanismos de busca (search engines) a encontrarem o seu site na web, isso porque são elas que dão um pequeno resumo sobre o que será encontrado na sua página, sendo assim uma forma de indexar o conteúdo web disponível, mas essas tags não se resumem apenas a melhoria para mecanismos de busca, veremos que existem Meta Tags com funções mais complexas e com funções que podem ajudar muito em momentos oportunos.

As meta tags devem estar entre as tags <head></head>, mesmo local onde fica a tag <title></title>. Veja a Listagem 1.

Listagem 1. Escopo da Meta Tag

  <html>
    <head>
      <title> Aprendendo sobre as meta tags </title>
      <meta name="author" content="Ronaldo Lanhellas">
      <meta name="description" content="Meta Tags na Devmedia">
      <meta name="keywords" content="sites, web, desenvolvimento">
   </head>
   ...

Mas fique atento, as meta tags sozinhas não fazem milagres. Não significa que por ter as Meta Tags com o conteúdo certo e no local certo, que seu site será indexado pelos mecanismos de busca, isso porque cada vez mais estes mecanismos consideram o conteúdo do site como um tudo, realizando uma análise mais profunda sobre a validade do mesmo.

O Google, por exemplo, programou o seu robô de busca para ignorar as Meta tags devido a grande quantidade de “metatag spamming” encontrado na rede, sendo assim o próprio conteúdo da sua página é indexado no banco de dados ao invés da meta tag “description”.

Dê prioridade as palavras-chaves mais importantes ao usar a meta tag “keywords”, isso porque a maioria dos mecanismos de buscas leem apenas o início desta tag, então dê prioridade para colocar as palavras-chaves mais importantes logo no início.

Tipos de Meta Tags

  • HTTP-EQUIV: O atributo HTTP-EQUIV serve para controlar as ações do browser e também especificam melhor as informações, sendo que estas tem efeito equivalente quando são utilizadas diretamente na tag HTTP do cabeçalho.
  • NAME: Meta tags com o atributo “name” são utilizadas quando os tipos não correspondem com o HTTP, ou seja, aquilo que não se adequar ao HTTP-EQUIV é utilizado no NAME. Mas alguns buscadores não chegam a fazer distinção sobre esses tipos de tags, por exemplo: A meta tag “keywords” pode ser utilizada tanto com o tipo “http-equiv” como o tipo “name”.
  • DUBLIN CORE: Com o aumento da complexidade e necessidade de customização de Meta Tags, foi idealizado e criado uma linguagem de meta tags própria, chamado de Dublin Core, que permite maior flexibilidade aos autores. Neste artigo não abordaremos detalhes do uso desta linguagem, mas vale a pena saber que existem outras alternativas ao uso de Meta Tags.

Atributos e Especificações

Vimos na seção anterior quais os tipos de Meta Tags existentes e agora veremos que atributos podemos utilizar junto a elas:

AUTHOR: Serve para identificar qual o nome do autor da página, geralmente o desenvolver ou a empresa desenvolvedora. Essa tag é utilizado com o tipo “name”, ou seja, você terá que definir como na Listagem 2: name=”author”.

Listagem 2. author

  <meta name="author" content="Ronaldo Lanhellas" />

CACHE-CONTROL: Essa tag é utilizada no com o tipo “http-equiv” e é reconhecida apenas pelo http 1.1, e no seu atributo “content” (onde fica o conteúdo da tag) é permitido os seguintes valores:

  • Public: Os dados da página podem ser armazenados de forma compartilhada, isto é, será utilizado por diferentes usuários de um mesmo browser.
  • Private: É o contrário de public, o cache é armazenado para um específico usuário.
  • No-Cache: A página não é armazenada em Cache.
  • No-Store: É feito um cache temporário, a página não é arquivada.

Como a tag cache-control é reconhecida apenas pelo HTTP 1.1, o uso do pragma:no-cache é importante caso pretenda-se usar o cache-control:no-cache, isso porque ambos tem o mesmo efeito mas não se sabe se o servidor é ou não compatível com o HTTP 1.1, por isso o uso de ambos é importante. Observe a Listagem 3.

Listagem 3. cache-control

  <meta http-equiv="cache-control"   content="no-cache" />

CONTENT-LANGUAGE: Utilizado para declarar as linguagens utilizadas no conteúdo da página. Esse atributo é útil para categorizar a página conforme o idioma. Este é utilizado em conjunto com o tipo “http-equiv”. Observe a Listagem 4.

Listagem 4. content-language

  <meta http-equiv="content-language" content="pt-br, en-US, fr" />

CONTENT-TYPE: Esta tag é uma das mais importantes e jamais deve ser esquecida pois ela define qual o tipo de conteúdo que a página contém e qual a codificação deste conteúdo. Assim fica fácil saber se iremos abrir uma página HTML ou um arquivo PDF. Observe a Listagem 5.

Listagem 5. content-type

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

COPYRIGHT: Como o próprio nome já sugere, este serve para declarar os direitos autorais da página em questão. Observe a Listagem 6.

Listagem 6. copyright

  <meta name="copyright" content="© 2014 DevMedia" />

DESCRIPTION: Contém uma descrição/resumo sobre a página, utilizada por alguns mecanismos de busca, conforme a Listagem 7.

Listagem 7. description

  <meta name="description" content="Artigo da Devmedia sobre Meta Tags” />

EXPIRES: A data e a hora depois dos quais o documento deve ser considerado como expirado. Uma data ilegal como, por exemplo "0" é considerada como "agora". Configurar "Expires" como "0" pode também ser usado para forçar uma nova checagem a cada visita do robô de busca. Observe um exemplo na Listagem 8.

Listagem 8. expires

  <meta http-equiv="expires" content = "Mon, 22 jul 2006 11:12:01 GMT" />

KEYWORDS: As palavras-chaves são utilizadas para ajudar na indexação da sua página pelos motores de busca, funcionam como uma categorização do conteúdo, conforme a Listagem 9.

Listagem 9. keywords

  <META NAME="KEYWORDS" 
 CONTENT="devmedia, artigo, metatag, html">  

PRAGMA:NO-CACHE: Esse atributo faz com que o navegador não armazene a página em cache. A diferença deste para o cache-control:no-cache é que ele serve para todas as versões do HTTP. Observe a Listagem 10.

Listagem 10. pragma:no-cache

  <meta http-equiv="pragma" content="no-cache" />  

REFRESH: Especifica o tempo em segundos para que o browser atualize a página de forma automática, pode-se também redirecionar para uma outra URL após esse tempo. Veja a Listagem 11.

Listagem 11. refresh

  <meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />  

ROBOTS: Especifica informações para que o robô possa indexar sua página, suporta os seguintes valores:

  • All: Valor default, 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 Google): A página não é arquivada.

Veja um exemplo na Listagem 12.

Listagem 12. robots

  <META NAME="ROBOTS" CONTENT="ALL"> 
 
 <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW"> 
 
 <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW"> 
 
 <META NAME="ROBOTS" CONTENT="NONE">

GOOGLEBOT: é uma forma de comunicação direta com o robô do Google, dizendo ao mesmo que você não quer que ele index a sua página, ou seja, ela não será mostrada nas pesquisas. Mas lembre-se que isso não impede que os outros mecanismos de buscas indexem sua página. Observe a Listagem 13.

Listagem 13. googlebot

  <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

IMAGETOOLBAR: Elimina no I.E (Internet Explorer) a barra de opções que aparece ao passar o mouse por cima de uma imagem, conforme a Listagem 14.

Listagem 14. imagetoolbar

  <meta http-equiv="imagetoolbar" content="no" />

GENERATOR: Indica qual software foi utilizado para realizar a criação dessa página. Veja um exemplo na Listagem 15.

Listagem 15. generator

  <meta name="generator" content="Dreamweaver 8" />

REVISIT-AFTER: Utilizado para comunicar-se com os servidores de proxy afim de dizer de quanto em quanto tempo a página deve ser revisitada para refazer o cache. Observe a Listagem 16.

Listagem 16. revisit-after

  <meta name="revisit-after" content="15 days" />  

RATING: Essa tag é útil para identificar a censura apropriada da página, ex: A página é inapropriada para menores de 18 anos por conter conteúdo erótico. Veja os valores suportados:

  • General: Para qualquer idade
  • 14 years: Censura 14 anos
  • Mature: Para pessoas acima de 18 anos

Observe um exemplo na Listagem 17.

Listagem 17. rating

  <meta name="rating" content="general" />