Using HTML5+Microdata's <meta> tag in the <body>_问答_开发者

Using HTML5+Microdata's <meta> tag in the <body>

开发者 https://www.devze.com 2023-04-02 20:30 出处：网络

I want to specify if the Product is \"In Stock\" using HTML5+Microdata\'s <meta> tag using Schema.org.

I want to specify if the Product is "In Stock" using HTML5+Microdata's <meta> tag using Schema.org.

I am unsure if this is the correct syntax:

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.o开发者_运维技巧rg/Offer">
    <dt itemprop="price">$1</dt>
    <meta itemprop="availability" itemscope itemtype="http://schema.org/ItemAvailability" itemid="http://schema.org/InStock">
  </dl>
</div>

The meta tag can't be used with an itemscope like that. The correct way to express this is through a canonical reference using the link tag:

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <dt itemprop="price">$1</dt>
    <link itemprop="availability" href="http://schema.org/InStock">
  </dl>
</div>

I did the same as the OP and got the same thing, where the availability on the testing tool is linked to a sub-item... I was finally able to get it to verify properly with this:

<meta itemprop='availability' content='http://schema.org/InStock'>

Here is the Google structured tool output for the offer:

Item 1
type:   http://schema.org/offer
property:   
price:  Price: $139.00
pricecurrency:  USD
availability:   http://schema.org/InStock

While it is allowed to use meta (if used for Microdata!) in the body, your example is not correct for several reasons:

The dl element can only contain dt or dd (and script/template) elements. You either have to place the meta inside of dt/dd, or outside of dl (but then you would have to move the itemscope).
The meta element must have a content attribute.
Using itemid for this purpose is not correct, and http://schema.org/ItemAvailability is not a type, so using itemscope+itemtype isn’t correct either.
However, if the itemprop value is a URI, you must use the link element instead of the meta element.

Furthermore, the price value should not contain a currency symbol, and it seems that your dt should actually be a dd (with a dt containing "Price" or something).

So you could use:

<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <dt>Price</dt>
  <dd>$<span itemprop="price">1</span> <link itemprop="availability" href="http://schema.org/InStock" /></dd>
</dl>

I made a jsfiddle here: http://jsfiddle.net/dLryX/, then put the output (http://jsfiddle.net/dLryX/show/) into the rich snippets tool.

That came back with:

Using HTML5+Microdata's <meta> tag in the <body>

I believe the syntax is correct, and that the Warning isn't important, as it doesn't have a property, as it's a meta tag.

See under the heading Non-visible content (not sure if this helps):

Google webmaster tools - About microdata

In general, Google won't display content that is not visible to the user. In other words, don't show content to users in one way, and use hidden text to mark up information separately for search engines and web applications. You should mark up the text that actually appears to your users when they visit your web pages.

There are a few exceptions to this guideline. In some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be seen by visitors to your page. For example, if a restaurant has a rating of 8.5, users (but not search engines) will assume that the rating is based on a scale of 1–10. In this case, you can indicate this using the meta element, like this:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> Rating: <span itemprop="value">8.5</span> <meta itemprop="best" content="10" /> </div>

This is an example from schema.org's getting started guide to support @Lawrence's answer.

However, I don't like the use of the link tag inside the body of the page. From MDN: