Sobre este problema HTML
O elemento <meta> é usado para fornecer metadados sobre um documento HTML. De acordo com a especificação HTML, um elemento <meta> deve servir um propósito específico, e esse propósito é determinado pelos seus atributos. Uma tag <meta> vazia ou uma com apenas um atributo charset no contexto errado irá desencadear este erro de validação.
Existem vários padrões válidos para elementos <meta>:
-
name+content: Pares de metadados padrão (por exemplo, description, viewport, author). -
http-equiv+content: Directivas pragma que afetam como o navegador processa a página. -
charset: Declara a codificação de caracteres do documento (válido apenas uma vez, no<head>). -
itemprop+content: Metadados de microdata, que podem aparecer tanto no<head>como no<body>. -
property+content: Usado para metadados Open Graph e RDFa.
Quando uma tag <meta> não corresponde a nenhum destes padrões válidos, o validador levanta este erro. As causas mais comuns são:
-
Esquecer o atributo
contentquando se usanameouproperty. - Usar atributos não-padrão sem os obrigatórios (por exemplo, especificar apenas um atributo personalizado).
-
Colocar um meta
charsetno<body>, onde não é válido. -
Erros tipográficos em nomes de atributos como
contentsem vez decontent.
Isto é importante para a conformidade com os padrões e também pode afetar o SEO e partilha em redes sociais. Os motores de busca e crawlers de redes sociais dependem de tags <meta> devidamente formadas para extrair informação da página. Tags mal formadas podem ser silenciosamente ignoradas, significando que os seus metadados não terão efeito.
Exemplos
Incorreto: <meta> com name mas sem content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="description">
</head>
A tag <meta name="description"> está em falta com o seu atributo content, por isso o validador reporta o erro.
Correto: <meta> com name e content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="A brief description of the page.">
</head>
Incorreto: <meta> com property mas sem content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title">
</head>
Correto: <meta> Open Graph com property e content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title" content="My Page">
</head>
Incorreto: <meta> com apenas um atributo não-padrão
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="theme-color" value="#ff0000">
</head>
Aqui, value não é um atributo válido para <meta>. O atributo correto é content.
Correto: usar content em vez de value
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="theme-color" content="#ff0000">
</head>
Incorreto: tag <meta> vazia sem atributos significativos
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta>
</head>
Um elemento <meta> sem atributos não serve qualquer propósito e deve ser completamente removido.
Correto: usar itemprop no <body>
O atributo itemprop permite que <meta> seja usado dentro do <body> como parte de microdata:
<body>
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Example Product</span>
<meta itemprop="sku" content="12345">
</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.