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

Meta tags HTML (ou meta code HTML) são informações dispostas no cabeçalho (header) de uma página web, não ficando visíveis aos usuários. Por oferecerem orientaçõ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 otimização para mecanismos de busca (SEO).

O que são meta tags HTML?

Meta tags são tags HTML essenciais para navegadores e mecanismos de busca exibirem, interpretarem e indexarem sites. Localizadas no cabeçalho das páginas, essas tags não ficam visíveis aos visitantes. Ao usar tags <meta> do jeito certo, desenvolvedores compartilham informações importantes com mecanismos de busca, como o idioma do site, o conteúdo, a estrutura e a codificação de caracteres.

Em HTML, meta tags são fundamentais para otimizar as páginas para os mecanismos de busca, melhorando suas classificações e gerenciando a forma como o site é exibido em diferentes dispositivos. Embora os metadados não sejam mais tão críticos para as classificações como no passado, elementos essenciais como a tag HTML title e as meta descrições continuam importantes.

Como meta tags HTML são usadas?

Algumas formas de usar elementos meta em HTML:

• Otimização para os mecanismos de busca (SEO): Meta tags como <description> e <title> oferecem aos mecanismos 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 mecanismos de busca se devem indexar ou não uma página.
• Exibição e apresentação: As meta tags apresentam orientações sobre a codificação de caracteres, exibição em dispositivos móveis e detalhes sobre atualizações ou redirecionamentos automáticos.
• Redes sociais: As redes sociais usam meta tags específicas para assegurar que o conteúdo seja exibido corretamente quando compartilhado.
• Acessibilidade: Metadados desempenham uma função essencial na acessibilidade. Por exemplo, eles auxiliam os leitores de tela na categorização e asseguram (usando a tag viewport) a exibição correta dos sites em diferentes dispositivos.

Como meta tags HTML afetam a classificação de sites pelos mecanismos de busca?

Hoje, os mecanismos de busca como o Google fazem classificações muito específicas com base em termos de pesquisa e perguntas dos usuários. No passado, os metadados tinham um impacto muito maior sobre a classificação de um site. No entanto, a capacidade de manipulá-los com facilidade resultava em diversos problemas, como a prática de keyword stuffing.

Independentemente disso, os metadados e as meta tags HTML não perderam totalmente sua importância para os mecanismos de busca. Na verdade, o uso indevido de metadados pode fazer com que um site seja totalmente ignorado pelas ferramentas. A inclusão de metadados relevantes, como a tag <title> e meta descrições, e a realização de atualizações regulares é essencial para uma boa classificação das suas páginas.

Sintaxe das meta tags HTML mais importantes

Cada meta tag tem uma finalidade própria. Na seção a seguir, apresentamos um resumo das meta tags mais importantes.

Otimização para mecanismos de busca (SEO)

A otimização para os mecanismos de busca é uma das principais funções das tags <meta> em HTML. Estas são as meta tags mais relevantes para o SEO:

Título (title)

O elemento <title> oferece tanto aos mecanismos de busca quanto aos usuários uma visão geral do tema da página. Embora não seja tecnicamente uma meta tag, ele costuma ser mencionado como um fator importante, porque os mecanismos de busca o leem e o consideram um elemento-chave de classificação.

Por se tratar de um elemento clicável nos mecanismos de busca, é essencial que o título seja claro e conciso para chamar a atenção dos usuários. É importante se certificar de que seu comprimento não ultrapasse os limites estabelecidos para que ele seja totalmente exibido.

Sintaxe:

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

Meta descrição

Embora a meta descrição não influencie diretamente a classificação do site, ela serve como o primeiro ponto de contato com os usuários, apresentando as informações mais importantes que estimulam os cliques. É importante que elas não sejam curtas ou longas demais e incluam elementos como ícones ou símbolos, destacando termos relevantes 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 mecanismos de busca instruções de SEO importantes relacionadas à 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 rastreadores (crawlers) podem seguir os links na página.
• nofollow: Os rastreadores 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 armazenada em cache no Google não deve ser exibida.

Se você não definir a meta tag robots, os mecanismos de busca entenderã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 rastreadores sigam seus links:

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

viewport

O atributo meta HTML viewport é essencial para um design responsivo. Embora a meta tag em si não tenha uma relevância imediata para SEO, a prática de mobile SEO é um fator-chave de classificação. O uso do atributo viewport informa aos mecanismos de busca que o seu site é mobile-friendly e foi projetado para ser exibido de forma responsiva em vários dispositivos. Ele também assegura que o site seja exibido corretamente em diferentes telas, aprimorando sua usabilidade geral.

Sintaxe:

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

Codificação de caracteres com charset

A meta tag charset informa a codificação de caracteres aos navegadores, assegurando que o texto seja exibido corretamente. Isso é especialmente importante se você não definiu o conjunto de caracteres no cabeçalho HTTP ou se o navegador recuperar arquivos HTML diretamente do disco rígido em vez de HTTP(S).

Sintaxe:

<meta charset="utf-8"/>

Cache com expires

Se você não quiser impedir completamente o armazenamento em cache, use a tag expires para especificar quando os dados HTML em cache devem expirar. A expiração pode ocorrer em um momento específico ou após um determinado período. No entanto, nas aplicações web modernas, a tag expires é raramente usada, já que o armazenamento em cache é majoritariamente controlado por cabeçalhos HTTP.

Sintaxe:

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

Informações sobre autoria e direitos autorais

Para incluir informações do autor e direitos autorais no código-fonte, use as meta tags HTML author e copyright. Elas contribuem com o gerenciamento do site e trazem transparência sobre as alteraçõ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 principais focos de uma página, idealmente alinhados com as intenções de pesquisa dos usuários. No passado, as palavras-chave meta eram consideradas critérios importantes para a classificação dos sites. Embora alguns setores e empresas continuem usando palavras-chave, a relevância desse tipo de metadados para as classificações em mecanismos de busca diminuiu significativamente, já que o Google passou a ignorá-lo para fins de SEO. Independentemente disso, manter-se atento às palavras-chave ainda pode oferecer às empresas uma vantagem competitiva.

Sintaxe:

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