Sobre este problema HTML
A especificação HTML restringe onde os elementos <link> podem aparecer com base no seu propósito. Links que carregam recursos necessários para renderização (como folhas de estilo e recursos pré-carregados) ou que transportam microdata (itemprop) são permitidos em <body> porque têm uma relação direta com o conteúdo ao seu redor. Outros tipos de elementos <link>—URLs canónicos, ícones, versões alternativas—são metadados de nível de documento e pertencem exclusivamente ao <head>.
Isto é importante por várias razões. Os browsers podem ignorar ou lidar de forma inconsistente com elementos <link> colocados em localizações inesperadas, levando a problemas como sinais canónicos em falta para motores de busca ou referências de favicon quebradas. A conformidade com os padrões também garante que o seu HTML é compatível com futuras versões e comporta-se de forma previsível em todos os browsers.
Causas comuns
Colocação direta em <body>
A causa mais direta é colocar um <link> de metadados diretamente dentro de <body>, frequentemente devido a um CMS, sistema de templates ou plugin que o injeta na localização errada.
Criação implícita de <body> pelo parser
Uma causa mais subtil ocorre quando um elemento que só é válido em <body> aparece dentro de <head>. Quando o parser HTML encontra tal elemento (como <img>, <div>, ou <p>), fecha implicitamente o <head> e abre o <body>. Quaisquer elementos <link> que se seguem são então tratados como descendentes de <body>, mesmo que pareçam estar dentro de <head> no seu código fonte.
Por exemplo, uma tag <img> no <head> faz com que o parser mude para contexto de body, então o subsequente <link rel="canonical"> é interpretado como estando dentro de <body> e desencadeia este erro.
Como corrigir
-
Mover elementos
<link>não permitidos para<head>: Se um<link>comrel="canonical",rel="icon",rel="alternate", ou valores similares estiver em<body>, mova-o para<head>. -
Verificar elementos exclusivos de body em
<head>: Procure elementos como<img>,<div>,<p>,<script>(semsrc), ou conteúdo de texto que possa ter sido acidentalmente colocado em<head>. Estes fazem com que o parser feche implicitamente o<head>, tornando tudo depois deles parte do<body>. -
Usar valores
relpermitidos se a colocação em body for intencional: Se você genuinamente precisar de um<link>em<body>, certifique-se de que usa um dos valoresrelpermitidos (stylesheet,preload,prefetch,preconnect,dns-prefetch,modulepreload,pingback,prerender) ou tem um atributoitemprop.
Exemplos
❌ <link rel="canonical"> colocado em <body>
<body>
<link rel="canonical" href="https://example.com/page">
<h1>Bem-vindo</h1>
</body>
✅ Movê-lo para <head>
<head>
<title>A Minha Página</title>
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<h1>Bem-vindo</h1>
</body>
❌ Uma <img> em <head> força contexto de body implícito
Mesmo que o <link> pareça estar em <head>, a <img> faz com que o parser mude para contexto de body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Teste</title>
<img src="photo.jpg" alt="Um gato sorridente">
<link rel="canonical" href="https://example.com/">
</head>
<body>
<p>Algum conteúdo</p>
</body>
</html>
✅ Mover a <img> para <body> onde pertence
<!DOCTYPE html>
<html lang="en">
<head>
<title>Teste</title>
<link rel="canonical" href="https://example.com/">
</head>
<body>
<img src="photo.jpg" alt="Um gato sorridente">
<p>Algum conteúdo</p>
</body>
</html>
✅ Elementos <link> permitidos dentro de <body>
Estes são válidos porque usam valores rel permitidos:
<body>
<article>
<link rel="stylesheet" href="article-theme.css">
<h2>Título do Artigo</h2>
<p>Conteúdo aqui.</p>
</article>
<link rel="prefetch" href="/next-page.html">
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
</body>
✅ Usar itemprop para microdata
Um <link> com um atributo itemprop também é válido dentro de <body>:
<body>
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Widget</span>
<link itemprop="availability" href="https://schema.org/InStock">
</div>
</body>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.
Saiba mais: