Advertisement
Scroll to top
Read Time: 7 min
This post is part of a series called SEO Fundamentals for Web Designers.
How to Create an SEO-Friendly URL Structure
The Problem of Duplicate Content and How to Solve it
This post is part of a series called Strange and Unusual HTML.
How to Create Your Own HTML Elements With Web Components
Native Popups and Modals With the HTML5 “dialog” Element

() translation by (you can also view the original English article)

Muita informação não tem fundamento algum quando relacionada ao efeito que meta tags tem em buscadores online. Algumas tags eram utilizadas frequentemente no passado, hoje nem tanto. Então, como saber quais tags ainda são relevantes para as técnicas SEO?


O que são Meta Tags?

As meta tags são responsáveis por fornecer maiores informações sobre links da internet, sobretudo para buscadores. Trata-se de uma informação implícita, o que quer dizer que ela não está visível para o visitante da página.

Você encontra meta tags no elemento <head> de páginas web (HTML). Já me questionaram se meta tags podem ser declaradas dentro do elemento <body> de uma página, mas a minha recomendação é: não faça isso. Colocar meta tags no elemento body pode prejudicar seu conteúdo, já que alguns navegadores podem não interpretar a marcação, o que acarreta em código descenessário.

É comum em meta tags, o atributo name. É este que define o tipo da metadata em questão. A valor do metadata pode ser informado através do atributo content. Existem diversos tipos de name-values que podemos utilizar com as meta tags. Vamos analisar alguns.


Meta tags mais frequentes

Vamos dar uma olhada em algumas meta tags que podemos encontrar em uma página web.

Meta Description

A meta description provavelmente é a meta tag mais utilizada. Como o nome sugere, ele da motores de busca uma descrição básica sobre a página ou link. Similar ao exemplo abaixo:

1
<meta name=”description” content=”Everything you need to know about meta tags for search engine optimization/>

Essa tag costuma ter muito mais poder, mas atualizações nos algoritmos dos buscadores minimizaram seu efeito. Ela não melhora sua posição no ranking, mas por outro lado, ainda é útil pois a informação é apresentada nos resultados dos buscadores ou quando compartilhamos links na internet.

Isso significa que pode ajudar a aumentar a taxa de visualizações da sua página. Além disso, a palavra buscada pelo usuário fica destacada em negrito nos resultados. Isso explica o porque de páginas com boa descrição (que releva palavras chave) serem mais relevantes para o usuário, maximizando as chances de click. O recomendado para descrição, em termos de tamanho da descrição, são 160 caracteres.

Mas o que acontece quando você deixa a descrição em branco ou não declara ma meta tag description?  Os buscadores continuam apresentando informação no campo, mas nesse caso a informação que eles julgam necessária. A maioria das vezes é repetido o titulo do site. Isso não é tão bom quanto parece, pois significa que você está perdendo a oportunidade de convencer o usuário a clicar no link da página.

Meta Robots

Já falamos sobre a tag meta robots em outro tutorial. Para quem ainda não teve a oportunidade de ver o artigo, aqui vai uma breve explicação:

A tag meta robots é utilizada para gerenciar a acessibilidade de uma página web em relação a motores de busca, ou, a buscadores online.  Você é quem permite ou não que um motor de busca indexe a sua página. Por exemplo:

1
<meta name=”robots” content=”noindex, nofollow />

Essa meta tag solicita que o motor de busca não indexe e nem monitore nenhum link da página. Se por algum acaso você definir dois termos contraditórios (ex: noindex e index), o Google, por exemplo, vai escolher o de opinião mais restritiva.

Porque essa tag é útil para técnicas SEO? Primeiro, é a maneira mais simples de prevenir que seja indexado o mesmo conteúdo várias vezes, como por exemplo no caso de haver uma versão para impressão da página. Também pode ser útil para páginas ainda em construção ou com informação confidencial. 

Title

Tecnicamente, a tag title não é uma meta tag, mas mesmo assim está inclusa no pacote. Inclui o title na lista porque ele é muito importante para otimização de resultados de pesquisa.

A tag title é necessária em todo arquivo HTML e define o titulo do documento. A marcação é similar a este exemplo:

1
<title>Title of the page</title>

Muito simples e poderoso. O title é apresentado em dois lugares; no título da página, no navegador, e no resultado dos buscadores. Isso significa que a tag title tem muita influência no seu ranking e na taxa CTR.

Um bom title deve incluir palavras chave e é recomendado utilizar essas palavras no começo do titulo. Lembre-se que se a pesquisa do usuário conter alguma das palavras chave em questão, elas ficam em negrito.

