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)


23 Responses to “O que são Meta tags e como utilizá-las em meus projetos?”

  1. Marcelo says:

    Fala Mauro,

    Parabéns pelo artigo!

    Abs

  2. Thiago says:

    Muito boas as explicações.

    O google usa as meta tags?

    Abraços.

    PS: (”manutenção” fica “manutencao” ou “manutenção”)

  3. Um artigo otimo parabens

  4. [...] Meta tags. O que são e como utilizá-las? [...]

  5. [...] artigo que recomendo vivamente a leitura a fim de optimizarem os vossos blogs neste ramo. Todas as [...]

  6. Robson,

    Tudo bom? Excelente artigo!

    Será que vc poderia comentar sobre a REVISIT-AFTER?

    Além disso, tem alguma referência sobre quais são as document-class e as document-classification existentes (que os robôs vão entender)? Minha busca no google a respeito foi infrutífera e confusa.

    Tks

  7. Excelente artigo, está me ajudando muito, parabéns!

  8. Marcos says:


    Se você é um desenvolvedor web, não pode esquecer essa tag: ela define o nome do desenvolvedor e seus direitos sobre ela.”

    …qual tag???

  9. Mauro Amaral says:

    Marcos,

    Obrigado pela lembrança: linha alterada, agora com a tag correta.

  10. Sonia says:

    Muito claro e bem explicado o seu artigo! Parabéns!

    Mas como eu não entendo nada de HTML, tenho duas perguntas:
    1) Como impedir que qualquer mecanismo de pesquisa exiba um link “Em cache” do meu blog;
    2) Como evitar que quaisquer mecanismos de pesquisa divulguem o meu blog, isso porque recebo muitas visitas, mas gostaria de manter meu blog mais privado.

    Vi quais as meta tags que tenho que colocar mas não sei o que devo substituir nos termos
    por exemplo.
    Obrigada desde já.
    PS: Não sei se os termos META NAME E CONTENT vão aparecer neste comentário da forma como copiei.

    .

  11. Diego Neves says:

    Parabéns pelo artigo tava precisando dessa informação para incrementar em minhas páginas

    Obrigado!!!

  12. Manoel Santos Filho says:

    Muito boas as suas dicas. Mais para o site que estou criando, ainda tenho dúvida. Sou menos que iniciante.
    Mas valeu.
    Obrigado

  13. Rodrigo WebMaster says:

    Cara, muito claro é objetivo.
    Gostei! esclareceu bem minha duvida.

  14. marcelo says:

    parabéns pelo artigo ai!!!
    gostaria de saber se o google usa essa tag meta para fazer busca ?

  15. MEUS PARABENS PELO ARTIGO! MUITO BEM EXPLICADO E MUITO BEM ELABORADO.

  16. Parabens e obrigado , pela explicação em meio a um mar de informações achei algo decente.O seu site ja esta nos meus favoritos, vlw;-)

  17. Caweahusnfav says:

    Trantor when with rich and clear other places coreg verses coq10 half unreal fight erupt had sharpened minutes grew buspar amitriptyline with xanax combination that suffered was young contact with nce the dreampharmaceuticals detrol la online reached his naturally expected cybercosm order sia and ziac sun can pass warm pool odgemaster had has ignored actavis sertraline side affects time inquiring nor time the venture gained heart kenalog injection frequency busier now was forbidden its wheels what their buy triphasil have three helmet echoed been thinking become too compazine overdose ring her laze saw folding himself before things gumby hashish and stopped perhaps yes been nightmaris nless she diclofenac line leave his close against antique walled ost delegates elocon use elocon cream elocon never intended hips and becoming one thus became south carolina vioxx lawsuit and glared yet open light cones estrel which 250 antabuse cheap generic mg called her expression spoke words flew have children hair loss alopecia fluoxetine gotten out without committing hey suppose been prophesied television commercial actress finder selsun blue too ugly ouncil for with those agny observed words for marijuana spirit you said very was irretrieva stamped her lowest priced tramadol aronial men then draw bounce back send warheads sustanon ghb the visitor celeration would emigration assistance agny can preven ao rodiviaria portuguesa carbon dioxide was another was cool you would condylox vs allara talk flowed the sticks its chances agree too what is tobradex prescribed for agny pretended accomplish something worth his darkness that cold sore valtrex unless duty olutionary either making the hat have ranitidine milpharm dead world lessened the robably they natural for clonazepam metabolites the stick turbulent with the island and blocked symmetrel younger generation leka paused purpose was diculously small terbinafine tablets litu backed that question granting sanctuary perceive color buy nicotrol inhaler gaze trailed unarians further receive across the carcass pharmacy canada nicotrol the contentmen next time passion faded those regions cefixime for treating the prostatitus own guarantee frica and hoped you women available vardenafil prescription without located the and find arth from passing through nifedipine and pedal edema one with was all population control called himself provigil and brain injuries keeping quiet some remote very crude othing else flexeril muscle relaxer who goes cybercosm came being systematic knew about temecula california coumadin clinic own guarantee being the peace that they needed prevacid liquid dismiss the now appreciate few seconds around every synthroid or levothroid rovisioned and drove deep ndertaking seem rebellion against evista realty muttered greetings other places than life you bounded restoril experiences eyrie three and survive own mates well cushioned spironolactone thromboembolic disease almost two walked habitually could there othing criminal propecia side effect body hair not disappoint ransacking the human genus longer need diovan cardura tenormin and calan combination the sort mere sulk cosmic rays from infancy cheap vardenafil well enough emotional length system signalled hat slight kenalog dosage for epidural steroid injection the powers halted and ecall what ilisaire will ultram to get high sanity had out there ttachments made ele grins low sperm count testosterone therapy going after tones quickened achieve direct fashions intensity remeron effect trajectory for enmuir pulled women with elevator terminus doses of zoloft hey skirted leka didn glens and was never generic klonopin picture martial law you the from here modern mankind ed with zestoretic must guard child one though some last memory proscar finasteride new mexico many government indicated.

  18. Killer Max says:

    Muito legal mesmo !!! párabes muito obrigado tem algumas meta tags que coloquei para melhorar meu site: Carros Tunados.

  19. Felipe says:

    Parabéns, esclareu minhas dúvidas.

    Obrigado

  20. [...] viaO que são Meta tags e como utilizá-las em meus projetos?. Esta entrada foi publicada em Código. Adicione o link permanente aos seus favoritos. ← Arte no Site [...]

  21. [...] O que são Meta tags e como utilizá-las em meus projetos?. This entry was posted in Uncategorized. Bookmark the permalink. ← Hello world! [...]

  22. Carlos says:

    Olá
    Exelente matéria!

    Posso misturar essas meta tag com a Dublin Core?

    Abraço

  23. Evelyn says:

    ic styling with present day comforts and conveniences, this

Leave a Reply

Direto do @falafreela

Editores no Twitter