O que são e como usar meta tags HTML do jeito certo

Meta tags HTML (ou meta code HTML) são in­for­ma­ções dispostas no cabeçalho (header) de uma página web, não ficando visíveis aos usuários. Por ofe­re­ce­rem ori­en­ta­ções sobre a estrutura, o tipo, a função e a linguagem, as meta tags não afetam apenas a forma como uma página web é exibida e indexada, mas também a oti­mi­za­ção para me­ca­nis­mos de busca (SEO).

O que são meta tags HTML?

Meta tags são tags HTML es­sen­ci­ais para na­ve­ga­do­res e me­ca­nis­mos de busca exibirem, in­ter­pre­ta­rem e indexarem sites. Lo­ca­li­za­das no cabeçalho das páginas, essas tags não ficam visíveis aos vi­si­tan­tes. Ao usar tags <meta> do jeito certo, de­sen­vol­ve­do­res com­par­ti­lham in­for­ma­ções im­por­tan­tes com me­ca­nis­mos de busca, como o idioma do site, o conteúdo, a estrutura e a co­di­fi­ca­ção de ca­rac­te­res.

Em HTML, meta tags são fun­da­men­tais para otimizar as páginas para os me­ca­nis­mos de busca, me­lho­rando suas clas­si­fi­ca­ções e ge­ren­ci­ando a forma como o site é exibido em di­fe­ren­tes dis­po­si­ti­vos. Embora os metadados não sejam mais tão críticos para as clas­si­fi­ca­ções como no passado, elementos es­sen­ci­ais como a tag HTML title e as meta des­cri­ções continuam im­por­tan­tes.

Como meta tags HTML são usadas?

Algumas formas de usar elementos meta em HTML:

• Oti­mi­za­ção para os me­ca­nis­mos de busca (SEO): Meta tags como <description> e <title> oferecem aos me­ca­nis­mos de busca insights sobre o conteúdo e o foco de uma página, ajudando a resumi-la de forma clara para atrair mais cliques.
• Indexação: Metadados como robots instruem os me­ca­nis­mos de busca se devem indexar ou não uma página.
• Exibição e apre­sen­ta­ção: As meta tags apre­sen­tam ori­en­ta­ções sobre a co­di­fi­ca­ção de ca­rac­te­res, exibição em dis­po­si­ti­vos móveis e detalhes sobre atu­a­li­za­ções ou re­di­re­ci­o­na­men­tos au­to­má­ti­cos.
• Redes sociais: As redes sociais usam meta tags es­pe­cí­fi­cas para assegurar que o conteúdo seja exibido cor­re­ta­mente quando com­par­ti­lhado.
• Aces­si­bi­li­dade: Metadados de­sem­pe­nham uma função essencial na aces­si­bi­li­dade. Por exemplo, eles auxiliam os leitores de tela na ca­te­go­ri­za­ção e asseguram (usando a tag viewport) a exibição correta dos sites em di­fe­ren­tes dis­po­si­ti­vos.

Como meta tags HTML afetam a clas­si­fi­ca­ção de sites pelos me­ca­nis­mos de busca?

Hoje, os me­ca­nis­mos de busca como o Google fazem clas­si­fi­ca­ções muito es­pe­cí­fi­cas com base em termos de pesquisa e perguntas dos usuários. No passado, os metadados tinham um impacto muito maior sobre a clas­si­fi­ca­ção de um site. No entanto, a ca­pa­ci­dade de manipulá-los com fa­ci­li­dade resultava em diversos problemas, como a prática de keyword stuffing.

In­de­pen­den­te­mente disso, os metadados e as meta tags HTML não perderam to­tal­mente sua im­por­tân­cia para os me­ca­nis­mos de busca. Na verdade, o uso indevido de metadados pode fazer com que um site seja to­tal­mente ignorado pelas fer­ra­men­tas. A inclusão de metadados re­le­van­tes, como a tag <title> e meta des­cri­ções, e a re­a­li­za­ção de atu­a­li­za­ções regulares é essencial para uma boa clas­si­fi­ca­ção das suas páginas.

Sintaxe das meta tags HTML mais im­por­tan­tes

Cada meta tag tem uma fi­na­li­dade própria. Na seção a seguir, apre­sen­ta­mos um resumo das meta tags mais im­por­tan­tes.

Oti­mi­za­ção para me­ca­nis­mos de busca (SEO)

A oti­mi­za­ção para os me­ca­nis­mos de busca é uma das prin­ci­pais funções das tags <meta> em HTML. Estas são as meta tags mais re­le­van­tes para o SEO:

Título (title)

O elemento <title> oferece tanto aos me­ca­nis­mos de busca quanto aos usuários uma visão geral do tema da página. Embora não seja tec­ni­ca­mente uma meta tag, ele costuma ser men­ci­o­nado como um fator im­por­tante, porque os me­ca­nis­mos de busca o leem e o con­si­de­ram um elemento-chave de clas­si­fi­ca­ção.

