Anuncie produtos, venda suas criações e compartilhe conteúdo relevante na FreelaStore. Veja como participar.

O que são Meta tags e como utilizá-las em meus projetos?

por Robson Marquesin

photo credit: hoyasmeg Depois de nosso primeiro artigo, e em meio a muitos projetos em andamento, chegou a hora de voltar ao mundo do SEO para falar de uma personagem muito importante: as meta tags. Com a ajuda delas saímos da tempestade que é ser enxergado pelos buscadores, para a bonança do aumento de vendas […]




Creative Commons License
photo credit: hoyasmeg

Depois de nosso primeiro artigo, e em meio a muitos projetos em andamento, chegou a hora de voltar ao mundo do SEO
[bb]
para falar de uma personagem muito importante: as meta tags. Com a ajuda delas saímos da tempestade que é ser enxergado pelos buscadores, para a bonança do aumento de vendas e audiências.

Mas vamos por partes. Primeiro, às apresentações:

Muito prazer, meu nome é Tag, Meta Tag

Meta Tags são linhas de código HTML, também conhecidas como “etiquetas” e sua função é falar para os robôs buscadores do que se trata o conteúdo do seu site. Nelas você vai inserir as palavras que facilitarão o entendimento dos usuários que estiverem à sua procura, além de informar a qualquer um que veja seu código-fonte que você é o autor do mesmo.

Exemplo básico de Meta Tag:

<HTML>
<HEAD>
<TITLE>aqui vai o Título da página do site <TITLE>
<META NAME=”author” CONTENT=”Nome do autor do site”>
<meta name=”description” content=”Aqui dentro vai a descrição da página ou do site.”>
<META NAME=”keywords” CONTENT=”tecnologia, internet, web, desenvolvimento, seo”>
<meta name=”URL” content=”http://www.seusite.com.br” />
<meta name=”language” content=”portuguese” />
</HEAD>

Vamos detalhar cada item para facilitar

<TITLE > Conhecendo as Meta Tags </TITLE >
Title é onde definimos o título da página do site. Porém, não podemos escrever o que quisermos, temos um limite de 70 caracteres nos resultados de busca para o título de uma página. Ou seja, qualquer coisa além disso ninguém irá ver.

<META NAME=”author” CONTENT=”Nome do autor do site” >
Serve para definir o autor da página. Alguns buscadores têm a opção de busca por autor, por isto esta meta é importante. Não deixe de utilizá-la sempre.

<meta name=”description” content=”descrição da página” / >
Define a descrição da página no buscador. É através dessa meta que você vai falar ao buscador do que se trata seu site. Utiliza no máximo 255 caracteres, além disso não servirá para nada.

<meta name=”keywords” content=”tecnologia, internet, web, desenvolvimento, seo” / >
Inclua nesta tag o maior número possível de palavras que tenham a ver com seu site. Não repita palavras e tente utilizar sinônimos, além de nunca quebrar uma linha de palavras-chave, pois o código será considerado um erro e será ignorado pelos robôs. Utilize quantas meta tags keywords você precisar, o ideal seriam de 20 a 60 palavras, mas fique à vontade para colocar as todas necessárias.

Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas – alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site. Você pode incluir os termos no singular e no plural (palavra, palavras). No caso de acentuação, ignore-as ou utilize os caracteres acentuados em HTML (”manutenção” fica “manutencao” ou “manutenção”).

Cada buscador trabalha de forma única, é preciso estudar e entender a forma que cada um trabalha a fim de obter um melhor resultado em todos eles.

<meta name=”URL” content=”http://www.seusite.com” / >
Mostra aos buscadores qual a url principal do seu site.

<meta name=”language” content=”portuguese” / >
Define a linguagem da página do seu site. Esta meta é muito importante para que seu site apareça na busca pela linguagem correspondente, caso contrário, sua página só terá chances de aparecer na busca geral.

<meta name=”copyright” content=”seus direitos autorais” />
Se você é um desenvolvedor web, não pode esquecer essa tag: ela define o nome do desenvolvedor e seus direitos sobre ela.

<meta name=”robots” content=”INDEX, FOLLOW” / >
Esta meta é muito importante para qualquer site, pois define se o buscador pode indexar sua página, clicar nos links e catalogar as imagens que existem em seu site. Por isso é importante o ALT nas imagens. Esse código pode ter diversas variações, veja:

* INDEX = informa ao robô que a página pode ser catalogada
* FOLLOW = informa ao robô que ele pode explorar a página
* NODINDEX = informa ao robô que ele não pode catalogar a página
* NOFOLLOW = informa ao robô que ele não pode explorar a pagina
* NOIMAGEINDEX = informa ao robô que ele não pode catalogar as imagens da página
* NOIMAGECLICK = informa ao robô que ele não pode explorar os links nas imagens
* ALL = informa ao robô que ele tem todas permissões na página
* NONE = informa ao robô que ele não tem permissões na página

