HTML <meta> Tag

A tag <meta> carrega metadados — informações sobre a página, e não conteúdo exibido nela. Navegadores, motores de busca e redes sociais leem esses metadados para decidir como renderizar a página, como indexá-la e como exibi-la quando é compartilhada. Nada dentro de um elemento <meta> aparece na própria página.

Um documento pode conter várias tags <meta>, e quase toda página moderna precisa de pelo menos algumas delas (codificação de caracteres e o viewport). Todas as tags <meta> ficam dentro do elemento <head>, junto com as tags <title> e <link>.

Esta página aborda as meta tags que você realmente usará no dia a dia: codificação, o viewport, a description para SEO, a simulação de cabeçalho http-equiv e as tags Open Graph / Twitter que controlam como os links aparecem ao serem compartilhados.

Sintaxe

A tag <meta> é um elemento vazio — não tem conteúdo nem tag de fechamento. Em XHTML deve ser auto-fechada (<meta />).

Uma tag <meta> utiliza um de dois padrões:

Um par name/content (ou property/content para Open Graph) — name indica o tipo de metadado, content é seu valor.
Um atributo charset independente, ou um par http-equiv/content que simula um cabeçalho de resposta HTTP.

Você deve fornecer o atributo content sempre que name ou http-equiv estiver presente. O atributo content não é usado junto com charset.

Codificação de caracteres: `<meta charset>`

Essa tag informa ao navegador qual codificação de caracteres usar ao decodificar o documento. Deve ser a primeira coisa dentro do <head>, e deve sempre ser UTF-8:

<meta charset="UTF-8">

Por que UTF-8? Ele pode representar todos os caracteres de todos os idiomas — acentos, emoji, símbolos de moeda, scripts CJK — usando uma única codificação universal. Sem uma codificação declarada (ou corretamente inferida), caracteres como é, — ou " podem se tornar caracteres ilegíveis ("mojibake"). UTF-8 é a codificação da web moderna; o padrão HTML o exige para novos documentos.

Coloque-o cedo para que o navegador conheça a codificação antes de analisar qualquer texto.

A meta tag viewport

A tag viewport é o que torna uma página responsiva em celulares e tablets. Sem ela, os navegadores móveis assumem que a página foi criada para desktop e a renderizam com aproximadamente 980px de largura, depois diminuem o resultado — deixando textos minúsculos e com zoom reduzido. Adicione isso e a página se adapta ao dispositivo:

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

O que cada parte faz:

width=device-width — define o viewport de layout como a largura do próprio dispositivo (ex.: 390px em um celular) em vez de uma largura de desktop falsa de 980px.
initial-scale=1.0 — inicia com um nível de zoom 1:1, para que um pixel CSS corresponda a um pixel independente de dispositivo no carregamento.

Essa única linha é obrigatória para qualquer site que pretenda ter boa aparência em dispositivos móveis. Evite adicionar user-scalable=no ou maximum-scale abaixo de 5 — isso bloqueia o zoom por pinça e prejudica a acessibilidade para usuários com baixa visão.

SEO: a meta tag `description`

A description é o resumo que os motores de busca frequentemente exibem abaixo do título da sua página nos resultados, e que as plataformas sociais usam como alternativa. Busque uma frase concisa e envolvente de aproximadamente 150–160 caracteres — textos mais longos são truncados com reticências.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

A description não aumenta diretamente as classificações, mas um resumo claro e relevante melhora as taxas de clique a partir da página de resultados.

Outros valores `name`/`content`

O atributo name nomeia o tipo de metadado; content guarda seu valor. Valores comuns:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Nota: A meta tag keywords (<meta name="keywords" content="…">) é ignorada por todos os principais motores de busca atualmente e pode ser omitida com segurança. O antigo atributo scheme foi removido no HTML5 e não deve ser utilizado.

Simulando cabeçalhos HTTP: `http-equiv`

O atributo http-equiv permite que uma tag <meta> substitua um cabeçalho de resposta HTTP. Os valores mais comuns:

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Aviso de acessibilidade: Evite http-equiv="refresh". Uma página com atualização ou redirecionamento automático pode desorientar os usuários, interromper leitores de tela e prejudicar pessoas que precisam de mais tempo para ler — isso não atende aos critérios de sucesso do WCAG. Prefira um redirecionamento HTTP real do lado do servidor, ou um link visível que o usuário clica.

Quando alguém compartilha seu link no Facebook, LinkedIn, Slack ou X, essas plataformas leem as tags Open Graph para criar o cartão de pré-visualização (título, resumo, imagem). As tags Open Graph usam o atributo property em vez de name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

O X (Twitter) adiciona suas próprias tags, usando name:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Forneça uma URL absoluta para og:image (em torno de 1200×630px) para que as pré-visualizações mostrem uma imagem grande e nítida em vez de uma miniatura pequena ou nenhuma.

Um exemplo completo de `<head>`

Veja como essas tags se encaixam em um documento real:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Atributos

Atributo	Valor	Descrição
`charset`	character_set	Define a codificação de caracteres do documento (use `UTF-8`).
`content`	text	Define o valor dos atributos `name`, `property` ou `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Simula um cabeçalho de resposta HTTP e determina seu processamento.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Nomeia os metadados contidos em `content`.
`property`	og:title, og:description, og:image, …	Nomeia uma propriedade Open Graph (usada por plataformas sociais).

A tag <meta> também suporta os Atributos Globais e os Atributos de Evento.

Tags relacionadas

<head> — o contêiner para todos os metadados.
<title> — o título da página exibido em abas e resultados de busca.
<link> — vincula recursos externos como folhas de estilo e favicons.
<base> — define uma URL base para todos os links relativos da página.
<style> — incorpora CSS diretamente no head.

Prática

Qual é o objetivo de uma meta tag em HTML?

Ela fornece metadados sobre o documento HTML, como conjunto de caracteres, descrição e configurações de viewport.Ela exibe o conteúdo da página web ao usuário.Ela é o contêiner principal para elementos visíveis da página.Ela é usada para exibir imagens na página web.

Sintaxe

Codificação de caracteres: <meta charset>

A meta tag viewport

SEO: a meta tag description

Outros valores name/content

Simulando cabeçalhos HTTP: http-equiv

Compartilhamento social: Open Graph e Twitter cards

Um exemplo completo de <head>