Artigos HTML HTML Meta Tags: Entendendo o uso de Meta Tags

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 Código 1.

<!DOCTYPE html>
<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>
...
Código 1. Escopo da Meta Tag

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 Código 2: name=”author”.

Código 2. author

<meta name="author" content="Ronaldo Lanhellas" />
Código 2. author

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 Código 3.

<meta http-equiv="cache-control" content="no-cache" />
Código 3. cache-control

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 Código 4.

<meta http-equiv="content-language" content="pt-br, en-US, fr" />
Código 4. content-language

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 Código 5.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Código 5. content-type

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

<meta name="copyright" content="© 2019 DevMedia" />
Código 6. copyright

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

<meta name="description" content="Artigo da Devmedia sobre Meta Tags” />
Código 7. description

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 Código 8.

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

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 Código 9.

Código 9. keywords

<meta name="keywords" content="devmedia, artigo, metatag, html">
Código 9. keywords

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 Código 10.

Código 10. pragma:no-cache

<meta http-equiv="pragma" content="no-cache" />
Código 10. pragma: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 Código 11.

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

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 Código 12.

<meta name="robots" content="all"> 
 
 <meta name="robots" content="index,nofollow"> 
 
 <meta name="robots" content="noindex,follow"> 
 
 <meta name="robots" content="none">
Código 12. robots

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 Código 13.

<meta name="googlebot" content="noarchive">
Código 13. googlebot

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 Código 14.

<meta http-equiv="imagetoolbar" content="no" />
Código 14. imagetoolbar

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

<meta name="generator" content="Dreamweaver 8" />
Código 15. generator

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 Código 16.

<meta name="revisit-after" content="15 days" />
Código 16. revisit-after

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 Código 17.

<meta name="rating" content="general" />
Código 17. rating