Verificação HTML: Atributo "name" não permitido no elemento "meta" neste ponto.

Sobre este problema HTML

Este erro é enganador à primeira vista porque a etiqueta <meta> em questão está frequentemente perfeitamente bem formada. O problema real está geralmente acima da etiqueta <meta> — um elemento que não pertence ao <head> (como <img>, <div>, <p>, ou outro conteúdo de fluxo) foi colocado lá. Quando o parser HTML encontra tal elemento dentro do <head>, fecha implicitamente o <head> e abre o <body>. A partir desse ponto, quaisquer etiquetas <meta> subsequentes estão agora tecnicamente dentro do <body>, onde o atributo name em <meta> não é permitido.

Noutros casos, o erro também pode ocorrer quando uma etiqueta <meta name="..."> é explicitamente colocada dentro do <body>, ou quando um erro de digitação ou etiqueta mal formada mais cedo no documento quebra a estrutura esperada do documento.

Isto importa por várias razões. Os motores de busca e plataformas de redes sociais dependem das etiquetas <meta> estarem no <head> para extrair descrições de páginas, dados Open Graph, e outros metadados. Se a estrutura do documento estiver quebrada e as etiquetas <meta> acabarem no <body>, estes metadados podem ser totalmente ignorados. Adicionalmente, elementos como <img> dentro do <head> não renderizarão como esperado, e a estrutura geral do documento será inválida, potencialmente causando comportamento imprevisível entre navegadores.

Como corrigir

Procure acima da etiqueta <meta> sinalizada. Encontre qualquer elemento no <head> que não pertença lá — culpados comuns incluem <img>, <div>, <span>, <p>, <a>, ou <section>.
Mova o elemento problemático para o <body> onde pertence.
Se a própria etiqueta <meta> estiver no <body>, mova-a para o <head>.
Verifique etiquetas mal formadas acima da <meta> — uma etiqueta não fechada ou um erro de digitação pode quebrar a compreensão do parser da estrutura do documento.

Apenas determinados elementos são permitidos dentro do <head>: <title>, <meta>, <link>, <style>, <script>, <noscript>, <base>, e <template>.

Exemplos

Um elemento inválido no `<head>` quebra o contexto

A etiqueta <img> não é permitida dentro do <head>. O parser fecha implicitamente o <head> quando a encontra, então a etiqueta <meta> que se segue acaba no <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <img src="photo.jpg" alt="A smiling cat">
    <meta name="description" content="A page about cats">
  </head>
  <body>
    <p>Welcome!</p>
  </body>
</html>

Mova a <img> para o <body> para corrigir o problema:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta name="description" content="A page about cats">
  </head>
  <body>
    <img src="photo.jpg" alt="A smiling cat">
    <p>Welcome!</p>
  </body>
</html>

Uma etiqueta `<meta>` acidentalmente colocada no `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <meta name="author" content="Jane Doe">
    <p>Hello world</p>
  </body>
</html>

Mova a etiqueta <meta> para o <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta name="author" content="Jane Doe">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Uma etiqueta mal formada perturba o `<head>`

Um > de fecho em falta numa etiqueta <link> pode confundir o parser, fazendo com que elementos subsequentes sejam mal interpretados:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css"
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <p>Content</p>
  </body>
</html>

Feche a etiqueta <link> corretamente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <p>Content</p>
  </body>
</html>