Meta Tags HTML: Guia Completo para SEO e Otimização

Por

Principais Pontos sobre Meta Tags

  • Meta tags são cruciais, pois fornecem informações essenciais sobre uma página web para buscadores, navegadores e diversos serviços online.
  • Entre os tipos fundamentais estão a meta descrição, Open Graph, viewport e as tags HTTP-equiv.
  • A criação de meta tags personalizadas oferece adaptabilidade, mas requer documentação e planejamento detalhados.

Em conjunto com o título da página e os scripts e folhas de estilo utilizados, uma seção de cabeçalho HTML pode conter meta tags. Elas são indispensáveis para otimização de mecanismos de busca (SEO), acessibilidade e o bom desempenho geral do site.

Descubra como empregar meta tags e as informações relevantes que elas podem proporcionar.

Meta tags são elementos que adicionam informações complementares a uma página web. Navegadores não exibem esses metadados diretamente, porém, qualquer ferramenta pode usá-los para diversos fins, como buscadores, navegadores e outros serviços web.

Os dados inseridos nas meta tags auxiliam na melhoria do posicionamento nos buscadores, contribuem para a responsividade e acessibilidade do site e otimizam a exibição das páginas nas mídias sociais.

Meta tags são tags de fechamento automático; não existe uma tag </meta>, pois elas não contêm conteúdo. Todos os dados são armazenados em atributos. Meta tags são adicionadas à seção <head> do seu arquivo HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
</head>
<body>
</body>
</html>

Este exemplo de estrutura HTML possui duas meta tags na seção <head>. Elas informam sobre o conjunto de caracteres (UTF-8) e a viewport, respectivamente.

A maioria das meta tags emprega uma combinação dos seguintes atributos para armazenar dados.

  • name e content: O atributo name funciona como um rótulo, enquanto o atributo content armazena os dados associados a esse rótulo. Isso possibilita um sistema flexível e expansível para armazenar qualquer metadado necessário.
  • property: Este atributo é utilizado, por vezes, como alternativa ao name, com praticamente a mesma finalidade.
  • http-equiv: Significa “equivalente HTTP”. Este atributo define um cabeçalho HTTP para o valor especificado no atributo content.
  • scheme: Este atributo, utilizado em conjunto com o name, especifica o tipo de dados contidos no atributo content.

As meta tags a seguir são amplamente suportadas por diversos serviços web e navegadores.

Meta Tag de Descrição

Este trecho, com até 155 caracteres, resume o conteúdo da página. Os buscadores costumam exibí-lo sob o título e a URL da página. É crucial fornecer uma descrição concisa e precisa para motivar os usuários a clicar no link e acessar a sua página.

 <meta name="description" content="Uma breve descrição da sua página">

Meta Tags Open Graph

O Facebook e outras redes sociais utilizam amplamente estas tags. Elas usam as informações presentes nessas tags para melhorar a apresentação dos links da sua página quando os usuários a compartilham. As meta tags Open Graph incluem atributos como og:title, og:description e og:image:

 <meta property="og:title" content="Título da sua Página">
<meta property="og:description" content="Uma breve descrição da sua página">
<meta property="og:image" content="URL de uma imagem relacionada">

Meta Tags de SEO

Estas tags fornecem informações para os mecanismos de busca e podem melhorar o posicionamento da sua página. Elas também fazem parte das práticas recomendadas de SEO. Incluem atributos como robots, author e outros. Embora a importância dessas tags tenha diminuído ao longo do tempo, é fundamental incluí-las no seu documento HTML.

 <meta name="robots" content="index, follow">
<meta name="author" content="Seu Nome">

Meta Tag da Viewport

A meta tag da viewport é um elemento essencial no design web responsivo. Ela instrui o navegador a ajustar o layout da página de acordo com a largura do dispositivo, assegurando que o conteúdo seja exibido de maneira correta e legível em dispositivos móveis.

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

Meta Tags HTTP Equivalentes

Essas meta tags são importantes para controlar aspectos específicos do processamento de páginas web por navegadores e servidores. Elas incluem atributos como refresh e X-UA-Compatible. Embora seu impacto direto no SEO possa variar, elas exercem um papel crucial na definição do comportamento e compatibilidade da página.

 <meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Não é necessário empregar todas simultaneamente em seus projetos, mas é importante ter um bom entendimento das diferentes meta tags disponíveis. Além disso, o uso de meta tags traz benefícios na melhoria da organização de documentos HTML.

Meta tags são flexíveis porque:

  • Você tem a liberdade de usar um nome de sua escolha para armazenar os dados desejados.
  • Navegadores não exibirão seu conteúdo, embora ele sempre esteja visível no código fonte da página.

Um exemplo de meta tag personalizada:

 <meta name="target-audience" content="desenvolvedores">

Neste exemplo, a tag personalizada especifica o público-alvo do conteúdo, indicando que ele é direcionado a desenvolvedores.

Meta tags personalizadas oferecem um meio de expandir o conjunto padrão de tags reconhecidas. No entanto, é importante documentar cuidadosamente as tags personalizadas que você utiliza e ter um bom entendimento de como irá empregá-las. Outros serviços não as usarão ou reconhecerão por padrão, sendo necessário escrever seu próprio código para processá-las.