Tableless - Desenvolvimento inteligente com Padrões Web

11/01/2008
Browsers

Metatags РBreve introdṳ̣o de uso e teoria

Metatags servem dar informação sobre seu site para sistemas de buscas ou outras aplicações. Metadados são estruturas de informações que descrevem características de uma fonte de informação.

Por

Metadados são dados sobre dados. Informações sobre a própria informação. Metadados são estruturas de informações que descrevem características de uma fonte de informação.
Metadados servem para ajudar seres humanos ou máquinas a localizar e descrever informações, melhorando o gerenciamento e uso destas informações.

Existem uma série de padrões para se criar Metadados, mas por você ser um possível profissional que trabalha com web, a que vai te interessar mais são as Metatags. Metatags são tags do HTML que lhe permitem inserir informações sobre o website. Você às utiliza para informar seres humanos e aplicações, embora sejam as aplicações que fazem melhor uso destas informações.

As metatags são colocadas dentro da tag HEAD do seu documento HTML. Abaixo veja um exemplo de sintaxe:

<meta name="description" content="Tableless.com.br - Site sobre melhores práticas de desenvolvimento utilizando Padrões Web." />

Sistemas de buscas como Google utilizam as metatags para mostrar informações sobre o site nos resultados de busca.O Google especificamente ignora as metatags de Keywords, mas utiliza muito a metatag Description para exibir a descrição dos sites nos resultados de busca.

Diferença entre metatags HTTP-EQUIV e NAME

Quando o usuário clica em algum link na página, o servidor recebe uma requisição do browser via protocolo HTTP (uma série de regras que definem um diálogo entre o cliente e o servidor – mais aqui). O servidor dá uma série de repostas ao browser, que por sua vez mostrará na tela o que o servidor mandar.

Quando você utiliza o uma metatag HTTP-EQUIV, você controla alguns destes comandos, como por exemplo o cacheamento da página ou redirecionamento para outro endereço.

Já os metatags NAME não utilizam este tipo de conversa. Eles são responsáveis apenas em passar informações sobre o website para sistemas ou aplicações – como sistemas de busca.

Metatags importantes para uso

Description

<meta name="description" content="Tableless.com.br - Site sobre melhores práticas de desenvolvimento utilizando Padrões Web." />

A metatag description serve para informar uma descrição sobre o site. Nesta metatag você vai dizer para que serve o site, qual o assunto principal. É importante saber que os sistemas de busca indexam em média 250 caracteres desta metatag. Cuidade com este limite, pode ser que a descrição do site saia pela metade nos resultados de pesquisa.

Keywords

<meta name="keywords" content="xhtml, ajax, javascript, padroes web, tableless, desenvolvimento web">

Nesta metatag você colocará as palavras chaves relativas ao assunto do site. Se você utilizar algum CMS ou sistema de blogging – como o wordpress – é interessante que seja feito um estudo para inserir as tags das postas nestas metatags.

Robots

<meta name="robots" content="valor, valor, valor" />

Você pode controlar o que os robôs de busca irão indexar ou não indexar em sua página. Normalmente esta metatag é utilizada em alguma página que você não queira que o sistema de busca indexe.

  • none: os robôs ignoram a página. É equivalente ao noindex e ao nofollow.
  • noindex: a página não será indexada por um sistema de busca.
  • nofollow: impede que os robôs de busca sigam os links da página.
  • noimageindex: impede que as imagem sejam indexadas. Isso não inclui os textos.
  • noimageclick: ignora links colocados diretamente em imagens.
  • all: sem restrições de indexação
  • index: robôs são permitidos para incluir esta página nas buscas.
  • follow: robôs podem seguir os links da página para encontrar outras páginas.

Language

<meta name="language" content="pt-br" />

Você define qual a linguagem da página.

Author

<meta name="author" content="Diego Eis, Elcio Luiz Ferreira" />

Informa qual são os autores ou o autor da página.

Pragma

<meta http-equiv="pragma" content="no-cache" />

Informa que o navegador não deverá cachear a página.

