•  
     

Meta Tags - O que são e como utilizá-las

[size=150][color=#FF0000]Meta Tags - O que são e como utilizá-las[/color][/size]

Por Erika Sarti, em 13/06/2006.

Nos fóruns de avaliação de sites, a primeira coisa que reparo é no código fonte de uma página. Através dele você sabe se o site foi desenvolvido num editor visual, o grau de atenção que o designer deu ao seu trabalho e até se o site é uma cópia descarada de algum template por aí =)

O que mais me espanta é que a grande maioria dos iniciantes não tem a menor noção do que é uma meta tag, e de como elas são fundamentais na divulgação do seu site.

Meta tags são linhas de código HTML, ou "etiquetas", que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras chaves que facilitarão a vida do usuário na hora de te encontrar. Através delas você pode também "assinar" seu site, declarando sua autoria sobre o código fonte.

Como utilizar as meta tags

As meta tags devem ser incluídas no seu código HTML, dentro da tag <HEAD>, assim:

[code]<HTML>
<HEAD>
<TITLE> Aprendendo sobre as meta tags </TITLE>
<META NAME="author" CONTENT="Erika Sarti">
<META NAME="description" CONTENT="Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">
<META NAME="keywords" CONTENT="sites, web, desenvolvimento">
</HEAD>[/code]...

keywords

Nesta tag você deverá incluir o maior número possível de palavras que se refiram ao seu texto. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Por isso, utilize quantas meta tags keywords você precisar.

[code]<meta name="keywords" content="sites, web, desenvolvimento, html, design">[/code]

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.

Pessoalmente, eu costumo incluir os termos no singular e no plural (site, sites). No caso de palavras acentuadas, eu ignoro a acentuação ou utilizo os caracteres acentuados em HTML ("manutenção" fica "manutencao" ou "manuten&ccedil;&atilde;o").

Cada buscador trabalha de forma única, levando em consideração dezenas e às vezes até centenas de valores diferentes na hora de exibir os resultados de uma busca. Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso, o que faz com que alguns robots e spiders não dêem muita atenção às meta tags keywords. Por isso, sempre use palavras-chaves coerentes com o seu conteúdo, e nunca acrescente itens só para aparecer melhor na busca - afinal você sabe que quando o usuário entra no seu site e não encontra o que foi "prometido" a imagem dele está comprometida, e mesmo os buscadores melhoram seus algoritmos de procura a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar, e muito.

description

Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site:

[code]<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">[/code]

Sozinhas, as meta tags não fazem milagres na divulgação do seu site: dê muita importância ao seu conteúdo em primeiro lugar . É a dobradinha conteúdo bem apresentado + atualização constante que vai fazer com que o usuário sempre volte. Um título coerente com o conteúdo e explicativo também ajuda muito.

Cuide também dos seus links: procure mostrar apenas links para páginas com assuntos relacionados ao seu conteúdo, e tente ser linkado de volta. Em quanto mais páginas relevantes sobre o mesmo assunto seu site aparecer, melhor ele estará no ranking dos buscadores.

Agora que você conhece o básico das meta tags e seu uso correto, ao invés de procurar métodos mirabolantes para aumentar seu ranking, simplesmente dê mais atenção à elas e deixe os buscadores fazerem o resto.

