HTML

Em 12/11/2014 às 10:11h por Leonardo

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>.

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 têm 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.

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”.

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.

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.

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.

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.

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.

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.

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.

Listagem 11. refresh

 <meta http-equiv="refresh" content="15;url=//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.

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.

Listagem 14. imagetoolbar

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

GENERATOR: Indica qual software foi utilizado para realizar a criação dessa página.

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.

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

Listagem 17. rating

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

A programação SEO envolve muitas outras coisas, tags, desenvolvimento etc, então para um site ter um melhor resultado de busca nos motores de busca do Google, Yahoo, Big dentre outros, estude mais afundo sobre SEO e bons estudos.