Atributo content do HTML

O atributo content contém o valor de uma declaração de metadados. Por si só não tem significado — é sempre uma metade de um par chave-valor, fornecendo os dados para o que o atributo name ou http-equiv da tag meta nomeia.

O atributo content só pode ser usado no elemento <meta>, que fica dentro do <head> do documento. Pense em name/http-equiv como a chave e em content como o valor:

name + content — metadados a nível de documento para navegadores, mecanismos de busca e plataformas sociais (descrição, palavras-chave, viewport, etc.).
http-equiv + content — uma diretiva pragma que simula um cabeçalho de resposta HTTP (por exemplo, uma atualização de página ou um tipo de conteúdo).

Se você escrever uma tag <meta> com um name ou http-equiv mas sem content, a declaração não terá efeito.

Sintaxe

<meta name="description" content="A description of the document">

Valores comuns de `name` e seus `content`

O valor de content é interpretado de acordo com o name ao qual está associado. Estes são os mais utilizados:

`name`	O que `content` contém
`viewport`	Como a página é mapeada para a tela do dispositivo. O valor padrão é `width=device-width, initial-scale=1`, que faz a página renderizar de forma responsiva em dispositivos móveis.
`description`	Um breve resumo da página. Os mecanismos de busca frequentemente o exibem como o trecho abaixo do resultado, portanto mantenha-o com menos de ~160 caracteres.
`keywords`	Uma lista de palavras-chave separadas por vírgulas. Amplamente ignorada pelos mecanismos de busca modernos, mas ainda comum em marcações legadas.
`robots`	Instruções para os rastreadores de mecanismos de busca (veja o detalhamento abaixo).
`author`	O nome do autor da página.

A meta de viewport é a mais importante a ser lembrada — sem ela, os navegadores móveis assumem um layout com largura de desktop e reduzem o zoom:

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

Os valores de diretiva do `robots`

O content de uma meta robots é uma lista de diretivas separadas por vírgulas que informam aos rastreadores o que podem fazer com a página. As duas mais incompreendidas — noindex e nofollow — controlam coisas diferentes:

Valor	O que informa ao rastreador
`index`	A página pode aparecer nos resultados de busca. Este é o padrão, então raramente você precisa escrevê-lo.
`follow`	O rastreador pode seguir os links da página para descobrir outras páginas. Também é o padrão.
`noindex`	Não exibir esta página nos resultados de busca — mesmo que o rastreador ainda possa lê-la e seguir seus links.
`nofollow`	Não seguir os links desta página. A própria página ainda pode ser indexada.

Por serem independentes, frequentemente são combinados. Por exemplo, para ocultar uma página da busca e impedir que os rastreadores passem por seus links:

<meta name="robots" content="noindex, nofollow">

Metadados de Open Graph e compartilhamento em redes sociais

Quando uma página é compartilhada em plataformas sociais (Facebook, LinkedIn, Slack, etc.), a plataforma lê as meta tags de Open Graph para construir o card de visualização. O Open Graph usa o atributo property (em vez de name) junto com content:

<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />

og:title — o título exibido no card de compartilhamento (usa o título da página como fallback se omitido).
og:description — o texto de resumo abaixo do título.
og:image — uma URL absoluta para a imagem em miniatura. Sempre use uma URL completa com https:// aqui; caminhos relativos não serão resolvidos em outros sites.

Esses são alguns dos usos mais comuns de content no mundo real, portanto vale a pena adicioná-los junto com sua meta description.

Valores comuns de `http-equiv` e seus `content`

O atributo http-equiv permite que uma tag <meta> substitua um cabeçalho HTTP. O atributo content então carrega o valor desse cabeçalho:

`http-equiv`	O que `content` contém
`refresh`	Um número de segundos antes de a página recarregar. Adicione `;url=...` para redirecionar em vez disso — por exemplo, `content="5;url=https://www.w3docs.com"`. Veja o aviso de acessibilidade abaixo.
`content-type`	O tipo MIME e o conjunto de caracteres do documento, por exemplo, `text/html; charset=UTF-8`. No HTML5, o formato mais curto `<meta charset="UTF-8">` é preferido.

O valor X-UA-Compatible (por exemplo, IE=edge) afetou apenas o modo de renderização do Internet Explorer. O Internet Explorer chegou ao fim de vida, portanto essa diretiva é legada e pode ser omitida em novas páginas.

Aviso

Usar <meta http-equiv="refresh"> para redirecionar para outra página é desaconselhado por motivos de acessibilidade. É uma falha documentada da WCAG 2.2 (Critérios de Sucesso 2.2.1 e 3.2.5): não dá ao usuário controle sobre o tempo e pode desorientar pessoas que usam leitores de tela ou que precisam de mais tempo para ler. Prefira um redirecionamento HTTP real no servidor (uma resposta 301/302). Se precisar redirecionar a partir do cliente, defina o atraso como 0 para que aconteça imediatamente, ou forneça um link visível que o usuário possa ativar por conta própria.

Exemplo do atributo content do HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
    <meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
    <meta http-equiv="refresh" content="30" />
  </head>
  <body>
    <h1>Example of the HTML "content" attribute</h1>
    <p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>

Veja o que cada valor de content faz no exemplo acima:

width=device-width, initial-scale=1 informa ao navegador para adequar o layout à largura da tela do dispositivo e iniciar com zoom de 100%.
O valor de description ("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") é o resumo da página que um mecanismo de busca pode exibir como trecho do resultado.
"HTML,CSS,JavaScript,PHP, Git" é a lista de palavras-chave separadas por vírgulas.
"30" na diretiva refresh recarrega a página a cada 30 segundos. Use a atualização automática com moderação — consulte a observação de acessibilidade acima antes de depender dela.

"Experimente Você Mesmo" não está disponível para este exemplo.

Prática

Quais destas são usos reais do atributo content em uma meta tag?

É usado em meta tags para fornecer uma descrição do site.É usado para fornecer texto alternativo para imagens quando elas não podem ser exibidas.É usado para fornecer informações aos mecanismos de busca sobre o conteúdo da página.É usado para especificar um valor padrão em um campo de entrada de texto.É usado para atualizar a página ou redirecionar para outra página após um número definido de segundos.