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