HTML Guide
A <meta>
element without a itemprop
or property
attributes has been found in an unexpected place.
While the <meta>
element is commonly used within the <head>
section of the document, it can also be used within the <body>
section, for example in the context of defining microdata, as in this example:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>
When used within the <body>
section, the <meta>
element is required to have a itemprop
or property
, and a content
attribute, and it can’t have a http-equiv
or charset
attribute.
A common cause for this issue is including a <meta>
element that was intended for the <head>
section (for example one containing a http-equiv
attribute in the <body>
, for example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
...
</form>
Learn more:
Related W3C validator issues
There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.
To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:
-
Using the charset attribute:
<meta charset="UTF-8">
This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.
-
Using the content and name attributes:
<meta name="description" content="A brief description of the webpage content.">
This provides a description of the webpage content, which can be used by search engines.
-
Using the http-equiv and content attributes:
<meta http-equiv="refresh" content="30">
This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.
-
Using the property and content attributes:
<meta property="og:title" content="Your Webpage Title">
This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.
Correct Usage Example
Here’s an example of an HTML document with a properly formed set of <meta> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta http-equiv="refresh" content="30">
<meta property="og:title" content="Your Webpage Title">
<title>Document</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
A <meta> element without a content, itemprop or property attributes has been found in an unexpected place.
Check its attributes and context - depending on the section of the document (<head> or <body>), the <meta> element allows different attributes.
A <meta> element has an invalid value for the property attribute, probably caused by invalid double quotes. Check out the double quotes, ” should be ".
The correct markup for this meta tag should be like:
<meta property="og:type" content="website" />
link elements are used to link to external resources, such as stylesheets, scripts, and icons. Including relevant attributes in the link element helps provide additional information about the linked resource.
-
rel: The rel attribute specifies the relationship between the current document and the linked resource, and can also provide additional information about the type of linked resource. For example, using rel="stylesheet" for a linked CSS file or rel="icon" for a linked favicon.
-
itemprop: If the linked resource is an HTML document or a microdata vocabulary like Schema.org, use itemprop to specify properties the linked document or vocabulary defines.
-
property: If the linked resource is an RDF resource, use property to provide metadata about the relationship between the current document and the resource being linked.
Example with rel attribute:
<head>
<link rel="stylesheet" href="styles.css">
<!-- Other meta tags -->
</head>
Example with itemprop and property attributes:
<head>
<link itemprop="mentions" href="https://example.com/">
<link property="schema:citation" href="https://example.com/article.html">
<!-- Other meta tags -->
</head>
By adding itemprop, property, or rel as necessary, you can ensure your link elements provide appropriate context and semantic meaning to your HTML document.
A <meta> tag has been found that is missing its required content. Example of a valid meta tag:
<meta name="description" content="Description of the page" />
<meta> tags, used for defining metadata about HTML documents, must appear within the <head>...</head> section, but it has been found out of place. Check the document structure to ensure there are no <meta> tags outside the head section.
A common cause of this issue is having a duplicated, out of place <head>...</head> section. Ensure that this section appears in its proper place and is the only container for <meta> tags.
An itemprop attribute has been found in the document, but it cannot be associated to any item. Most probable cause is the lack of an itemscope attribute defining an item.
Microdata allows nested groups of properties, which must be scoped to the item they belong to, as in this example:
<div itemscope>
<p>My name is <span itemprop="name">Liza</span> and I'm <span itemprop="age">48</span> years old.</p>
</div>
The <meta charset> is expected to appear at the beginning of the document, within the first 1024 bytes. Consider moving it to the beginning of the <head> section, as in this example:
<head>
<meta charset="utf-8">
...
</head>
A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. For HTML documents, the standard way to declare a document character encoding is by including a <meta> tag with a charset attribute, typically <meta charset="utf-8">.
According to the W3C standard:
The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.
In order to define the charset encoding of an HTML document, both of these options are valid, but only one of them must appear in the document:
<!-- This is the preferred way -->
<meta charset="UTF-8">
<!-- This is the older way, also valid -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
The <meta charset> tag, used to define the character encoding, must appear only once in a document, within the <head> section.