23

O que são as meta tags contidas no <head>? Quais são e para que serve cada uma e quais são os pró e contra de utiliza-las?

Exemplo:

<meta charset="UTF-8">
<meta name="description" content="descrição com palavras chaves">
<meta name="keywords" content="palavras chaves">
<meta name="author" content="nome do autor">
<meta name="copyright" content="nome do criador" />
1
  • 5
    Ao invés de votar para fechar esta questão seria mais proveitoso muda-la para algo como: Oque são meta tags e para que serve cada uma
    – jean
    Commented 27/02/2015 às 14:40

2 Respostas 2

18

Meta tags são muito importantes para duas coisas:

  • SEO, ou seja: Motores de busca;
  • A forma que seu navegador irá interpretá-lo.

Quando falamos de SEO, seu uso é de suma importância para que seu website possa ser indexado corretamente.

Meta Tag é um comando implementado no código de páginas web, dentro da área Head do site (entre as tags e ) para passar instruções a programas externos ou ações mais simples, como por exemplo informar qual a pessoa responsável pelo desenvolvimento da página. Algumas Meta Tags são utilizadas para passar aos sites de busca como o Bing e o Google instruções sobre o título da página e uma breve descrição a ser exibida nos resultados de busca, quais páginas devem ou não ser indexadas, dentre outras instruções.

Importância de Meta Tags para SEO

Meta Tags são uma importante ferramenta de comunicação entre o webmaster e os sites de busca, como vamos ver nos exemplos abaixo. Para muitas pessoas, porém, SEO é apenas isso, Meta Tags. Isso está longe de ser verdade. O Google utiliza perto de 250 variáveis para determinar os resultados de busca, e as meta tags são apenas algumas delas.

Existem várias meta tags, as mais importantes são:

Title

O campo title não é uma meta tag, mas é o mais importante comando em uma página web para SEO.

Exemplo de um Title:<title>Project management software, online collaboration: Basecamp</title>

Meta Description (meta name="description")

É a meta description que geralmente define a descrição exibida nos resultados do Google. Descreva o conteúdo da página de uma forma a estimular o interesse das pessoas em conhecer mais sobre o conteúdo da página, para aumentar a visitação do seu site.

Exemplo de um Meta Description: <meta name="description" content="Veja no Terra as últimas notícias e as melhores coberturas ao vivo do Brasil e do Mundo, Esportes, Diversão, Vida e Estilo, assista os melhores vídeos no TerraTV e ouça as melhores músicas no Sonora." />

Meta Keywords (meta name="keywords")

Há muitos anos atrás, os algoritmos dos sites de busca tinham certa dificuldade em interpretar a relevância de sites para determinadas palavras-chave e utilizavam o conteúdo da meta keyword para ajudá-los a interpretar o conteúdo das páginas. Rapidamente os webmasters perceberam que bastava incluir uma infinidade de palavras nessa tag para aparecer nas buscas, mesmo para palavras não relacionadas ao conteúdo da página.

A experiência do usuário era comprometida ao ser direcionada a uma página que no final das contas não possuía o conteúdo buscado. Os sites de busca evoluíram e hoje desconsideram a meta keyword. Uma vez que a meta keyword não é exibida ao usuário em qualquer momento, seja nos resultados de busca, seja no conteúdo do site, não há de fato qualquer razão lógica para que o Google a considere como um fator de relevância.

Por outro lado, utilizamos as meta keywords para pesquisar as palavras-chave de concorrentes desavisados. Entre nos sites de seus principais concorrentes e veja através dos meta keywords quais as palavras-chave que estes tentaram otimizar os seus sites.

Exemplo de um meta keyword: <meta name="keywords" content="climática, previsão climática, desenvolvimento, tempo, clima,"/>

Meta Robots (meta name="robots")

