Add Microdata/Rich Snippets to Virtuemart!

[simbus82]

It's time to add microdata to the VirtueMart component!

I hope all of you know what I'm talking about!

Microdata/Rich Snippets
Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag.
For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format.
However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.
Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!

Google.com - Rich snippets(microdata, microformats, and RDFa)
Snippets - the few lines of text that appear under every search result - are designed to give users a sense for what’s on the page and why it’s relevant to their query

If Google understands the content on your pages, we can create rich snippets )detailed information intended to help users with specific queries).

For example:
- the snippet for a restaurant might show the average review and price range;
- the snippet for a recipe page might show the total preparation time, a photo, and the recipe’s review rating;
- the snippet for a music album could list songs along with a link to play each song.

If you're a merchant, you can give Google detailed product information we can use to display rich snippets.
For example:
- price
- availability
- review ratings
All on Google search results pages.

These rich snippets help users recognize when your site is relevant to their search, and may result in more clicks to your pages.

I have done some testing and the result is very good.

For example in the default.php of productdetail folder we can add this snippet

Code: [Select]

<span itemscope itemtype="http://schema.org/Product">

     <h1 itemprop="name">
             // Product Name - Title
     </h1>
     
     <span itemprop="description">
// Product Description
     </span>

</span>

and for the block of code that contains the "offer microdata"

Code: [Select]

<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
     
     <div itemprop="availability" class="availability">
        // Availability (a word like "In stock")
     </div>
     
     <span itemprop="price">
       // Price code: (a number with value like $55.00)
     </span>

</span>

etc... etc...

Since the changes are 90% only in the "view", I think it is not difficult to implement.

Virtuemart often recalls pieces of code from other files: the only thing to watch out is that the snippets has a specific structure like this:

itemscope -> itemprop -> itemtype

For example the "itemtype="http://schema.org/Offer" have for child "itemprop" like price adn availability, BUT itemprop like description or product name are child of "itemtype="http://schema.org/Product".

So we have to remember to open and close all itemtype tag that contain specific itemprop!

like here:

Code: [Select]

<div itemscope itemtype="http://schema.org/Product">
     
      <span itemprop="name">Kenmore White 17" Microwave</span>
      <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
     
      <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
               Rated <span itemprop="ratingValue">3.5</span>/5
               based on <span itemprop="reviewCount">11</span> customer reviews
      </div>

   <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">$55.00</span>
        <link itemprop="availability" href="http://schema.org/InStock" />In stock
   </div>

      Product description:
      <span itemprop="description">
      0.7 cubic feet countertop microwave.
      Has six preset cooking categories and convenience features like
      Add-A-Minute and Child Lock.
      </span>

      Customer reviews:

   <div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Not a happy camper</span> -
        by <span itemprop="author">Ellie</span>,
        <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
       
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
              <meta itemprop="worstRating" content = "1">
              <span itemprop="ratingValue">1</span>/
              <span itemprop="bestRating">5</span>stars
        </div>
       
        <span itemprop="description">The lamp burned out and now I have to replace
        it. </span>
   </div>

</div>


[Actlas]

why is nobody talking about this? I guess modifying the templates ourselves is the way to go?

[jenkinhill]

http://extensions.virtuemart.net/component/sobi2/?sobi2Task=sobi2Details&catid=12&sobi2Id=828&Itemid=2

[zagrox]

Thanks for your useful tutorial
adding the code in which line of default.pho?

Is this root ok?  templates>mytemp>html>com_virtuemart>productdetails

After adding the code it will show the new text inside the product page or its only showing the data to the search engine robots?

do you have also any suggestion to make it better for a travel site?

[Stonedfury]

I am using the goodrelations mod and while it is very nice, the image for the product in featured products, top ten products and such are not schema ready. I am banging my head on how to remove the text from price and just get the price to be in itemprop="price"
Output:

Code: [Select]

<div class="PricesalesPrice" style="display : block;" >Sales price: <span class="PricesalesPrice" >$29.85</span>I am using overrides in my template/html folder
File default_products.php and I think its in this area that the output for the span is