Por se tratar de um elemento clicável nos me­ca­nis­mos de busca, é essencial que o título seja claro e conciso para chamar a atenção dos usuários. É im­por­tante se cer­ti­fi­car de que seu com­pri­mento não ul­tra­passe os limites es­ta­be­le­ci­dos para que ele seja to­tal­mente exibido.

Sintaxe:

<title>Insira o título do documento aqui</title>

Meta descrição

Embora a meta descrição não in­flu­en­cie di­re­ta­mente a clas­si­fi­ca­ção do site, ela serve como o primeiro ponto de contato com os usuários, apre­sen­tando as in­for­ma­ções mais im­por­tan­tes que estimulam os cliques. É im­por­tante que elas não sejam curtas ou longas demais e incluam elementos como ícones ou símbolos, des­ta­cando termos re­le­van­tes ou um call to action (CTA) (CTA).

Sintaxe:

<meta name="description" content="Esta é a meta descrição da página. Ela deve ter cerca de 150 caracteres.">

robots

O atributo HTML robots oferece aos me­ca­nis­mos de busca ins­tru­ções de SEO im­por­tan­tes re­la­ci­o­na­das à indexação, links a serem seguidos, snippets e cache:

• index: A página pode ser indexada.
• noindex: A página não deve ser indexada.
• follow: Os ras­tre­a­do­res (crawlers) podem seguir os links na página.
• nofollow: Os ras­tre­a­do­res não devem seguir os links na página.
• nosnippet: O conteúdo não deve ser usado como um snippet em destaque.
• noarchive: A versão da página ar­ma­ze­nada em cache no Google não deve ser exibida.

Se você não definir a meta tag robots, os me­ca­nis­mos de busca en­ten­de­rão que possuem sua permissão para indexar, exibir snippets e seguir links. Você também pode usar o arquivo robots.txt para gerenciar a indexação do seu site.

Este é um exemplo de código de uma página que pode ser indexada e que permite que os ras­tre­a­do­res sigam seus links:

<meta name="robots" content="index, follow">

viewport

O atributo meta HTML viewport é essencial para um design res­pon­sivo. Embora a meta tag em si não tenha uma re­le­vân­cia imediata para SEO, a prática de mobile SEO é um fator-chave de clas­si­fi­ca­ção. O uso do atributo viewport informa aos me­ca­nis­mos de busca que o seu site é mobile-friendly e foi projetado para ser exibido de forma res­pon­siva em vários dis­po­si­ti­vos. Ele também assegura que o site seja exibido cor­re­ta­mente em di­fe­ren­tes telas, apri­mo­rando sua usa­bi­li­dade geral.

Sintaxe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Co­di­fi­ca­ção de ca­rac­te­res com charset

A meta tag charset informa a co­di­fi­ca­ção de ca­rac­te­res aos na­ve­ga­do­res, as­se­gu­rando que o texto seja exibido cor­re­ta­mente. Isso é es­pe­ci­al­mente im­por­tante se você não definiu o conjunto de ca­rac­te­res no cabeçalho HTTP ou se o navegador recuperar arquivos HTML di­re­ta­mente do disco rígido em vez de HTTP(S).

Sintaxe:

<meta charset="utf-8"/>

Cache com expires

Se você não quiser impedir com­ple­ta­mente o ar­ma­ze­na­mento em cache, use a tag expires para es­pe­ci­fi­car quando os dados HTML em cache devem expirar. A expiração pode ocorrer em um momento es­pe­cí­fico ou após um de­ter­mi­nado período. No entanto, nas apli­ca­ções web modernas, a tag expires é raramente usada, já que o ar­ma­ze­na­mento em cache é ma­jo­ri­ta­ri­a­mente con­tro­lado por ca­be­ça­lhos HTTP.

Sintaxe:

<meta http-equiv="expires" content="Tempo (em segundos) em que os dados devem expirar"/>

In­for­ma­ções sobre autoria e direitos autorais

Para incluir in­for­ma­ções do autor e direitos autorais no código-fonte, use as meta tags HTML author e copyright. Elas con­tri­buem com o ge­ren­ci­a­mento do site e trazem trans­pa­rên­cia sobre as al­te­ra­ções recentes que foram feitas em suas páginas.

Sintaxe:

<meta name="author" content="Autor"/>
<meta name="copyright" content="Detentor dos direitos autorais"/>

Palavras-chave

As palavras-chave descrevem os prin­ci­pais focos de uma página, ide­al­mente alinhados com as intenções de pesquisa dos usuários. No passado, as palavras-chave meta eram con­si­de­ra­das critérios im­por­tan­tes para a clas­si­fi­ca­ção dos sites. Embora alguns setores e empresas continuem usando palavras-chave, a re­le­vân­cia desse tipo de metadados para as clas­si­fi­ca­ções em me­ca­nis­mos de busca diminuiu sig­ni­fi­ca­ti­va­mente, já que o Google passou a ignorá-lo para fins de SEO. In­de­pen­den­te­mente disso, manter-se atento às palavras-chave ainda pode oferecer às empresas uma vantagem com­pe­ti­tiva.

Sintaxe:

<meta name="keywords" content="Palavra-chave1, Palavra-chave2, Palavra-chave3…">