É importante notar que não é necessário colocar muitas metatags em suas páginas. Apenas utilize aquelas que realmente serão úteis. Se você utiliza algo como o WordPress, é interessante encontrar plugins que ajudem na publicação de metatags nas páginas. Aqui no Tableless eu utilizo o Plugin para WordPress chamada AddMetaTags.

Uma lista maior de metatags você pode encontrar aqui: http://vancouver-webpages.com/META/. Há bastante informação também aqui.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://tsassara.wordpress.com/ Tarcísio Sassara

    Legal!
    Bom, pelo menos este post é mais tranqüilo.

    O mais importante pra mim é: Não sair recheando o Head da página com metatags. Não adianta muita coisa.
    Só as mais importantes é que contam.

    Eu já pesquisei muito sobre elas há alguns anos(quem ainda não pesquisou?) e quando encontro uma nova, dou uma olhadinha para saber se vale a pena usar.

    Algumas que foram citadas neste Post são de uso praticamente obrigatório! Mesmo assim já vi muitos sites que não fazem uso das metas.(quem nunca viu?)

    Ah! Diego,
    Aguardo por mais textos polêmicos! =D

    Abraço!

  • http://www.webparatodos.com.br Cristian Trentin

    Muito bom

  • http://www.epassos.com Epassos

    Muito bom o artigo.

  • http://newtoncalegari.com/blog Newton Calegari

    Ótimo Post!
    Agora esclareceu de uma vez por todas minhas antigas dúvidas sobre metatags.

    Abraço,
    Newton Calegari

  • Sergio Leal

    Uma dúvida:

    Em “Meta Description”, eu poderia usar diferentes textos para diferentes páginas em um site sem CMS?

    Melhorando a pergunta:

    Em um site, eu poderia utilizar a Description da página “Empresa” diferente da página de “Produtos”?

  • Sergio Leal

    Complementando a questão acima:

    Essa prática melhoraria a indexação do site pelos motores de busca?

  • http://brunodulcetti.com/blog/ Bruno Dulcetti
  • http://www.ewhost.com.br Tiago Colucci

    Interessante a matéria!

  • http://www.icf12.com.br José

    Eu acho que o Google as ignora sim!
    Vejam este texto retirado do site da mozilla(Meta Tags):

    “Para o Google, elas não existem! Devido à grande quatidade de “metatag spamming” o robô de busca do Google foi programado para ignorá-las! Ele indexa parte do conteúdo da própria página em seu banco de dados ao invés da “description”.”

  • http://www.icf12.com.br José

    Na verdade o Google ignora a metatag keywords…
    Segundo esse artigo do blog oficial
    http://www.blogger.com/profile/05980476691232878841:

    ”
    Glen at Webstart said…

    Hi John,

    I notice that you do not mention the keywords meta tag – does this mean that Google totally ignores it?

    December 4, 2007 3:37 AM

    John Mueller said…

    Thanks for asking, Glen! You’re right in that we generally ignore the contents of the “keywords” meta tag. As with other possible meta tags, feel free to place it on your pages if you can use it for other purposes – it won’t count against you.
    “

  • http://www.icf12.com.br José
  • http://www.jogosescape.com/ GHS

    José,

    O Google usa a meta-tag description para descrever o site sim, um exemplo é pesquisar no Google sobre “Mercado Livre”:

    http://www.google.com.br/search?q=Mercado%20Livre

    Note a descrição:

    “A maior Comunidade de compra e venda online da América latina.”

    Agora, entre no site e veja que há uma meta-tag description com exatamente esta descrição:

    <meta name=”description” content=”A maior Comunidade de compra e venda online da América latina.”>

  • http://claudiojunior.wordpress.com Cláudio Júnior

    Já percebi isso também, pelo menos o google não vai pelas metatags.
    []‘s

  • Pingback: rascunho » Blog Archive » links for 2008-01-11

  • Mauro

    Sobre a metatag “Language”, em vez de…
    “Você define qual a linguagem da página.”

    seria melhor escrever…
    “Você define qual o idioma da página.”

    Linguagem dá a entender que se trata de linguagem de programação. Idioma é mais preciso para indicar que se trata de língua portuguesa, língua inglesa, etc.

  • Guilherme Mattos

    Poxa, valeu Diego

    Nunca pensei que a minha sujestão fosse ser aceita.

    Eu critico quando algo não está bom, mas também sei elogiar quando merece, e neste caso, belo post. Os links no final do artigo também são de grande ajuda, e finalmente vou dar um basta nas minhas dúvidas sobre metatags.

    Valeu mesmo!

  • http://www.icf12.com.br José

    @GHS
    Conforme eu corrigi no comentário seguinte, na verdade o Google ignora a meta-tag KEYWORDS conforme o artigo do blog oficial que segue:Artigo.

  • felipe

    Muito boa materia sobre metatags, mais aproveitando sua boa vontade, o sobre a tag , e extremamente dificil achar alguma coisa sobe elas, e quando acha e um breve resumo.
    Então alguem sabe como elas funciona?

    grato

  • http://hide2system.googlepages.com Hide2System

    Só uma dica para próximos textos,
    lembrando que nossa língua também é um padrão:

    Palavras de origem estrangeira devem ser
    escritos em itálicos.

    Só nome de pessoas que não.

    Experimente e verão que o texto fica mais
    gostoso de ler.

  • http://www.novaeraseguros.com.br charles

    Valeu pelo post, eu me preocupo tanto com as benditas palavras chaves. Agora vou refletir mais e focar no conteúdo como um todo.
    Obrigado mesmo.

  • http://project47.viscountbox.com/ Carlos Eduardo

    Acho importante termos posts desse tipo para esclarecer e dar embasamento teórico para quem utiliza, mas não sabe exatamente do que se trata determinado assunto.

    No caso das Metatags, com certeza é um tópico bastante pertinente!

  • http://www.icf12.com.br José

    Vejo que o post foi corrigido na seção onde falava que o Google não ignora as metatags…
    Agora o artigo ficou uma referência bem completa e correta sobre o assunto.
    Abraços comunidade…

  • Pingback: Sexta-feira dos Web Standards #11 · project.47 - Portfolio e blog sobre Web Standards

  • Pingback: Bit por minuto » Metags!!!!!

  • Pingback: Metatags, Longdesc e a realidade... - Mundo Tecno

  • http://www.maximabrasil.com.br Leandro Costa

    A utilização de meta tags deve ser feita de maneira consisa, conciênte, páginas com descrições enormes e cheios de palavras chave que não tem nada a ver com o conteúdo são simplesmente ignoradas pelo algoritmo de classificação e posicionamento nas páginas de resultados dos buscadores, em especial o google.
    Como na maioria das o importante é ter bom senso e utilizar as tags para aquilo que elas foram planejadas, semântica essa palavra diz muito.
    Boa matéria para alertar os desavisados.

  • Pingback: Tableless » IE8 Targeting Version

  • http://www.dfsfgsd.com.br rodrigo

    ótima materia, mas miinha dúvida, Keywords servem para algo ainda?

  • Pingback: Tutorial Intermediário de HTML: Tags Meta « Codando

  • http://www.formatonline.com.br Rafael Carazolli

    É muito bom e importante, des de que eu comecei a fazer as metatags em minhas páginas os resultados melhoraram muito…

  • http://www.carazolli.com.br Marcelo

    Viva!!! foi muito tempo em pesquisas no google para saber mais sobre o pagerank…. melhorar meu site.. fazer metatags e sitemaps mas agora tá começando a aparecer resultado…, muito baixo, é verdade, apenas 1, mas é daqui pra frente!!!

  • http://www.ot-list.com Felipe

    Interessante, mais eu acho que nunca tive resultados com Meta Tags, apenas as mais usadas!

  • http://www.tenisnike.blog.br tenis nike

    Este é um assunto muito discutido, e agora ficou bem claro como usar bem todos os recursos para um bom seo de site.