Plus One button itemscope traversal doesn't promote proper microdata markup

[GoogleCodeExporter]

There is a thread about this at 
https://groups.google.com/forum/#!topic/google-plus-developers/MvuZtu8prTo 
which is the basis for the creation of this issue. All of the following is 
information taken from that thread which describes the problem:

The documentation on the +Snippets site from google at 
https://developers.google.com/+/plugins/+1button/#plus-snippet states: "If the 
page is annotated with schema.org microdata, the +Snippet will use the name, 
image, and description properties found on any schema.org type".

However, it doesn't appear to work well with a page that has well-defined, deep 
schema.org markup data.

We have a test page at 
http://www.magnetstreet.com/stores/html/weddings/testPage.html where it is 
demonstrating a very simple product page which has been marked up with 
schema.org microdata. This page passes w3c validation and its microdata is 
parsed properly in Googles rich snippets testing tool. However, when the +1 
button is clicked and you proceed to share it, the api is clearly ignoring the 
itemprops set inside the product tag. This can be seen by how "page title" is 
displayed instead of "product title" which is the itemprop name.

I would like to note, if we only have microdata properties set on the Product 
div and within (no itemscope or itemtypes on any outer elements), then the 
button works as expected. However, We have data on much more complex pages that 
need the other microdata, so removing all other microdata besides the product 
is not a solution.

Jenny Murphy explained on the thread that "The +1 button has pretty simple 
behavior when it parses your schema.org markup. It will start from the top of 
the page and look for the first itemscope. Once it finds the first itemscope, 
it will look inside that element for the attributes it needs. In the case of 
your example document this will be the WebPage scope."

Since the microdata markup is very hierarchical and 'schema.org/WebPage' is the 
base, then isn't it a problem that the button stops in the outermost itemscope? 
My understanding is that schema.org microdata should be placed on elements 
which are visible to the user and should be marked in the way that is the 
natural order and heirarchy of that webpage as it is displayed. If our product 
pages where to follow this natural order, then the description and image and 
name tags would be contained inside of 'Product' microdata markup. It is 
difficult (and not semanticly proper) to move those elements out of the product 
container (div) and up to the 'WebPage' container.

One could say that the 'WebPage' microdata isn't needed, but the reason that it 
is needed is to properly define the breadcrumbs for that page. We could even 
also define a description and image and name at that parent level as a more 
generic version to define our product pages themselves. Then the description 
that lied in the inner product container would be a specific description about 
that product. The location of the +1 is very important in this case. If the +1 
is located inside of the product container, then the location that it shows up 
on the generated page is naturally next to the product information and image. 
When a user clicked +1 on this example, they wouldn't be +1-ing the page but 
instead the product. If the +1 button was moved up the heirarchy and sat at the 
top 'WebPage' container, then the page that is visible to the user would show 
more of a separation between the product information and the page information, 
and when a user clicked it, they would be +1-ing the page itself. I think the 
differentiation here is important. If the button is going to state that it uses 
schema.org markup for the snippet but then not be willing to traverse a 
multi-layered microdata definition, then it doesn't seem to promote using well 
defined, deep microdata markup.

Please don't read this as me being purely critical. I'd like to promote some 
dialog on this and present our thoughts. We have a site that uses schema.org 
markup in multiple areas, not just products, and I hope that offering our 
use-case to you can be valuable. Also, if it helps at all to understand our 
markup description as used in a real life example, 
http://www.magnetstreet.com/devoted-save-the-date-magnets is an actual product 
page of ours which differs from the example page (the example page was made 
purely for testing +1 and Rich Snippets Testing Tool functionality). 

My proposal is that the button would actually work it's way up the dom from the 
location of the button, and look for the snippet properties inside the 
itemscope that the button lives within.

-----

What steps will reproduce the problem?
1.Create a single webpage with multi-level schema.org microdata itemscopes.
2.Place +1 button inside the inner itemscope and define description, name and 
image inside that scope as well.
3.Click +1 and notice how it ignores those definitions

What is the expected output? What do you see instead?
I'd expect it to use the inner itemscopes definitions that live alongside the 
button.

Original issue reported on code.google.com by outdooricon on 17 Jan 2012 at 7:33

[GoogleCodeExporter]

Thanks for the very detailed writeup. I think this is a great idea. I'm 
flagging it as an enhancement, since the social plugins are working as they 
were designed, but I do understand how this functionality would be a lot better.

Original comment by mimm...@google.com on 3 Feb 2012 at 7:10

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Original comment by mimm...@google.com on 4 Feb 2012 at 1:11

• Added labels: Component-Plugins

[GoogleCodeExporter]

With the below example, Google+ sometimes uses the Person item’s name, and 
sometime the Blog item’s name. But never the actual BlogPosting. Even when 
using ```itemtype="http://schema.org/Article" 
additionalType="http://schema.org/BlogPosting"```.

A concrete and presumably common example:

<body itemscope itemtype="http://schema.org/Blog">
<h1 itemprop="name">My awesome blog</h1>
<article itemprop="blogpost" itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="name">Name of the blogpost that would probably be more important 
than the name of the blog</h1>
<p itemprop="text articleBody">I think this blog is such a good tool to share 
the things I want to say to the world.</p>
<p itemprop="author" itemscope itemtype="http://schema.org/Person"><span 
itemprop="name">Awesome Dude</span></p>
</article>
</body>

I have stopped using microdata and rely on using OpenGraph for the time being.

Original comment by goo...@daniel.priv.no on 25 Oct 2013 at 12:10

[GoogleCodeExporter]

Hello,
It seems that this post is quite old, however, the problem hasn't been fixed 
yet. Is anyone from Google+ Team still looking into this issue?

The +1 button Snippet doesn't load (or recognize) the description when trying 
to share, even if it's correctly implemented in <body> with microdata: 
http://screencast.com/t/bYh6P5pWy0ya

This simple page was implemented after Google's indications found here: 
https://developers.google.com/+/web/snippet/

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

Any suggestions?
Thanks.

Original comment by swat...@gmail.com on 2 Dec 2014 at 7:54