Elemento <head>: o que é e o que colocar dentro dele
O <head> é a seção do HTML que guarda os metadados da página, ou seja, as informações que o navegador e os buscadores leem, mas que o usuário não vê na tela. É ali que ficam o título, a descrição, a URL canônica, as diretivas de indexação e as referências a CSS, scripts e dados estruturados. O principal problema relacionado a esse elemento é o uso de tags inválidas, se uma tag não permitida entra no <head>, o Google fecha a seção à força e ignora todos os metadados que vierem depois dela.
O que é o elemento <head>
O <head> é o container de metadados de um documento HTML, posicionado entre a abertura da tag <html> e o <body>. Cada página tem exatamente um. Nada do que está dentro dele é renderizado no corpo da página, a única parte que chega ao usuário é o <title>, que aparece na aba do navegador, no histórico, nos favoritos e como base do link azul no resultado de busca.
A importância do <head> está no que ele responde antes de qualquer leitura de conteúdo. Qual é a codificação de caracteres do documento, qual URL representa esta página, se ela pode ser indexada, como ela deve se comportar no celular e qual título e descrição devem aparecer na busca, todas essas respostas moram no cabeçalho. Um corpo de texto impecável não compensa um metadado ausente, duplicado ou mal posicionado.
O que colocar no <head>
Um <head> completo reúne três grupos de informação: a base técnica que o navegador precisa para renderizar a página corretamente, os metadados que buscadores e redes sociais consomem, e as referências aos recursos externos da página.
| Elemento | Para que serve | Essencial |
|---|---|---|
<meta charset="utf-8"> | Declara a codificação de caracteres do documento | Sim |
<title> | Define o título da página para a aba, os favoritos e a busca | Sim |
<meta name="viewport"> | Controla a largura e a escala inicial em telas pequenas | Sim |
<meta name="description"> | Sugere ao buscador o resumo que aparece abaixo do título | Recomendado |
<link rel="canonical"> | Indica qual URL representa o conteúdo | Recomendado |
<meta name="robots"> | Controla indexação e exibição do resultado | Conforme o caso |
<meta property="og:..."> | Define a prévia do link em redes sociais e mensageiros | Recomendado |
<link rel="icon"> | Aponta o favicon usado pelo navegador e pela busca | Recomendado |
<link rel="alternate" hreflang="..."> | Relaciona as versões em outros idiomas ou regiões | Só em sites multilíngues |
<link rel="stylesheet"> | Carrega o CSS externo da página | Sim, quando há CSS externo |
<link rel="preconnect"> e <link rel="preload"> | Antecipa conexões e downloads de recursos críticos | Opcional |
<script> | Carrega ou declara o JavaScript da página | Conforme o caso |
<script type="application/ld+json"> | Publica os dados estruturados em JSON-LD | Recomendado |
Os metadados de busca dessa tabela têm tratamento próprio aqui no blog. O guia de meta tags funciona como índice do assunto, e cada elemento tem seu artigo: title tag, meta description, og tags, meta robots e rel canonical.
Alguns elementos costumam ficar de fora das listas de meta tags e mesmo assim dependem do <head>. O favicon é declarado por <link rel="icon"> e o Google pode exibi-lo ao lado do resultado. O hreflang, também via <link>, é o que evita que a versão em português e a versão em outro idioma de um mesmo conteúdo disputem entre si. As dicas de recurso, preconnect e preload, não têm efeito direto em ranqueamento, mas atuam sobre o tempo de carregamento e, por consequência, sobre as métricas de experiência da página. E o JSON-LD com os dados estruturados, embora possa aparecer no <body>, é convencionalmente colocado no <head>, o que reforça a necessidade de manter a seção válida.
Existe uma ordem correta dentro do <head>?
Existe, para dois casos específicos. A declaração de codificação precisa estar inteiramente contida nos primeiros 1024 bytes do documento, conforme o padrão HTML, o que na prática significa colocar <meta charset="utf-8"> na primeira linha do <head>, antes de qualquer <title>, <link> ou <script>. Fora dessa janela, o navegador precisa adivinhar a codificação, e acentos e caracteres especiais podem quebrar.
O segundo caso são as dicas de recurso. Um preconnect só compensa se for lido antes de o navegador encontrar a referência ao recurso, então ele rende mais no topo do cabeçalho. Para o restante, a ordem é indiferente ao Google, com uma exceção: quando existe um elemento inválido no <head>, a posição dele passa a determinar o que é lido e o que é descartado.
Qual a diferença entre <head> e <header>
São elementos sem relação entre si, apesar dos nomes parecidos. O <head> guarda metadados invisíveis e fica fora do <body>. O <header> é conteúdo visível, dentro do <body>, e costuma reunir logotipo, menu de navegação e o título de uma seção ou artigo.
A diferença de quantidade também separa os dois. Cada documento tem um único <head>, enquanto uma mesma página pode ter vários <header>, um por <article> ou <section>. Nada colocado no <header> funciona como metadado, e o Google só considera o rel="canonical" declarado dentro do <head>.
Quais tags são válidas dentro do <head>
O padrão HTML permite apenas oito elementos dentro do <head>, e a documentação do Google sobre metadados válidos repete exatamente a mesma lista: title, meta, link, script, style, base, noscript e template. Qualquer elemento fora dessa lista torna o <head> inválido.
O Google cita iframe e img como os intrusos mais comuns. Na prática, também aparecem div, p e texto solto, quase sempre injetados por plugins, tags de terceiros, banners de consentimento ou variáveis de template que não foram resolvidas. Um <head> mínimo e válido tem esta cara:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Título da página</title>
<meta name="description" content="Resumo da página em uma ou duas frases.">
<link rel="canonical" href="https://exemplo.com.br/pagina/">
</head>O que acontece quando uma tag inválida entra no <head>
O navegador e o Google fecham o <head> à força imediatamente antes da tag inválida. Tudo que vinha depois é reinterpretado como conteúdo do <body>, o que deixa os metadados seguintes órfãos e inúteis para fins de indexação. O Google faz o parse do HTML e corrige problemas semânticos, e uma tag não suportada encerra o cabeçalho antes da hora.
Veja o efeito em um exemplo. No trecho abaixo, a <div> de um script de terceiros encerra o <head> na terceira linha, e o canonical e a diretiva de indexação simplesmente deixam de existir para o buscador:
<head>
<meta charset="utf-8">
<title>Título da página</title>
<div id="widget-parceiro"></div>
<link rel="canonical" href="https://exemplo.com.br/pagina/">
<meta name="robots" content="noindex">
</head>As consequências variam conforme o que foi perdido. Um canonical ignorado devolve a escolha da URL representativa aos demais sinais que o Google coleta, o que pode consolidar o conteúdo na versão errada. Um noindex ignorado não impede a indexação, e a página que deveria ficar fora do índice permanece na busca. Uma description descartada faz o Google montar o snippet por conta própria, a partir do conteúdo da página. A recomendação oficial para quando o elemento inválido é inevitável é posicioná-lo depois de tudo o que você precisa que seja lido.
Como conferir o <head> da sua página
Compare duas versões do cabeçalho: o HTML original, no código-fonte, e o DOM renderizado, no inspetor do navegador. O <head> que vale para a busca é o segundo, porque o Google executa o JavaScript antes de extrair os metadados, como detalhado no artigo sobre como o Google renderiza uma página.
O diagnóstico do fechamento forçado é visual e leva segundos. Abra o painel Elements do navegador e observe onde as tags estão penduradas: se um <link rel="canonical"> aparece como filho do <body> em vez do <head>, ou se há uma <div> dentro do cabeçalho, o <head> já foi encerrado antes do previsto. A Inspeção de URL do Search Console mostra o mesmo HTML renderizado, com a vantagem de refletir o que o Googlebot obteve, e não o que o seu navegador obteve.
Uma última verificação diz respeito a metadados criados por JavaScript. A documentação de meta tags do Google recomenda evitar injetar ou alterar meta tags por script sempre que possível e testar a implementação com rigor quando não houver alternativa. O motivo é de risco concentrado, pois uma falha de renderização derruba vários elementos de uma só vez. Para uma varredura rápida do cabeçalho e do restante da página, o SEO Check aqui do site cobre os itens principais.
Perguntas frequentes sobre o elemento <head>
O <head> é obrigatório em HTML?
Como elemento, sim. Como tag escrita, não. O padrão HTML permite omitir as tags <head> e </head> em determinadas condições, e o parser cria o elemento assim mesmo, de modo que ele sempre existe no DOM. Escrever as duas tags explicitamente é a prática recomendada, porque elimina ambiguidade para quem edita o código depois.
Posso colocar uma <div> ou uma <img> dentro do <head>?
Não. Nenhuma das duas está entre os oito elementos permitidos pelo padrão, e a presença de qualquer uma delas faz o navegador e o Google encerrarem o <head> naquele ponto. O resultado é que todo metadado posicionado abaixo do elemento inválido deixa de ser considerado.
O que acontece se a página não tiver <title>?
A página continua indexável, mas você perde o controle sobre o texto do resultado. Sem um <title> utilizável, o Google gera o link do título a partir de outros sinais da página, como o cabeçalho principal, textos grandes e em destaque e, em alguns casos, o texto âncora de links externos que apontam para a URL.
Dá para inserir meta tags por JavaScript?
Funciona, porque o Google renderiza as páginas antes de indexar. Ainda assim, a documentação do Google recomenda evitar essa prática sempre que possível e testar bem quando for necessária. A alternativa mais segura é entregar os metadados críticos já no HTML servido, deixando para o JavaScript apenas o que não pode ser resolvido no servidor.
Onde fica declarado o idioma da página?
O idioma principal não fica no <head>, ele é declarado no atributo lang do elemento <html>, como em <html lang="pt-BR">. Dentro do <head> você declara as versões alternativas do conteúdo em outros idiomas ou regiões, com <link rel="alternate" hreflang="...">.
Próximos passos
O <head> é o container, e cada metadado que vive nele tem regras próprias de escrita e de uso. O caminho natural a partir daqui é o guia de meta tags, que funciona como índice do assunto, e de lá para os artigos de title tag, meta description e og tags.
Se o seu interesse é o lado de indexação, os dois artigos que se conectam diretamente a este são o de rel canonical, que depende de estar no <head> para ser lido, e o de meta robots, que controla a entrada da página no índice. Para entender o que o Google faz com esses metadados depois de coletá-los, o artigo sobre como funciona a indexação no Google cobre o parse do HTML, o agrupamento de duplicatas e a seleção da versão canônica.