Outra coisa que você precisa ter em mente é o tamanho do título. O Google por exemplo, limita a 70 caracteres o título, então as vezes você vai adaptar o título para obter um melhor retorno.

Dan Shure escreveu um artigo bem interessante sobre titles, chamado Os seus titulos são resistiveis e virais? Material interessante com varias dicas.


Outras Meta Tags

Agora que já analisamos algumas das meta tags mais comuns, vamos dar uma olhada nas menos utilizadas e obvias. 

Meta Content Type (charset)

A meta tag content type é utilizada para definir o encoding dos caracteres de uma página web. É recomendado adicionar essa informação para prevenir que os navegadores "adivinhem" qual o encoding da página, o que pode implicar em falhas. Geralmente não tem influência no ranking ou CTR.

Você já deve estar familiarizado com o antigo Content-Type:

1
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>

Hoje podemos utilizar um modelo abreviado, mais moderno e com suporte a navegadores antigos.

1
<meta charset="utf-8" />

Essa tag precisa ser declarada antes de qualquer elemento que contenha texto, incluindo a tag title que acabamos de analisar.

Meta Keywords

Essa tag já foi muito útil, mas hoje não tem mais valor. Nenhum motor de busca hoje utiliza as meta keywords para julgar o conteúdo de uma página.

Na meta tag keywords você pode definir algumas palavras chave relacionadas ao conteúdo da página. Mas como já informamos, isso não melhora sua posição no ranking de pesquisa. Se mesmo assim você quiser implementar as keywords, utilize a seguinte marcação:

1
<meta name=”keywords” content=”meta tags,search engine optimization />

Meta Language

Essa tag normalmente é utilizada para definir a lingua de origem de uma página web. Informar a softwares de leitura de tela e outros processadores de texto qual a língua do conteúdo da página faz a web ser muito mais acessível. Temos abaixo um exemplo de declaração da tag relacionada a um conteúdo proveniente da França.

1
<meta http-equiv="content-language" content="fr" />

De qualquer forma, esse recurso hoje parece redundante. Ao invés deste, o World Wide Web Consortium recomenda que a linguagem do conteúdo seja definida com um atributo, ao invés de uma meta tag, como neste exemplo (que é padrão do HTML5):

1
<html lang="en">

Recomendamos a você declarar a linguagem pensando em processadores de texto, utilizando o atributo, e não outros métodos. - W3C

Esse atributo também pode ser aplicado em outros elementos, caso a linguagem de determinado conteúdo seja diferente da linguagem original configurada no elemento <html>

1
<p lang="es">Me gusta..

Notranslate

As vezes, o Google apresenta um link para traduzir os resultados da pesquisa executada.  Mas, claro, existem situações onde você não quer que essa sugestão esteja presente. Se você não deseja que o Google se ofereça para traduzir a página, adicione a seguinte meta tag:

1
<meta name=”google” content=”notranslate” />

Refresh

Com essa tag você configura o navegador para atualizar a página automaticamente após determinado prazo de tempo. O código abaixo, por exemplo, atualiza a página de 30 em 30 segundos:

1
<meta http-equiv=”refresh” content=”30”>

Também é possível direcionar o usuário a outra página após o refresh. Temos um exemplo da marcação utilizada, abaixo:

1
<meta http-equiv=”refresh” content=”30;URL=’http://website.com’”>

O uso dessa tag não é recomendada pelo W3C porque pode desorientar os usuários. Além do mais, não tem efeito/influência alguma no ranking dos motores de busca.


Conclusão

Basicamente, são três as tags que você precisa se preocupar: a meta tag para descrição, a meta tag robots e a tag title (que não é considerada uma meta tag mas é determinante em resultados de busca).

A tag description é utilizada para apresentar mais informações sobre o conteúdo de uma página web. Motores de busca utilizam essa informação nos resultados de pesquisa. A tag robots pode ser utilizada para prevenir que o mesmo conteúdo seja indexado mais de uma vez, ou que uma página confidencial ou ainda em construção seja indexada. Finalmente, uma das partes mais importantes, a tag title. Mantenha este limitado a 70 caracteres e considere palavras chave.

No passado, a meta tag keywords era relevante, hoje não é mais. É melhor não utilizar o recurso, a não ser que você utilize um sistema de busca interno que utilize as keywords (hoje essa é a utilização mais comum deste recurso). Outras meta tags menos importantes (em relação a técnicas SEO) são a tag language, content, refresh e nontranslate.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.