Importante: A indexação das páginas ou seguimento de link são feitas automaticamente pelos buscadores sem você precisar usar as opções index e follow, mas nada impede que você coloque isso para reforçar essa opções.

<meta name=”revisit-after” content=”5 days” / >
Informa ao robô de quanto em quanto tempo a página é atualizada. Quanto menor o tempo de atualização maior o page-rank da página.

Caso você não atualize a página dentro do período pré-determinado, o buscador “exclui” a página do banco de dados. Devo dizer que isto é a teoria, mas felizmente isso não tem ocorrido. Fiz alguns testes e na prática isso não ocorreu. Lembrando que atualização dinâmica não vale para o robô.

<meta name=”reply-to” content=”seu@email.com.com” / >
Serve para informar ao robô para qual e-mail devem ser enviadas perguntas, respostas e comentários sobre a página/site.

<meta name=”document-class” content=”Completed” / >
Serve para informar ao robô a classe do documento.

<meta name=”document-classification” content=”Internet Services” / >
Serve para informar ao robô a categoria do documento.

<meta name=”document-rights” content=”Public” / >
Informa ao robô os direitos do documento (se é public, private, internal…)

Ex. Se você quer deixar uma seção privada e não quer que o robô a exiba nas buscas, coloque essa tag na página.

<meta name=”document-rating” content=”General” / >
Serve para informar ao robô a classificação da página quanto a idade. Confira o exemplo abaixo:

* General = padrão para todas as idades
* Mature = somente para adultos
* Old 14 years = para maiores de 14 anos (este atributo é devido a lei americana de proteção online para criança menor de 13 anos)
* Safe for kids = para crianças

No Brasil não costuma-se utilizar esse tipo de classificação, mas o correto seria. Então seja legal e use isso para facilitar as ferramentas de proteção a classificarem seu site.

<meta name=”document-state” content=”Dynamic” / >
Serve para informar ao robô se a pagina é dinâmica (jsp, aspx, asp, php,) ou até mesmo estática. Nesse caso as páginas html também podem ser dinâmicas, se tiverem a interferência de scripts baseados em tecnologia server-side.

<meta name=”document-distribution” content=”Global” / >
Serve para informar ao robô a distribuição do documento (global, regional, internal).

<meta name=”cache-control” content=”Public” / >
Serve para informar ao buscador se a página pode ser armazenada em cache. Se sua página sofre constante atualização evite usar essa tag, já que o cache pode ficar desatualizado no buscador.

<meta http-equiv=”Expires” content=”Thu, 01 Jan 2009 00:20:00 GMT” / >
Serve para informar ao sistema que dia a página deve expirar, se não for deletada antes.

<meta name=”Target” content=”_self” / >
Serve para informar ao navegador qual deve ser o destino padrão para os links da página. Isso vale para quando você não coloca o destino em seus links. Por padrão o navegador vai adotar o que estiver dentro desta tag, mas ela não inibe a ação de link que você tenha colocado.

Ex. Se você colocou em um link
outrapagina, mesmo que o parâmetro de meta tenha sido definido como “_self”, o link o qual você fez abrirá como _blank. Nesse caso assume a sua definição de link e não a padrão de página.

<meta http-equiv=”Content-Language” content=”PT-BR” / >
Serve para informar ao navegador em qual idioma está o conteúdo atual da página. Se seu site tiver 2 ou 3 idiomas, separe cada idioma em htmls diferentes e classifique a tag dessa forma, pois caso contrário o google somente edificará o idioma principal.

<meta name=”Publisher-Email” content=”seu@email.com.com” / >
Serve para informar o e-mail de quem publicou a página. Nesse caso se você é o desenvolvedor coloque seu e-mail.

<meta name=”Contributors” content=”Robson Marquesin e Equipe” / >
Serve para informar quem são os publicadores da página, em geral, a equipe que está batalhando no dia-a-dia.

<meta name=”Page-Topic” content=”seo” / >
Serve para informar o tópico principal da página.

Ainda vem mais coisa por aí!

É pessoal, por hoje é só. Na próxima parte falaremos sobre a Semântica no Código HTML, o que é fundamental também para a indexação do site nos buscadores. Até a próxima.

Ah, sim: mandem suas dúvidas por e-mail e ou comentários à vontade.

Robson Marquesin

Robson Marquesin

Diretor de Criação Online ligado em tecnologias com 13 anos de experiência. Bio | Envie sua dúvida

Portfolio RSS E-mail (Leia mais artigos desse autor)


Direto do @falafreela

Editores no Twitter