My data is spread all over so I can't keep this format :
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">
<p itemprop="description">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">
</div>
</div>
Like you see in the code below the first thing on the page is the category path which has to be inside Offer schema than I have the image and the title which belong to Product than I have eligibleQuantity that again belongs to the Offer and so on....
So I added the :
<div itemscope itemtype="http://schema.org/Product">
In the beginning of the page and closed it at the end and than whenever I had an element that does not belong to the product schema like "eligibleQuantity" for example I would do this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
The problem is I don't know if this is the correct way to do it and can't figure another way. I also get the "Warning: Incomplete microdata with schema.org."
Here is a link to the page :
https://www.pchounds.com/item.php?id=82627#.UTi7kRz_mSp
and below is some code from the page so you can have an idea what I did. Thank you.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="breadcrumb"> {L_041}:<span itemprop="category"> {TOPCATSPATH}</span> </div>
...........................................................................................
!-- IF B_HASIMAGE -->
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image"
src="{SITEURL}getthumb.php?w={THUMBWIDTH}&fromfile={PIC_URL}" border="0" alt="title" align="center"><br>
<h1 itemprop="name" style="line-height:24px;">{TITLE}</h1>...........................................................................................
<!-- IF QTY gt 1 -->
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
<!-- ENDIF -->
<!-- IF B_HASENDED -->
{L_904}<br />
<!-- ENDIF -->
<!-- IF ITEM_CONDITION -->
<b> {L_1036}:</b> <span itemprop="itemCondition">{ITEM_CONDITION}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MANUFACTURER -->
<b> {L_1037}:</b> <span itemprop="manufacturer">{ITEM_MANUFACTURER}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MODEL -->
<b> {L_1038}:</b> <span itemprop="mpn">{ITEM_MODEL}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_COLOUR -->
<b> {L_1039}:</b> <span itemprop="color">{ITEM_COLOUR}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_YEAR -->
<b> {L_1040}:</b> {ITEM_YEAR}<br />
<!-- ENDIF -->
</small>
offer must have a price, <span itemprop="price"> must be followed by the value of the price but is not and there are multiple Offers when there should just be one. Looking at the current test results from Google's structured data testing tool there are 5 errors, each states the price is missing.
The problem seems to be that each part of the offer has a separate `http://schema.org/Offer' at the start - so it is expecting 5 prices, one for each of the 5 offers.
What you need to do is declare http://schema.org/Offer' **once**, for example an extra` which remains open until all offer values are added.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="breadcrumb"> Item category:<span itemprop="category"> All > Electronics > Audio > Audio Components > Speakers</span>
</div>
<div class="row">
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image" src="https://www.pchounds.com/getthumb.php?w=120&fromfile=uploaded/82627/82627.jpg" border="0" alt="title" align="center"><br>
</div>
</div>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div><!-- schema.org/Offer removed -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div> <!-- removed http://schema.org/Offer -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
Shipping fee: <b>8.00</b> USD<br />
<small>Ends within:
<span id="ending_counter"><span class="errfont">closed</span></span><br />
<p> Seller location: United States<br />
<div> <!-- removed http://schema.org/Offer -->
<b>Payment methods:</b><span itemprop="acceptedPaymentMethod"> PayPal</span> </p>
</div>
</small>
...
</div>
Related
I want to optimize my working carousel and I want to use for:each.
Does anyone maybe see my error?
Working Quote Code
New not working Quote Code
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<li data-target="#quote-carousel" data-slide-to="{iterator.index}" {'class="active"'->f:if(condition:iterator.isFirst)}></li>
</f:for>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner" role="listbox">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<!-- Quote {iterator.index -->
<div class="item {'active'->f:if(condition:iterator.isFirst)}">
<blockquote>
<f:format.html>{person.expert}</f:format.html>
<small>{person.expertName}</small>
</blockquote>
</div>
</f:for>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Fist of all I am new to css/javascript/bootstrap.
All I want is to place this code:
<i class="fi-guide-dog"></i>
inside my span (or somewhere) so the dog icon shows next to the "Dog" word.
Please find my code below:
{%load static%}
<link rel="stylesheet" type="text/css" href="{% static 'toarnatot/style.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle= "collapse" data-target ="#topnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={%url 'toarnatot:home'%}><strong>ToarnaTot</strong></a>
</div>
<!-- items -->
<div class="collapse navbar-collapse">
<ul class ="nav navbar-nav">
<li class="">
<a href="{% url 'toarnatot:home'%}">
<span class="glyphicon glyphicon-something" aria-hidden="true">
Dog
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Do not put anything inside the span tag , instead create another tag to print the text that you want to display with the glyphicon.
like:
<p>dog</p>
<span class="glyphicon glyphicon-something" aria-hidden="true"></span>
I have a page containing multiple Articles, I want each one to describe the Publisher as an Organisation, but what I'd like to avoid is redefining that Organisation for every single article. Is this possible?
The itemref attribute only seems to work in the opposite direction, specifying a parent > child relationship, not the other way around.
In this example I've taken the organisation example from Schema.org which I hope illustrates the problem - you can't repeat this markup every time, it would bloat the page.
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Google.org (GOOG)</span>
Contact Details:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Main address:
<span itemprop="streetAddress">38 avenue de l'Opera</span>
<span itemprop="postalCode">F-75002</span>
<span itemprop="addressLocality">Paris, France</span>
,
</div>
Tel:<span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
Fax:<span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop="email">secretariat(at)google.org</span>
Members:
- National Scientific Members in 100 countries and territories: Country1, Country2, ...
- Scientific Union Members, 30 organizations listed in this Yearbook:
List of Alumni:
<span itemprop="alumni" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Jack Dan</span>
</span>,
<span itemprop="alumni" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Smith</span>
</span>
</div>
<div itemscope itemtype="http://schema.org/NewsArticle">
<meta itemprop="url" content="{{canonical_url}}" />
<link itemprop="mainEntityOfPage" href="{{canonical_url}}">
<meta itemprop="genre" content="{{genre}}" />
<meta itemprop="publisher" temtype="http://schema.org/Organization" content="{{???}}" />
<meta itemprop="dateModified" content="{{updated_at}}" />
<div class="item-content">
<div class="item-header" itemprop="name headline">
{{Headline}}
</div>
<div class="item-body">
<p itemprop="articleBody">
{{content goes here}}
</p>
</div>
<div class="item-footer">
<span itemprop="datePublished dateCreated">{{date}}</span> - <span itemprop="creator author copyrightHolder">{{byline}}</span>
</div>
</div>
</div>
I'm currently using microdata but if what I'm attempting is possible with JSON then I would consider switching.
If you have an Organization item and several Article items on the same page, you can use Microdata’s itemref attribute to provide the Organization item as value for the publisher property:
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization" id="publisher-1">
</div>
<article itemscope itemtype="http://schema.org/Article" itemref="publisher-1">
</article>
<article itemscope itemtype="http://schema.org/Article" itemref="publisher-1">
</article>
<article itemscope itemtype="http://schema.org/Article" itemref="publisher-1">
</article>
If using this, you have to make sure that the div (for the Organization item) is not a child element of another element with itemscope (otherwise it would be added to this item as publisher in addition).
I am trying to implement Schema.org structured data to my website. On one of my pages, I have a possibility for users to rate and review a tourist attraction (for example St. Stephan's Cathedral in Vienna). Now I want to enhance my HTML with structured data for it.
Here is an example code of it (also available on http://pastebin.com/u8YZtrpW):
<!doctype html>
<html lang="de">
<head></head>
<body itemscope itemtype="http://schema.org/WebPage">
<div itemscope itemtype="http://schema.org/Place">
<article class="boxy-full">
<div>
<div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" title="Rating: 4.50/5 <br># Ratings: 10">
<meta itemprop="ratingValue" content="4.50"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="ratingCount" content="10"/>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star-empty"></i>
</div>
</div>
<h1 itemprop="name">Vienna - St. Stephan's Cathedral</h1>
<div class="ccheader">
<meta itemprop="image" content="/myimg.jpg"/>
<img src="/myimg.jpg" alt="St. Stephan's Cathedral"/>
</div>
<div class="content">
<p>Here comes some text to describe the Place...</p>
</div>
</article>
<div class="boxy-full">
<h2>User-Bewertungen</h2>
<article class="blueblock" itemscope itemtype="http://schema.org/Review">
<div class="pull-right" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="ratingValue" content="5"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1">
<div class="rating" title="Rating: 5/5" data-placement="bottom">
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
<meta itemprop="itemreviewed" content="Stephansdom in Wien">
<h3 itemprop="name">Review 1 Title</h3>
<div class="co" itemprop="reviewBody">
Here comes some review text...
</div>
<footer class="small">Created by Gastuser, on 19.01.2015
<meta itemprop="datePublished" content="2015-01-19">
</footer>
</article>
<article class="blueblock" itemscope itemtype="http://schema.org/Review">
<div class="pull-right" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="ratingValue" content="5"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1">
<div class="rating" title="Rating: 5/5" data-placement="bottom">
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
<meta itemprop="itemreviewed" content="Stephansdom in Wien">
<h3 itemprop="name">Review 1 Title</h3>
<div class="co" itemprop="reviewBody">
Here comes some review text...
</div>
<footer class="small">Created by Gastuser, on 19.01.2015
<meta itemprop="datePublished" content="2015-01-19">
</footer>
</article>
</div>
</div>
</body>
</html>
My problem now is, that the Google webmaster tool for testing structured data (https://www.google.com/webmasters/tools/richsnippets) gives me the following error message:
No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information.
But there is an aggregated rating markup. What I am doing wrong?
I don’t know why Google’s old SDTT reports this, but their new SDTT doesn’t:
Apart from the author property that Google would like to see for the Review items, no relevant errors or warnings are reported.
I'm new to microdata and I have the following scenario for which I would like some help:
I wish to put microdata on product pages where, on the page, there can be multiple variations of the same product.
Each variation has the same name, description and image but they have each their own SKU, colour, size, weight and price.
On the page I have something like
<section id="commonparts">
<h1>Product name</h1>
<div><img src="productimage"></div>
<div>Product description</div>
</section>
<section id="variations">
<div id="variation1">
<div>SKU 1</div>
<div>Colour 1</div>
<div>Size 1</div>
<div>Price 1</div>
</div>
<div id="variation2">
<div>SKU 2</div>
<div>Colour 2</div>
<div>Size 2</div>
<div>Price 2</div>
</div>
</section>
Is it possible to microdata this?
Thanks in advance
You could make use of Microdata’s itemref attribute, so that you don’t have to duplicate the identical data.
Use the itemprop attributes on the data that is identical for all products, give each property an id, but don’t place these properties inside an itemscope:
<!-- no 'itemscope' parent -->
<section>
<h1 itemprop="name" id="product-name">Product name</h1>
<img itemprop="image" id="product-img" src="productimage" alt="" />
<p itemprop="description" id="product-desc">Product description</p>
</section>
On every product (each represented by a Product item), you list all the id values in its itemref attribute:
<section>
<div id="variation1" itemscope itemtype="http://schema.org/Product" itemref="product-name product-img product-desc">
<!-- properties specific to this 'Product' variation -->
</div>
<div id="variation2" itemscope itemtype="http://schema.org/Product" itemref="product-name product-img product-desc">
<!-- properties specific to this 'Product' variation -->
</div>
</section>