Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

schema.org Microdata itemType for different parts of a Blog...

Featured Replies

Hi everyone,

 

I'm in the process of adding schema.org microdata to an HTML5 framework for Wordpress.

 

On the single blog posts, should the itemscope itemtype="BlogPosting" go in the html tag of the page, or in the article tag? It occured to me that if it is in the html tag, then it wouldn't be valid to mark up breadcrumbs and other navigation elements (because that requires an itemtype="Website", unless I'm mistaken?).

 

(Likewise for static pages with the itemtype="Article").

 

 

In addition, where should the author be marked up? There are lots of blogs which have post meta at the top of a post:

 

Written by Joe Bloggs on the 48th September 2143.

 

And author information AFTER the post:

 

Joe Bloggs is the owner of joebloggs.com, and runs workshops on how to give your children really dull and generic names. He likes to watch paint dry and grass grow in his spare time.

 

Which should have the itemscope itemtype="Person", and the associated itemprop markup? The meta at the top of the post, or the author block at the bottom? Should the author itemprop="URL" be part of the link to the author's archive page on the blog, or the author's personal website (if listed in the author information at the bottom of the post)?

 

Many thanks!

 

Martin

  • 8 months later...

Hi Moderato,

 

From my experience schema microdata can be inside one another. Here's an example i used on a product list page however the 'page' data and 'main content of page' is how to distinguish stuff.

 

<html itemscope itemtype="http://www.schema.org/CollectionPage">
<head>
<title itemprop="name">Website Page Title</title>
<meta name="description" itemprop="description" content="Web page description." />
<meta name="keywords" itemprop="keywords" content="keywords." />
<meta itemprop="image" content="http://www.theirdomain.com/social.jpg" />
<link rel="canonical" itemprop="url" href="http://www.theirdomain.com/pagename.php" />
</head>

<body>

<div class="crumbs" itemprop="breadcrumb"><a href="/">Home</a> / <a href="/pagename.php">Section</a></div>

<div id="content" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/ItemList">

<h1><span itemprop="name">Section Products</span> | Updated: <span itemprop="dateModified">20/02/2013</span></h1>

<p itemprop="description">Our current list of items from sale currently including product type a, b and c</p>

<div class="pod" itemprop="itemListElement" itemscope itemtype="http://www.schema.org/IndividualProduct">
<h2><span itemprop="name">Car Name</span> for Sale</h2>
<p itemprop="description">Quick product description preview ... more</p>
<div class="podliner">
<a href="/stock-list/1426/"><img src="new-stock/1426_thumbnail.jpg" alt="Car Name Image" itemprop="image" /></a>
<ul>
<li itemprop="color">Reflex Silver Metallic</li>
<li itemprop="model">2.5 TDI 174 ps (Diesel)</li>
<li itemprop="releaseDate">Feb 2008</li>
<li itemprop="offers" itemscope itemtype="http://www.schema.org/Offer"><b itemprop="price">£200.00</b><meta itemprop="availability" itemscope itemtype="http://www.schema.org/InStock" /></li>
</ul><div class="clear"></div>
</div>
<div class="more"><a href="/stock-list/1426/" itemprop="url"><img src="/layout/view-details.png" alt="Full Details" /></a></div>
</div>


<div class="pod" itemprop="itemListElement" itemscope itemtype="http://www.schema.org/IndividualProduct">
<h2><span itemprop="name">Car Name 2</span> for Sale</h2>
<p itemprop="description">Quick product description preview ... more</p>
<div class="podliner">
<a href="/stock-list/1427/"><img src="new-stock/1426_thumbnail.jpg" alt="Car Name Image" itemprop="image" /></a>
<ul>
<li itemprop="color">Blue</li>
<li itemprop="model">2.0 (Petroll)</li>
<li itemprop="releaseDate">Jun 2012</li>
<li itemprop="offers" itemscope itemtype="http://www.schema.org/Offer"><b itemprop="price">£500.00</b><meta itemprop="availability" itemscope itemtype="http://www.schema.org/InStock" /></li>
</ul><div class="clear"></div>
</div>
<div class="more"><a href="/stock-list/1427/" itemprop="url"><img src="/layout/view-details.png" alt="Full Details" /></a></div>
</div>


</div>



<div id="footnote"><p><span itemprop="copyrightHolder" itemscope itemtype="http://www.schema.org/AutoDealer"><span itemprop="legalName">Car Dealer Name Limited</span> | <span itemprop="location" itemscope itemtype="http://www.schema.org/PostalAddress"><span itemprop="streetAddress">Their Street</span>, <span itemprop="addressLocality">Gatwick</span>, <span itemprop="addressRegion">West Sussex</span> <span itemprop="postalCode">JM2 6NN</span></span> | Reg. <span itemprop="taxID">01234567</span> | V.A.T. <span itemprop="vatID">881 5858 06</span><span itemprop="geo" itemscope itemtype="http://www.schema.org/GeoCoordinates"><meta itemprop="latitude" content="50.966057" /><meta itemprop="longitude" content="-0.137045" /></span></span></div>


</body>

</html>

Edited by NoClass

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.