[size=150][color=#FF0000]Meta - Escondendo seu site dos buscadores[/color][/size]

No artigo anterior, falei um pouco sobre como o uso das meta tags pode ajudar seu site a ficar melhor posicionado nas páginas de resultados dos buscadores.

Porém, tão importante quanto conhecer a utilidade da tag keywords é saber usar a tag robots. A função desta tag é dizer aos buscadores se devem indexar sua página ou não. Parece contraditório falar sobre isso logo depois de um artigo sobre meta tags e buscadores, mas na verdade bloquear seu site dos sites de procura tem lá suas vantagens.

Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu site, não é interessante que o buscador indexe essas páginas; afinal, se elas forem acessadas individualmente não vão significar nada e não trarão um acesso real ao seu site. Também pode ser interessante não indexar seu site quando seu conteúdo é restrito a um grupo de pessoas e você não precisa de divulgação, ou quando você quer fazer um blog mais reservado, por exemplo. Nestes casos, mesmo que outras pessoas linkem seu site (o primeiro passo para aparecer nos maiores buscadores sem fazer nenhum esforço) ele não aparecerá em nenhuma busca.

Os valores possíveis para esta tag são:

[code]<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noarchive">[/code]

Aqui, os valores "index" e "noindex" se referem ao tratamento da página inicial: se o buscador deve ou não incluí-la nos resultados, respectivamente.

Já os valores "follow" e "nofollow" se referem aos links da página inicial, se eles devem ser visitados e indexados ou não.

Portanto

[code]<meta name="robots" content="index,follow">[/code]

Indexa a página inicial e todas as páginas nela referenciadas

[code]<meta name="robots" content="noindex,follow">[/code]

Não indexa a página inicial, mas indexa as páginas nela referenciadas

[code]<meta name="robots" content="index,nofollow">[/code]

Indexa a página inicial, mas nenhum link que ela contenha

[code]<meta name="robots" content="noindex,nofollow">[/code]

Não indexa nem a página inicial e nem seus links.

Portanto, se você quiser evitar que os sites de busca encontrem seu site, use a última opção. Porém, se você quiser que apenas o Google não encontre seu site, ou quiser remover uma página dos seus resultados de busca a partir da próxima varredura, pode utilizar a tag

[code]<meta name="googlebot" content="noindex,nofollow">[/code]

A maioria dos buscadores armazena uma cópia da sua página em cache, para otimizar a busca. Para evitar isso, você pode utilizar a tag

[code]<meta name="robots" content="noarchive">[/code]


Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia do seu site em cache tem a finalidade de disponibilizar o resultado ao usuário caso seu site esteja passando por algum problema técnico. Use esta tag somente se o conteúdo do seu site for muito específico quanto a essa necessidade.

[size=150][color=#FF4000]Meta - Mais do que divulgar seu site nos buscadores[/color][/size]

As meta tags não servem só para divulgar seu conteúdo. Basicamente, a função delas é fornecer informações adicionais sobre seu site. Vamos conhecer melhor algumas meta tags interessantes.

content-language

Especifica a língua primária da página. Útil para ajudar os buscadores a classificar seu site no idioma apropriado, orientar os navegadores a exibirem a acentuação e caracteres especiais corretamente e para facilitar o uso de corretores ortográficos.

Alguns valores possíveis:

pt Português
pt-br Português do Brasil
en Inglês
en-us Inglês dos EUA
en-gb Inglês Britânico
fr Francês
de Alemão
es Espanhol
it Italiano
ru Russo
zh Chinês
ja Japonês

Um exemplo usa o valor "pt":

[code]<meta http-equiv="content-language" content="pt">[/code]

content-type

Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente.

Os valores mais comuns são:

[code]<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">[/code]

Onde

text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em XHTML ou XML certamente sabe que deverá os valores "application/xhtml+xml" e "application/xml", respectivamente.

iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim.


Através das meta tags você também pode declarar sua autoria sobre a página, "assinando" seu código fonte:

author

Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu nome em um buscador, ou quando o site do seu cliente não tem uma forma de contato direto com você desenvolvedor por alguma razão.

[code]<META NAME="author" CONTENT="Erika Sarti">[/code]

Infelizmente, trabalhamos com o risco de clientes não pagarem pelo nosso trabalho, motivo pelo qual também é importante manter uma tag com o seu nome no código do site para provar que ele foi desenvolvido por você.

reply-to

Especifica um endereço de e-mail para entrar em contato com o(s) responsável(is) pelo site.

[code]<meta name="reply-to" content="[email protected]">[/code]


Alguma vez você já reparou que quando edita uma página HTML feita no FrontPage ou no Word é o programa que a gerou que abre para edição, e não o Bloco de Notas ou seu editor não-visual padrão? Isso é por causa da meta tag generator, que especifica o programa que construiu a página:

[code]<meta name="generator" content="Microsoft FrontPage 5.0">[/code]

É assim que o Windows sabe que editor utilizar e que ícone mostrar ao exibir um arquivo .htm ou .html numa pasta.

[size=150][color=#FF0000]Meta - Redirecionando o visitante para outra página[/color][/size]

Alguma vez você já deve ter visitado um site que mudou de endereço e que exibia uma mensagem do tipo:

Você será redirecionado para novo site em 5 segundos.
Se não quiser aguardar, clique aqui.

Esse redirecionamento é feito em apenas uma linha:

[code]<meta http-equiv="refresh" content="5;url=http://www.novosite.com/">[/code]

Ou seja, depois de 5 segundos o navegador será redirecionado para o endereço http://www.novosite.com.

Lembre-se: utilizando o valor 0 o site não será atualizado!

Essa mesma tag é utilizada para atualizar automaticamente uma página dinâmica, como a home page de um portal ou a sessão de notícias de um site, por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem maior, e a URL deve ser o endereço do próprio site a ser atualizado.

[code]<meta http-equiv="refresh" content="120;url=http://www.seusite.com/">[/code]

Redirecionamento com frames

Quando você quiser fazer um redirecionamento mantendo o endereço do domínio no navegador, uma opção pode ser o uso de frames: você cria um quadro que ocupe 100% da tela e, dentro dele, faz referência ao novo endereço do site:

[code]<html>
<head>
<title> Título do seu site </title>
</head>

<frameset rows="*" noborder border=0 frameborder=0>

<frame name="conteudo" scrolling="yes" noresize src="http://www.novosite.com.br" marginwidth=0 marginheight=0>

<noframes>
<body>
<h1>Mudamos de endereço</h1>
<h1><a href="http://www.novosite.com.br">www.novosite.com.br</a>
</body>
</noframes>

</frameset>
</html>[/code]


Para quem não conhece frames, vamos analisar cada trecho do código:

[code]<frameset rows="*" noborder border=0 frameborder=0>[/code]

É a tag que define o frame. Aqui, rows="*" significa que o frame vai ocupar toda a tela. Os outros parâmetros garantem que nenhum tipo de borda vai aparecer, para que o usuário não perceba que está acessando o conteúdo dentro de um quadro.

[code]<frame name="conteudo" scrolling="yes" src="http://www.novosite.com.br">[/code]

Aqui, definimos o quadro. O parâmetro name identifica o quadro - ele é mais útil quando você tem mais de um quadro na tela e precisa escolher em qual deles mostrar o conteúdo.

O parâmetro scrolling diz respeito à barra de rolagem do navegador: usando "yes" elas aparecem, usando "no" elas somem.

Em src, você define o endereço do site que quer exibir dentro do frame. Aqui valem as mesmas regras dos links: se fizer referência a uma página dentro do seu site, pode colocar só o nome dela; senão, coloque o endereço completo do site, sem esquecer do http://.

E a tag noframes?

Não se esqueça que você não sabe que navegador o usuário escolheu para acessar suas páginas. Se por acaso esse navegador não tiver suporte a frames, garanta que seu site vai ser acessado colocando pelo menos um link para o novo endereço.

Se você escolheu os frames como solução permanente para seu site, a importância das meta-tags é ainda maior: os sites de busca não terão nenhum conteúdo na sua página index.htm para indexar. O que vai aparecer no resultado da busca é a mensagem que você utilizou dentro do noframes:

[attachment=0]meta-tags_frames.jpg[/attachment]

Feio, né? Portanto, dê muita atenção às suas meta-tags, especialmente a description. Para saber mais sobre isso, dê uma olhada nos artigos anteriores sobre o assunto.

Redirecionamento com PHP

Vamos imaginar a seguinte situação: você está desenvolvendo um site temático, cujo layout vai mudar de acordo com a estação do ano. Você já desenvolveu os 4 layouts, cada um na sua pasta dentro do domínio principal.

Toda vez que a estação mudar você vai precisar republicar todo o site na raiz? Não. Se seu host tem suporte a PHP, você pode especificar no arquivo principal (index.php) para qual pasta o visitante deve ser redirecionado.

Por que index.php e não index.htm? Porque toda página que usar script PHP precisa ter a extensão .php para que o host saiba que lá dentro há um trecho de código que precisa ser executado. Se você utilizar a extensão .htm, o código vai ser ignorado.

Abra o Bloco de Notas, ou outro editor não visual da sua preferência, e edite o conteúdo do seu arquivo index.php, para que ele fique assim:

[code]<?php
header("Location: http://www.seusite.com/primavera/");
exit();
?>[/code]

Assim, toda vez que o usuário acessar http://www.seusite.com, ele será automaticamente redirecionado para http://www.seusite.com/primavera. Quando a estação mudar, ao invés de republicar todo o site você só edita uma linha do seu código.

Se você quer saber mais sobre PHP, procure apostilas e tutoriais em sites de busca. Mesmo que você seja um webdesigner e não um programador, algumas noções dessa linguagem ajudam a desenvolver sites mais leves. Eu prefiro trabalhar com PHP porque os hosts com suporte a essa linguagem são mais baratos, mas você também pode optar por ASP, por exemplo. Neste caso, você vai utilizar o comando response.redirect.

Finalizando

Terminamos aqui esta série de tutoriais sobre meta-tags. Como dica final, algo que vale para qualquer assunto a ser aprendido, especialmente para web design: todo o conteúdo que a gente precisa está disponível na internet, basta criar o hábito de procurar, procurar e procurar mais um pouco. Aqui no InfoWester mesmo você encontra um interessante artigo que mostra macetes para usar os recursos do Google com mais eficiência, caso este seja seu mecanismo de busca preferido.

Fonte: http://www.infowester.com/metatags.php
Anexos
meta-tags_frames.jpg
meta-tags_frames.jpg (37.15 KiB) Visto 1972 vezes