Essa meta tag foi criada para passar orientações aos robots dos buscadores. Cada página deve ter o seu meta robots. Veja alguns dos parâmetros que podem ser passados:

  • _index_: indexe esta página - exiba-a em seus resultados de busca;
  • _noindex_: não indexe esta página - não a exiba nos resultados de busca. Útil para páginas como de login e acesso à intranet;
  • _follow_: siga os links desta pagina para descobrir novas páginas (reveja Googlebot, robots);
  • _nofollow_: nenhum dos links desta página deve ser seguido;
  • _nosnippet_: orienta o site de busca a não exibir a descrição da página nos resultados de busca;
  • _noodp_: orienta o Google não utilizar a descrição do diretório DMOZ em seus resultados (snippet);
  • _noarchive_: instrui o Google a não exibir a versão em cache da página;
  • _noimageindex_: não indexe nenhuma imagem da página.

Exemplos de Meta Robots:

  • <meta name="robots" content="index, follow"> - sintaxe mais comum de meta robots - orienta os buscadores a indexar o conteúdo da página e seguir todos os links para descobrir novas páginas

  • <meta name="robots" content="noindex, nofollow"> - orienta os buscadores a não indexar o conteúdo da página e impede-a de seguir os links para descobrir novas páginas

Nota: o comando para orientar ao Google a não indexar uma página pode também ser dado no arquivo robots.txt.

Fonte: http://www.seomarketing.com.br/meta-tags-google.php

Existem meta tags que são muito importantes para informar ao seu browser como renderizar seu browser

  • meta name="viewport" é muito importante para que seu site seja executado em diferentes escalas e dispositivos;

  • meta charset é o encoding que o browser deve utilizar para renderizar o site;

  • meta http-equiv="content-language" indica o idioma do site.

As informações meta podem ser utilizados também por plugins, softwares e redes sociais...

8
  • Uma boa resposta, mas não é só para SEO, elas tem um fundamento e SEO é apenas parte disto, seria algo como: O uso delas é passar informações para softwares (sendo o navegador ou um plugin, um exemplo seria os mobiles) ou bots (que não são necessariamente só buscadores, um exemplo seria as redes sociais).
    – Syzoth
    Commented 27/02/2015 às 17:27
  • @GuilhermeNascimento eu enviei antes de acabar a resposta. Eu a editei. Commented 27/02/2015 às 17:31
  • Ficou bom, apesar de faltar algo sobre as redes sociais e parecer estar muito focado no SEO, já é uma boa ótima resposta :) +1
    – Syzoth
    Commented 27/02/2015 às 17:34
  • 1
    Oi Edgar. Não tenho nada contra usar conteúdo de fontes externas (aliás, você fez bem em fornecer o conteúdo e, principalmente, em citar a fonte!). Porém, é legal sempre dar uma revisada no texto pra que ele faça sentido aqui. Por exemplo, a frase "Temos uma página neste tutorial dedicada ao Title, consulte-a." não faz muito sentido numa resposta no SOPT, então eu creio que poderia (ou, deveria) ser eliminada. Outra coisa, os exemplos não estão aparecendo, procure usar o marcador de código para que eles sejam exibidos. :) Commented 27/02/2015 às 18:11
  • 1
    @LuizVieira foi mau cara. Eu revisei o texto e acabou passado desapercebido. Commented 28/02/2015 às 12:16
5

As tags meta são informações sobre a página utilizadas, principalmente, pelos buscadores e navegadores.

<meta charset="UTF-8"> informa ao navegador a codificação de caracteres que deve ser utilizada.

As tags com o atributo name com valores: description, keywords, author, copyright, etc fornecem informações para os buscadores.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> informa ao navegador como a área de visualização deve se comportar.

<meta name="robots" content="noarchive"> informa aos buscadores como a página deve ser indexada.

<meta http-equiv="content-language" content="pt-br"> informa o idioma do conteúdo para o navegador e buscadores.

<meta http-equiv="refresh" content=" 5 ;url=http://www.exemplo.com/"> utilizada para criar redirecionamentos.

O artigo Meta Tags - O que são e como utilizá-las tem uma descrição detalhada sobre as tags <meta>.

Ainda existem outras, como as do OpenGraph, que são utilizadas pelo Facebook.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .