I defined multiple ItemLists on one page, and the Chrome extension Structured Data Testing Tool says: "ITEMLISTS_MULTIPLE_LISTS_ON_PAGE"
Is there any way to define multiple ItemList elements within one page while being still valid?
<div vocab="http://schema.org/" typeof="ItemList">
<h2 property="name">Top 10 laptops</h2><br>
<link property="itemListOrder" href="http://schema.org/ItemListOrderDescending" />
<p>1. <span property="itemListElement">HP Pavilion dv6-6013cl</span></p>
<p>2. <span property="itemListElement">Dell XPS 15 (Sandy Bridge)</span></p>
<p>3. <span property="itemListElement">Lenovo ThinkPad X220</span></p>
...
</div>
<div vocab="http://schema.org/" typeof="ItemList">
<h2 property="name">Top 10 tablets</h2><br>
<link property="itemListOrder" href="http://schema.org/ItemListOrderDescending" />
<p>1. <span property="itemListElement">Apple iPad</span></p>
<p>2. <span property="itemListElement">Samsung Galaxy Tab S3</span></p>
<p>3. <span property="itemListElement">Asus ZenPad 3S 10</span></p>
...
</div>
Google doesn't allow this.
What one could do is create an ItemList for the h2 items and create intermediary pages per h2 element
Related
I am trying to create a schema to use with several tables that use a list of products (e.g. bottles) arranged based on either height, volume, width, etc.
I tried this Microdata:
<div itemscope itemtype="http://schema.org/ItemList" id="id1">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="1" />
<span itemprop="item" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name" class="name">Coke Bottle</span>
<span class="measure">
<span itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">2359</span>
<span itemprop="unitText">mm</span>
<meta itemprop="unitCode" content="MMT" />
</span> /
<span itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">92.52</span>
<span itemprop="unitText">in</span>
<meta itemprop="unitCode" content="INH" />
</span>
</span>
</span>
</li>
</ul>
</div>
The problem is that the measure is not associated directly with the product.
How can I structure this data using Microdata to maintain the measurement values using QuantitativeValue and make the ItemList work for my need?
These are just tables showing a list of product names ordered by these values either ascending or descending, they are not used for navigation, just presenting information based on aggregated data.
In your post I see the following contradictions:
The problem is that the measure is not associated directly with the product.
and
These are just tables showing a list of product names
However, if this is a product, you can use the following the valid markup for your list:
<div itemscope itemtype="https://schema.org/ItemList" id="id1">
<ul>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="position" content="1" />
<span itemprop="item" itemscope itemtype="https://schema.org/Product">
<a itemprop="url" href=example.com/list.html#cokebottle><span itemprop="name" class="name">Coke Bottle</span></a>
<span class="measure" itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue">
<span itemprop="value">2359</span>
<span itemprop="unitText">mm</span>
<meta itemprop="unitCode" content="MMT" />
<meta itemprop="propertyID" content="http://www.unece.org/fileadmin/DAM/cefact/recommendations/bkup_htm/add3lm.htm" /> /
<span itemprop="value">92.52</span>
<span itemprop="unitText">in</span>
<meta itemprop="unitCode" content="INH" />
<meta itemprop="propertyID" content="http://www.unece.org/fileadmin/DAM/cefact/recommendations/bkup_htm/add3hk.htm" />
</span>
</span>
</li>
</ul>
</div>
Here we used the guide of Google for Single, all-in-one-page list:
A single, all-in-one-page list hosts all list information, including full text of each item: for example, a gallery of recipes for various kinds of muffins, all contained on one page.
Note that the reference (s) for this markup must have the same URL, but different anchors such as #cokebottle in the above example. So it should be a list of all of which parts (and links to these parts) are installed on one web page.
Here we also use the type PropertyValue as embedded in the property additionalProperty. This property is part of the type Product so all markup is semantic relation and description for the specific product.
Also note that here we used the property propertyID with URL as the identifier of the value of this property.
You can’t associate a QuantitativeValue with a Thing.
The best practice is to use the most specific type available. In your case, this would be Product, or one of its sub-types, if it applies (IndividualProduct, ProductModel or SomeProducts).
This allows you to use the properties depth, height, weight, and width, all of which which can take a QuantitativeValue value.
I have adapted a code taken from example 2 on http://schema.org/ItemList
How do I use it together with Product? On frontpage and some other pages I have a list of products for which I would like to have a better markup.
The following code gives the error
A value for the position field is required.
but Product doesn't have a position, so if there is a value for position it gives different error.
<ul itemscope itemtype="http://schema.org/ItemList">
<meta itemprop="numberOfItems" content="10" />
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<!-- <meta itemprop="position" content="1" /> -->
<a href="#" itemprop="url">
<img src="asdf.jpg" itemprop="image">
<div class="product-list__title" itemprop="name">
Product name
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">
$12
</div>
<link itemprop="availability" href="http://schema.org/InStock" />
</div>
</a>
</li>
</ul>
The itemListElement property has three expected values:
ListItem
Text
Thing
ListItem is also a Thing, but it’s listed explicitly because it has a special role here: ListItem provides the position property. If you need to convey the position of the list items, you have to provide ListItem values.
Note that not every ItemList needs this. Your example with using Product values is fine (apart from the meta element which can’t be a child of ul), and unless you try to qualify for Google’s rich result (this is what the error message is about), you could keep it like that.
If you do want to provide the positions, an itemListElement could look like this:
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="1" />
<div itemprop="item" itemscope itemtype="http://schema.org/Product">
<!-- your Product -->
</div>
</li>
I use itemscopes for a gallery, based in Brazil but they also have two other locations for the exhibitions somewhere else, all of them showing up in the footer.
Can I use multiple Location Schemes on a page? If so, how would I do this? Is it fine if I just duplicate the following, or should I split it up with the first belonging to Organization and the other two to Places?
<p itemscope itemtype="http://schema.org/Place">
<span itemprop="name" style="display:none;">Gallery</span>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">{!! $street !!}</span><br>
<span itemprop="addressLocality">{!! $town !!}</span><br>
<span itemprop="postalCode">{!! $postal !!}</span>
<span itemprop="addressRegion">{!! \App\Info::val('adresscountry') !!}</span><br>
<span itemprop="telephone">{!! $phone !!}</span><br><br>
<span>{!! $openinghours !!}</span><br><br>
<span itemprop="email">mail#gallery.com</span><br><br>
</span>
</p>
It is one organization that owns three places where exhibitions are held. It would be nice if every place would be featured on search machines, no need for the specific exhibitions.
Note that the following doesn’t necessarily lead to rich results in search engines. In case of Google Search, it seems they don’t offer a rich result for places (and even if they would, it would probably require a dedicated page per place). However, they have a rich result for events.
You could provide an Organization item with three location values:
<div itemscope itemtype="http://schema.org/Organization">
<div itemprop="location" itemscope itemtype="http://schema.org/Place" id="loc-1"><!-- location 1 --></div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" id="loc-2"><!-- location 2 --></div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" id="loc-3"><!-- location 3 --></div>
</div>
For each ExhibitionEvent, you could reference its location (assuming that the places are part of the footer on the event pages, too) via the itemref attribute:
<div itemscope itemtype="http://schema.org/ExhibitionEvent" itemref="loc-2">
</div>
I am using ng-flow in my app, is there any way to limit the number of files for upload?
A code sample:
<div class="thumbnail" ng-show="$flow.files.length">
<img flow-img="$flow.files[0]" />
</div>
<div>
Select image
Change
<a href="#" class="btn btn-danger" ng-show="$flow.files.length"
ng-click="$flow.cancel()">
Remove
</a>
</div>
The attribute flow-file-added is expecting a boolean value.
You can put all your conditions in there.
$flow.files.length returns the number a files you have already added
For example:
<div flow-init flow-files-submitted="$flow.upload()" flow-file-added="$flow.files.length<3"></div>
I have some slightly awkward markup and need to reference some elements from a separate container, and prevent those elements from appearing under the parent in their hierarchy. How can I do this?
Here's my (simplified) markup:
<body itemscope itemtype='https://schema.org/AboutPage'>
<div itemscope itemtype="https://schema.org/ProfessionalService">
<ul>
<li><img id="photo-emp1" itemprop="image" src="..."/></li>
<li><img id="photo-emp2" itemprop="image" src="..."/></li>
<li><img id="photo-emp3" itemprop="image" src="..."/></li>
<li><img id="photo-emp4" itemprop="image" src="..."/></li>
</ul>
<div id="tab-emp1" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp1">
<h1 itemprop="name">John Doe</h1>
<h2 itemprop="jobTitle">Vice President, Finance</h2>
<div itemprop="description">John is...</div>
</div>
<div id="tab-emp2" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp2">
<h1 itemprop="name">Jane Roe</h1>
<h2 itemprop="jobTitle">Vice President, Operations</h2>
<div itemprop="description">Jane is...</div>
</div>
...
</div>
</body>
The structure is required for a tab control, so I can't rearrange the markup.
The itemref attribute on the Person correctly drags the image 'under' the https://schema.org/Person node.
However, the image elements ALSO appear as properties under the https://schema.org/ProfessionalService node, which is not correct or desired.
How can I keep the image elements in their current location, reference them under Person, but prevent them from appearing under ProfessionalService?
Just add the itemscope attribute to the ul element. You'll get an extra, disconnected, item, but the images will no longer be part of the ProfessionalService item.