Code: [Select]

<?php
if (VmConfig::get ( 'show_prices' ) == '1') {
if (!empty($product->prices)){
if (!empty($product->prices['salesPrice'])) { ?>
<a itemprop="url" href="<?php echo JRoute::_ ( 'index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id )?>" >
<div class="product-price price">
<div class="price-class" itemprop="price">
<?php echo $this->currency->createPriceDiv('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $product->prices); ?>
<?php 
$SalesPrice = number_format((float)$product->prices['salesPrice'], 2, '.', '');
$BasePrice = number_format((float)$product->prices['basePriceWithTax'], 2, '.', '');
if ($SalesPrice !== $BasePrice and $product->prices['discountAmount'] > 0) { ?>
<span class="price-before-dicount">
<?php echo $this->currency->createPriceDiv( 'basePriceWithTax', '', $product->prices ); ?>
</span>
<?php } ?>
<div class="product-discount">
<?php
$SalesPrice = number_format((float)$product->prices['salesPrice'], 2, '.', '');
$BasePrice = number_format((float)$product->prices['basePriceWithTax'], 2, '.', '');
if ($SalesPrice !== $BasePrice and $product->prices['discountAmount'] > 0) {
if($templateparams->get('discount')==1) {
$DiscountAmount = $product->prices['discountAmount'];
$ActualPrice = $product->prices['priceWithoutTax'] + $product->prices['discountAmount'];
$Discount = $DiscountAmount / $ActualPrice * 100;
$Discount = number_format((float)$Discount, 2, '.', '').'%';
echo '('.JText::_('COM_VIRTUEMART_CART_SUBTOTAL_DISCOUNT_AMOUNT').': '; echo $Discount.')';
} if($templateparams->get('discount')==2) {
$DiscountAmount = $product->prices['discountAmount'];
$ActualPrice = $product->prices['salesPrice'] + $product->prices['discountAmount'];
$Discount = $DiscountAmount / $ActualPrice * 100;
$Discount = number_format((float)$Discount, 2, '.', '').'%';
echo '('.JText::_('COM_VIRTUEMART_CART_SUBTOTAL_DISCOUNT_AMOUNT').': '; echo $Discount.')';
}    
} ?>
</div>
</div>
</div>
</a>
<?php } 
}
} ?>Virtuemart needs to separate the div for salesPrice and price. This one change could make a world of difference for adding schema markup.

Anyone know where or what I need to edit to make that change? Honestly I am surprised that VM doesn't have this already built in. This is a store product and you would think everyone who owns an online store would like to be found on the search better.

[Stonedfury]

Helped with this by the peeps who created our template.

Open templates\youretemplate\html\com_virtuemart\productdetails\default_showprices.php

Code: [Select]



?>
<div class="price-container" id="productPrice<?php echo $this->product->virtuemart_product_id ?>">

Replace above by:

Code: [Select]

$currency = CurrencyDisplay::getInstance();
?>
<div class="price-container" id="productPrice<?php echo $this->product->virtuemart_product_id ?>" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="<?php echo $currency->priceDisplay($this->product->prices['salesPrice']); ?>" />
If you don't have the folder mentioned you can create it by copying the file from components/com_virtuemart

Of course I haven't tried to put this into the featured or top ten products.

[attachment cleanup by admin]

[balai]

I think that the approach of simbus82 is really good.

Its time for the project to leave the past behind and look forward in the fields of:
SEO
UX
Responsiveness to the various devices

In my opinion each one of these consists a different area and should be considered independently

[Stonedfury]

What he proposes is fairly easy however time consuming to do yourself. I have done many of my pages already and even the template designer that we have has updated many of his templates to include the markup along with open graph which are 2 very much standards now. You can get modules and other stuff to do that for you or you can even fix Joomla and VM to spit the headers out correctly with meta property instead of meta name. and add the OG: tag.

Virtuemart should get on the ball and include it as a basic but I think they are starting to want the money as a lot of what used to be free is now being charged for.

[Stonedfury]

Finished putting this manually in a template on one of my sites. It's truly a lot easier to accomplish than I would have expected.
http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.pollenranch.com%2Fstore%2Forganic-fennel-pollen-1-oz-tin-detail&html=
The results are dynamic. I only wish I could get an aggregated count of the reviews. This way I could say there are a total of x reviews and an average of y extrapolated. Google will even do that for you if you provide a count of the reviews.

I noticed that the goodrelations was not showing the product image and the stars. This could not have been google issue as I have been running with the component/module for over a year and nothing showed. I added my markup using the current schema.org for products and already getting results. I would say the most difficult was the price and I got help with that.

[kratzi]

Hi

I have also installed goodrelations however don't think its the best way for rich snippets. It only shows the price and in stock for my products.

What I would consider great is to have an image of the product, the stars of the ratings, a rating count and a price with the availability.


@Stonedfury.   Could you please explain a little bit which parts you have adjusted in virtuemart. I think your solution really looks great and if we would find a solution for images and accumulated ratings it would be perfect.

Regards

Simon

[rayge]

This really should be a native piece of virtuemart IMO

[Stonedfury]

This is only difficult if you have a well maintained template that gets updated but does not include the code.  Honestly it would not be too difficult to add to the basic vm install.

https://support.google.com/webmasters/answer/176035 & https://support.google.com/webmasters/answer/146750 has a lot of easy to follow details on what to use and how.

All the files to put in your override are in com_virtuemart\views\productdetails\tmpl

Copy them to templates\yourtemplate\html\com_virtuemart\productdetails\

default_reviews.php,  default_images.php, default_showprices.php, default.php

You have to make sure you wrap them in itemscope and close them. You cannot leave the scope open and close them all in one. Example would be the default_ratings(in my template VP_PROMART).

Code: [Select]

<div class="vote" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

<meta itemprop="ratingValue" content="<?php echo round($this->rating->rating) ?>">

<meta itemprop="bestRating" content="5">

<meta itemprop="ratingCount" content="<?php echo $this->rating->ratingcount ?>">

<span class="rating-title"><?php echo JText::_('COM_VIRTUEMART_RATING')?></span><br/>

<span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . round($this->rating->rating) . '/' . $maxrating) ?>" class="ratingbox">

