I have a question about structured data. There are several different lists on my site:
main sections (categories) and galleries in the main column.
the most popular and other lists (e.g. calendar) in the right column
related news (on the single view) below the content
The structure presentation below:
My question is - what tags to use for each of the lists. I have reviewed dozens of threads and over the years the structure of markers has changed and every thread proposes something else. At the moment I really don't know what "markup system" to use on the site.
Is such a sets of tags sufficient enough for:
Category and most popular lists:
<section itemscope itemtype="http://schema.org/CollectionPage">
<article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
<article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
</section>
Gallery list:
<section itemscope itemtype="http://schema.org/ImageGallery">
<article itemprop="hasPart" itemscope itemtype="http://schema.org/ImageObject">
...
</article>
<article itemprop="hasPart" itemscope itemtype="http://schema.org/ImageObject">
...
</article>
</section>
Article with related news:
<div itemscope itemtype="http://schema.org/Blog">
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
Article body
</article>
<section>
Related post:
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
</section>
</div>
P.S. I use Microdata markup, not JSON-LD
Thanks for any help.
Related
I have a question regarding the correct use of the mainEntityOfPage, in this scenario:
The homepage of the site is of Organization type with name, description of the company, phone, address etc.
At the bottom of this page I have 3 snippets to 3 different articles published by this company.
So, I am trying to declare the homepage of Organization type, being the main topic of the web page. Also, I would like to declare using Schema.org that this company has written 3 different articles which are located on their own web pages. These snippets consists of headline of article, an introducing paragraph, a picture and a "read more" button.
I use the following code:
<body itemscope itemtype="http://schema.org/Organization" >
<a href="https://testsite.com/index.html" itemprop="url">
<img src="https://testsite.com/img/logo.jpg" itemprop="logo" alt="Company logo" />
</a>
<p itemprop="name">Company name</p>
<p itemprop="description">Company description</p>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-1-picture.jpg" />
<p itemprop="headline">Article 1 headline</p>
<p itemprop="description">Article 1 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-1.html">Read more</a>
</div>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-2-picture.jpg" />
<p itemprop="headline">Article 2 headline</p>
<p itemprop="description">Article 2 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-2.html">Read more</a>
</div>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-3-picture.jpg" />
<p itemprop="headline">Article 3 headline</p>
<p itemprop="description">Article 3 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-3.html">Read more</a>
</div>
</body>
The code above generates the following schema:
The code is valid with Structured Data Testing Tool.
I am afraid that using mainEntityOfPage here, 3 times, to introduce the article snippets would result into the situation that the search engine would wrongly consider my page of type CreativeWork rather than Organization type, which is the real main topic on this web page.
So, this code says to the search engine that the page is of Organization with 3 articles on separate pages, or only CreativeWork type?
Your structured data is not conveying what you intend to convey. It’s saying that the Organization is the primary entity on the three CreativeWorks.
So, I am trying to declare the homepage of Organization type, being the main topic of the web page.
For this, you need a WebPage item that represents the homepage.
<body itemscope itemtype="http://schema.org/Organization">
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
<link itemprop="url" href="https://example.com/" /> <!-- the canonical URL of your homepage -->
</div>
</body>
I would like to declare using Schema.org that this company has written 3 different articles which are located on their own web pages.
For this, you need properties that say how the company and the articles¹ are related, like:
publisher
author
etc.
Note that, for example, publisher is only defined for one direction (an article has a publisher), not for the other one (an organization has published an article).² So you have to provide this property in the Article, not in the Organization.
<article itemscope itemtype="http://schema.org/Article">
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/ItemPage">
<link itemprop="url" href="https://example.com/url-article-1.html" /> <!-- the canonical URL of the article page -->
</div>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="https://example.com/" /> <!-- the canonical URL of the organization’s homepage -->
</div>
</article>
¹ if they actually are articles, you should use the Article type instead of the parent type CreativeWork
² Microdata (in contrast to RDFa and JSON-LD) offers only a non-standardized way to use these properties in the other direction: see this answer
I want to create a breadcrumb navigation with the Microdata format.
So I'm using following BreadcrumbList markup and Google Structured Data Testing Tool recognized it:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home/fashionn">
<span itemprop="name">Fashion</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">Coats</span>
<meta itemprop="position" content="3">
</li>
</ol>
But from Bing Markup Validator I receved following message:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Regarding Bing documentation the following markup is correct for breadcrumb:
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home/fashion">
<span itemprop="title">Fashion</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Coats</span>
</li>
</ol>
So is there a way to create a breadcrumb navigation with Microdata format which would be valid both for Google and Bing?
To rephrase your goal, as far as I understand it: You want to markup your breadcrumbs
with Microdata
using two vocabularies (Schema.org and Data-Vocabulary.org)
without duplicating your content
so that Bing’s and Google’s testing tool still validate it.
Microdata makes it hard to mix vocabularies:
In itemtype, you can only use types from the same vocabulary.
In itemprop, you can mix properties from different vocabularies, but only the properties from one vocabulary can be specified in the shorter string form, while the properties from all other vocabularies have to be specified as absolute URIs.
(This isn’t a problem if consumers support the absolute URI form for the properties they recognize.)
(By the way, RDFa supports mixing vocabularies way better, so you might want to consider using RDFa instead of Microdata.)
A way to avoid the problem, maybe.
Use Data-Vocabulary.org for Bing and Google.
While the vocabulary Data-Vocabulary.org is deprecated and deleted (I wonder why Bing is still recommending it), Google still seems to support it, too (probably because it’s still used on many websites from back then, when Google recommended it, too).
I don’t know if it really works, but at least Google’s SDTT doesn’t give any warnings/errors for your Data-Vocabulary.org snippet.
Solutions, maybe.
Unfortunately, I can’t test it in Bing’s tool (because an account is required), so the following snippets don’t necessarily work.
itemref + absolute URIs for Data-Vocabulary.org’s title
This snippet uses Schema.org as primary vocabulary. An empty div outside of Schema.org’s BreadcrumbList is used to create the item for Data-Vocabulary.org’s Breadcrumb. This item references the a elements via itemref. It reuses the url property (because it’s named the same in both vocabularies) and provides Data-Vocabulary.org’s title property as absolute URI.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b1 b2">
</div>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Home</span>
</a>
</span>
</span>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Fashion</span>
</a>
</span>
</span>
<meta itemprop="position" content="2" />
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that Breadcrumb/title is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Whether it works in Bing’s testing tool depends on if Bing recognizes http://data-vocabulary.org/Breadcrumb/title as title property.
As the vocabulary is deleted, I’m not sure if it really was http://data-vocabulary.org/Breadcrumb/title instead of http://data-vocabulary.org/title, but if I remember it correctly, it should have been the first one.
itemref + absolute URIs for Schema.org’s name
Same idea like in the snippet above, but this time Data-Vocabulary.org would be the primary vocabulary, while Schema.org’s BreadcrumbList gets created in an empty div.
This is harder, because Schema.org’s structure requires more properties, so you have to create more empty elements.
<div itemscope itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b1">
</span>
<meta itemprop="position" content="1" />
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b2">
</span>
<meta itemprop="position" content="2" />
</div>
</div>
<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li itemprop="title">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://schema.org/name">Home</span>
</a>
</li>
<li itemprop="title">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://schema.org/name">Fashion</span>
</a>
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that name is not recognized; it’s specified as absolute URI, so it can be used everywhere).
I've had structured markup set up on a website now for around a week and Google has indexed about 20% of it however it's still not displaying. After checking the markup was correct in the validating tool I noticed this:
Everything looks fine other than the
offers [Offer]: http://www.website.co.uk/price-excluding-tax-990
Now take a look at the source code:
<div class="product-view" itemscope itemtype="http://schema.org/Product">
<span itemprop="sku">PM90-0100</span>
<div class="product-name">
<h1 itemprop="name">Basket PM90-0100</h1>
</div>
<p class="availability in-stock">Availability: <span>In stock</span></p>
<div class="price-box">
<span class="price-excluding-tax">
<span class="label">Excl VAT: </span>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price" id="price-excluding-tax-990">
<link itemprop="availability" href="http://schema.org/InStock"/>
<meta itemprop="priceCurrency" content="GBP" />
<span itemprop="price">£30.00</span>
</span>
<div itemprop="description" class="std">This is a brand new basket to fit various Freerider mobility scooters.</div>
[code continues...]
Does this all look symantically correct? Somehow in Webmaster Tools it is grabbing the price-excluding-tax-990 ID and using it in the offers [Offer]: - which seems odd.
Example markup of what I have:
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id="main" itemprop='mainContentOfPage' itemscope='itemscope' itemtype="http://schema.org/Blog">
<article itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
blah blah blah
</article>
<div>
<aside>
<ul>
<li><article><img/>popular post article</article></li>
<li><article><img/>popular post article</article></li>
</ul>
</aside>
</body>
What should I use for the articles within each list item? I thought of articleSection, but that doesn't make sense because it's not within an article schema. So I'm trying to wrap my around the best way to add Microdata here.
Moving the aside within the article isn't really a viable option either. This is Blogger, so doing that would be tricky, especially on the admin widget-management side of things.
Update (2016): In the meantime Schema.org introduced a property to denote that an item is the main/primary one for a page: mainEntity (see details). So the below answer is somewhat out of date.
If they are also blog posts, you would use BlogPosting, too.
Microdata is not only for the main content of a page. However, the Schema.org vocabulary currently lacks a property to mark an item as the main content item of a page (the property mainContentOfPage is only allowed for WebPage).
By using articleBody for the main BlogPosting, capable consumers should be able to deduce that the other BlogPosting items on the page (which naturally don’t have the articleBody property) are only linked/related posts.
So it could look like:
<div itemscope itemtype="http://schema.org/Blog">
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div itemprop="articleBody">…</div>
</article>
<aside>
<ul>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 4</span>
</article>
</li>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 5</span>
</article>
</li>
</ul>
</aside>
</div>
I have some structured data implemented in my website using microdata so that Google and other search engines could parse it and show appropriate rich snippets. I have added the appropriate markup for all the microdata tags that I have used but I am unable to view the rich snippets for my website while testing it using the Rich Snippets Testing Tool. I have gone through the usage guidelines and frequent issues section at the Google Webmaster but to no avail.
Upon debugging the html I found that the following snippet was successfully showing rich snippets when fed to the Rich Snippets Testing Tool.
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central </span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 box-map">
<h2>Location</h2>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
However as soon as an enclosing markup of ApartmentComplex is added as shown in the snippet below, the rich snippet is not visible.
<div itemscope itemtype="http://schema.org/ApartmentComplex" class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>
So assuming my page is about ApartmentComplex, and I want to include a Review of it, how should I structure/nest this markup?
I don't think there's anything wrong with your mark-up or Microdata. I just don't think that the Google Structured Data tool shows any rich snippets for http://schema.org/ApartmentComplex types - rich snippets are only available for certain schema.org types.
To prove this, change the wrapping ApartmentComplex type to a Product type, and remove the address (which isn't part of "Product") and you'll see that a rich snippet is produced in the Google Structured Data Testing Tool (because Google do show rich snippets for Products).
Edit to add: this is a possible workaround - Google will show rich snippets for schema.org types where the surrounding type is a Review, so you could use Review as the top-level type, then have the ApartmentComplex type as the "itemReviewed" property - this works in the Google Structured Data Testing Tool:
<div itemscope itemtype="http://schema.org/Review" class="container">
<div class="row" itemprop="itemReviewed" itemscope itemtype="http://schema.org/ApartmentComplex">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>