Search code examples
markupschema.orgrich-snippets

Schema.org product title in offer


I'm implementing the Schema.org/Product mark-up in my e-commerce site. However my mark-up is set up in such a way that the itemprop="name" of the product lies inside of the offer (because of the link to the offer). Now to fix this I could use a display:none but that just seems like it is not the best solution. Is there a way to extract the name info about a product out of the offers section or should I change my mark-up?

Cheers, Adnan

<div itemscope itemtype="http://schema.org/Product">
    <img src="imageurl" itemprop="image" />
    <h1 class="product_brand" itemprop="brand manufacturer">Brand</h1>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product_title"><a itemprop="url" href="link"><span itemprop="name">Product name</span></a><span id="stockcount"><link itemprop="availability" href="http://schema.org/InStock">Product Availability</span></link></div>
<div class="product_price" itemprop="price">Price</div>
<link itemprop="itemCondition" href="http://schema.org/NewCondition" />
</div>

<div style="display: none">
<span itemprop="name">Product name (again)</span>
</div>

<div class="description" itemprop="description">
some description
</div>
</div>

Solution

  • You could use a meta tag.

    <div itemscope itemtype="http://schema.org/Product">
        <img src="imageurl" itemprop="image" />
        <h1 class="product_brand" itemprop="brand manufacturer">Brand</h1>
    
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="product_title"><a itemprop="url" href="link"><span itemprop="name">Product name</span></a><span id="stockcount"><link itemprop="availability" href="http://schema.org/InStock">Product Availability</span></link></div>
            <div class="product_price" itemprop="price">Price</div>
            <link itemprop="itemCondition" href="http://schema.org/NewCondition" />
        </div>
    
        <meta itemprop="name" content="Product name" />
    
        <div class="description" itemprop="description">some description</div>
    </div>