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

HTML Meta Tags: Entendendo o uso de Meta Tags

Veja neste artigo com detalhes como funcionam as Meta Tags e quais são seus atributos em HTML.

Meta Tags

Tipos de Meta Tags

Atributos e Especificaç�es

Artigos relacionados