3

I am trying to get these meta tags to work with social media but I keep getting an error from the W3C validator:

The itemprop attribute was specified, but the element is not a property of any item.

I tried putting itemscope itemtype="http://schema.org/Products but that just made more errors. Here's my HTML source:

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">  
    <meta name="language" content="english"> 
    <meta name="keywords" content="'.$keywords.'">

    <meta property="og:type" content="website" />
    <meta property="og:image" content="'.$meta_image.'"/>
    <meta property="og:url" content="'.$meta_url.'" />
    <meta property="og:site_name" content="'.$meta_name.'"/> 
    <meta property="og:description" name="description" content="'.$description.'" />    
    <meta property="og:title" content="'.$title.'"/>

    <meta itemprop="name" content="'.$title.'">
    <meta itemprop="description" content="'.$description.'">
    <meta itemprop="image" content="'.$meta_image.'">
    <!-- … -->

What is wrong with my tags?

unor
  • 92,415
  • 26
  • 211
  • 360
BragDeal
  • 748
  • 2
  • 10
  • 25

2 Answers2

6

Add an html element with an itemscope attribute, like this:

<!DOCTYPE html>
<html itemscope>
  <head>
    <meta charset="utf-8">  
    …
    <meta itemprop="name" content="'.$title.'">
    …

Incidentally you can also just omit the head start tag, and you should always specify a title in every HTML document; so:

<!DOCTYPE html>
<html itemscope>
  <meta charset="utf-8">
  <title>Products</title>
  …
  <meta itemprop="name" content="'.$title.'">
  …

The reason you need the itemscope attribute is because the itemscope attribute is what actually creates the item.

In other words, without itemscope, you don’t actually have an item—instead, you just have a bunch of properties that aren’t associated with anything.

And by specifying the itemscope attribute on the html element, what the document is saying is, basically something like, The scope of the properties specified here is the entire document., or The properties specified here apply to the entire document.,

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
3

Like sideshowbarker explains, every itemprop needs an item (created by an itemscope) that it belongs to.

But if you intend to use a vocabulary (like Schema.org), you should also add an itemtype in addition to the itemscope. The itemtype attribute gives the type (from a vocabulary) of the item (= itemscope) to which you apply the properties (= itemprop).

You said you tried to add the type http://schema.org/Products, but this one does not exist. If you mean http://schema.org/Product instead, you could add the following to your html or head element:

<head itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="'.$title.'">
  <meta itemprop="description" content="'.$description.'">
  <link itemprop="image" href="'.$meta_image.'">
</head>

(Note that you must use the link element instead of the meta element if the value is a URI; I changed it accordingly for the image property.)

Luca Bezerra
  • 1,160
  • 1
  • 12
  • 23
unor
  • 92,415
  • 26
  • 211
  • 360