HTML Meta Tags: Entendendo o uso de Meta Tags

14 Jun 2014 às 14:48 0 1040 Programação

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> Holodek dicas e truques </title>

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

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

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

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

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

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

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

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

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

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

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

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

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

Listagem 14. imagetoolbar

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

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

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

Listagem 17. rating