<span class="stars-color" style="width:<?php echo $ratingwidth.'px'; ?>"></span>

</span>

</div>
I gave the code that gets the price isolated in the earlier post. Using that you can get the itemprop offer.

If I can get the time I would be willing to put the markup in the stock VM so that there is no more need to hack it or do an override. When you have a good templater that keeps updates regular this can be a daunting task.

NOTE This is the template I am using. It does not correlate with the stock VM file. It is only being used as a reference of how the wrap works.

[Jumbo!]

Stonedfury, the files and codes you posted above looks like an exact copy of our template - VP ProMart which displays search result as displayed in the below screenshot.



http://www.virtueplanet.com/vp-promart-detail

I am telling you because I wrote these codes for our template.

It may not be possible for others to implement these exact codes in their template unless he has a minimum PHP and VirtueMart coding knowledge. The file structures are very specific for our templates.

[Stonedfury]

Actually jumbo that is from when I edited it, it being the promart template,  before you guys got to it.
That is the vp_promart file. The code I shared above in my first post for price is the one you shared.
To clarify though and you can check your forum. I had added it before you on the template, then you did an update and I asked if you were going to add it eventually to your template or if you wanted help and you said you were putting into the promart template. Which you did. However. I had added it 2 times before asking because as I stated "it can be a daunting task"

So to be correct. Yes that is a promart template file. Do you want me to post up a raw vm edited file. I have that around to as I have played with it.

[Stonedfury]

OH and I would also like to clear it up as for installing that code into your own template. It is not hard it is just a task. Time consuming. The problem I really had was the one with price and once JUMBO showed me how to get that it was all downhill to figure out. I really don't like being called out like that. I will post the screenshot off your forum if that helps?

As per your forum you have only installed this 3 months and 3 weeks ago. check my initial post date with link. Well before your update.

[attachment cleanup by admin]