What I've done is I've added both hreview and hproduct microformats to our template. I'll briefly walk you through how to do that. It might be wise to start with Frederick's post on Driving more traffic from Google through Microformats. After that you can read my own post on how to implement hreview in WordPress or read on to see how to implement hreview-aggregate in Magento.

Adding hreview in 5 steps

Step 1: the 'hreview-aggregate' class

Because we've got more than one review for products, we're going to be using the hreview-aggregate version of the microformat. This wrapper class should be on an element that contains all the elements of the review. So we open:

template/catalog/product/view.html

And add the class hreview-aggregate to the product-shop div.

Step 2: the "item" reviewed

The second thing we should add is the item being reviewed, we'll use two classes here: item and fn. I've added this to the <h1> within the product-name class, still in the same file. So far, what we've got looks like this:

<div class="product-shop hreview-aggregate">
  <div class="product-name">
    <h1 class="item name fn">
      <?php echo $_helper->productAttribute($_product, 
          $_product->getName(), 
          'name') 
    ?>
    </h1>
  </div>

Step 3: the rating

Then you'll see a call like this:

<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

This calls to a template file that's hidden in:

<strong>/template/review/helper/summary.phtml</strong>

If you open this file you'll see a div called rating-box, containing a div called rating. Because this box outputs the rating visually using CSS, we'll need to make it machine readable as well. Luckily, there's a solution for that: we'll use the value-title method. Within the contents of the div with class rating, we'll add this:

<span 
  class="value-title" 
  title="<?php echo number_format($this->getRatingSummary() / 20,1); ?>">
</span>

As you can see, we retrieve the rating and turn it into a 5 point scale rating by dividing it by 20, so Google can understand it.

Step 4: the review count.

Next we have to tell Google how many reviews we've had for this product. In a span in the same file with the class amount, you'll find this info. I had to redo the code a tiny bit, it ended up looking like this (formatted for readability):

<?php 
  echo '<span class="count">';
  echo $this->getReviewsCount();
  echo '</span>'.$this->__(' Review(s)'); 
?>

So with the span count it only shows the number, the text "Review(s)" is actually outside of it. Otherwise Google wouldn't understand it.

Step 5: The pricerange

This last step actually caused me a bit more headaches, even though the end result is quite simple. We need to add the pricerange class to our price "tag", in order for Google to understand the pricing of our product. To do this, we open up:

/template/catalog/product/price.phtml

This is one big file, but don't get scared: there are two divs there with class price-box, just add the pricerange class there and you'll be ok, and quickly close that file before that code get's to your head!

Adding hproduct to your template

Step 1: The hproduct class

Open up view.phtml again:

/template/catalog/product/view.phtml

The hproduct class needs to go up in the source a bit higher than the hreview class, easiest way is to add it to the div with class product-view.

Step 2: Availability

The fn is already there because of our hreview implementation, so we can go right to availability. To add the proper classing open up:

/template/catalog/product/view/type/simple.phtml

You'll see that the class in there is already called availability. It's there twice: for in stock and out of stock occasions. The full code I made out of that uses the value-title method, and looks like this:

<?php if($_product->isSaleable()): ?>
    <p class="availability in-stock">
    <?php echo $this->__('Availability:') ?> 
    <span class="value-title" title="<?php echo $this->__('In stock') ?>">
      <?php echo $this->__('In stock') ?>
    </span>
  </p>
<?php else: ?>
    <p class="availability out-of-stock">
    <?php echo $this->__('Availability:') ?>
    <span class="value-title" title="<?php echo $this->__('Out of stock') ?>">
      <?php echo $this->__('Out of stock') ?>
    </span>
  </p>
<?php endif; ?>

Now I'll be honest: I have second thoughts about giving Google availability data for products. If Google were to act in the best interest of it's endusers, it would not show you in the rankings for a particular product when there were other sites that carried the same product that indicated they do have stock. So, use this part of hproduct with some prejudice.

Step 3: The product photo

Next up is the product photo. Open up:

/template/catalog/product/view/media.phtml

You'll see an img element with the id image, give it two classes: photo and fn. Some microformats parsers might have issues with using the fn from the hreview, and since this image contains the exact same title as an alt tag, adding the fn class here will help those parsers.

Step 4: Price

This step is easy: the default theme already has the class price around the price everywhere, so just leave it as is and you're good, otherwise, open up price.phtml and add it in.

Step 5: Brand

The last step to our hproduct completion is to add the brand. Open up:

/template/catalog/product/view/attributes.phtml

We'll use the fact that brand is an internal attribute name in Magento as well for this. Where it has a td with class data, change it into this:

<td class="data <?php echo strtolower($_data['label']); ?>">

By doing this all the data cells will have a proper class name, one of which will be brand, completing our hproduct microformat!

My presentation from Meet Magento

Microformats in Magento

So if you've followed the steps above, you should now have a nicely microformatted product page. Use Google's Rich Snippets testing tool to test it, and have a lot of fun using it!

Downloading the updated template

You can download the updated template from Magento Connect.

hreview and hproduct in Magento is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

You can include some dynamic content, e.g. all products from one category. Just add the following block to your CMS page to show all products from the category with ID 8 on a static landing page:

{{block type="catalog/product_list" 
    name="product_listing" 
    template="catalog/product/list.phtml" 
    category_id="8" }}

Now wouldn't it be great if you could also filter the products on attribute value? For instance to show all black cell phones on a static page? Well, now you can! With this new Magento landing page module you will be able to do this in a very easy way. Just download the module and copy it to the root of your Magento install. After this you will be able to show all black cell phones (this example is using the Magento sample data) by simply adding this block to your CMS page:

{{block type="Yoast_Filter/Result" 
    name="filter_result" 
    template="catalog/product/list.phtml"  
    attribute_name="color" 
    value="24" 
    category="8" }}

Go to your newly created CMS page and you will see a page with all black cell phones. Now it is time to optimize your landing page with some good unique content, a nice title, search engine friendly url, some header tags and you will have a very seo friendly Magento landing page. In the same way you can filter all products on attribute value and/or category. So for a optimized landing page for all Apple Computers just create something like this example:

Example of the Magento Landing Pages module, click for larger version.

Dynamic attribute filter pages

Well designed pages created by hand with unique content will outperform dynamic generated ones, but it is a hell of a job to create 10k landing pages. So another great feature would be the option to create dynamic pages for each value of an attribute. After the installation of the module and the Magento demo data installed you can go to yourmagentoshop.com/f/color/24/ and you will get all black products on one page.

As you can see the url start with /f for calling the module name, /color is the attribute name and /24 is the value of the attribute. For drop-down and multi-select attributes this is a number (the ID of the attribute value), for text attributes it's the textvalue. An example URL of a text attribute for the Magento demo data would be yourmagentoshop.com/f/country_orgin/italy/.

Extending your Landing Page with static content

A page without content isn't very SEO friendly. The Magento CMS uses static blocks for text blocks. When you create a block with the identifier landing-$attribute-$value this block will be added to the above the product listing. So for the example above you should create a static block with the identifier landing-color-24 and voila, the static block is added to the page yourmagentoshop.com/f/color/24/.

Example Magento Landing Page

So by now you'll want to see an example. Well we've got one for you, though it's Dutch. We work with a Dutch childrens book site called Top Kinderboek of which all proceeds go to charities, and have used this feature to create author pages there. So check out this example: all books by Paul Biegel.

Layered Navigation for landing pages

Update 11-1-2010 Now it is even possible to add layered navigation to the landing pages. By default this is enabled for the dynamic pages, you can change this by editing the filter.xml. For the CMS pages you should add something like the following code to the XML update (note the setAttributeName and setValue):

<reference name="content"> 
<block type="Yoast_Filter/Result" name="filter_result" template="catalog/product/list.phtml">
<action method="setAttributeName"><attribute_name>color</attribute_name></action>
<action method="setValue"><value>24</value></action>
</block>
<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
<block type="page/html_pager" name="product_list_toolbar_pager" template="page/html/pager.phtml" />  
</block>
 <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</reference>
<reference name="left">
<block type="Yoast_Filter/Layer_View" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>
</reference>

Downloads

So you were probably wondering by now, but You can download the module right here or install it through MagentoConnect.

Need help?

Of course, if you want to use this Landing Page module in your Magento install and would like us to help set it up, use the hire me form and let us know!

Landing pages module for Magento is a post by Joachim Houtman on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

How to get the most out your Magento install?

Magento is notorious for it speed and performance. But isn't necessary to have a killer web server to get very reasonable performance, it is all about the configuration of your server and the code of your template. However, after the 1.3 release there are some performance improvements, like Frontend Flat Catalog, and people measure reduction of loading times up to 40%. Another recent development is the Magento Compiler this module compiles all Magento files. From tests this module gave between 25% to 50% better performance. This module is still in beta and should not be used in a production environment for now.

The question is, what else can you do to speed up your Magento install?

Optimize your template for speed

More information can be found at the Magento SEO article.

Enable compression of your files

Mod_deflate allows output from your server to be compressed. To enable it for Magento edit your .htaccess, around line 74, in Magento root directory.

<ifmodule mod_deflate.c>
############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</ifmodule>

Apache Module mod_expires

mod_expires controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. To enable Expires HTTP header for Magento you had to change the code underat your .htaccess to.

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
</ifmodule>

Use PHP Accelerator

Install a PHP opcode cacher such as APC or XCache. This seems to deliver rather large improvement in the responsive of the Magento install. Some people note a reduce of loading time up to 70%.

Tune your MySQL configuration

You can modify the configuration of the MySQL server to take advantage of the server's RAM. The efficiency of this step are different, it seems to depends mainly on the number of products. When you have only 100 products, difference will be hardly to notice (below 100ms). But for shops with over 50.000 products there is a huge reduction of the loading time. To give an idea about the settings, for shops with only a limit number of products a query_cache_limit of 1MB will be enough. For larger stores the optimal query cache value can be 64MB. To get the optimal value you really need some testing. A good start point for your Query Cache configuration can be found here.

Speed up your Cache files

Magento makes extensive use of file-based storage for caching and session storage. The slowest component in a server is the hard drive, so if you use a memory-based file system such as tmpfs, you can save all those extra disk IO cycles by storing these temporary files in memory instead of storing them on your slow hard drive.

Let´s do this with tmpfs

Let's say your Magento install is at /var/www/domain.com/ so your cache and session directories are /var/www/domain.com/var/cache/ and /var/www/domain.com/var/session/ For cache we will allocate a max of 256MB RAM and for sessions 64MB RAM. It is important to give access to everyone (e.g your webserver Apache)

mount -t tmpfs -o size=256M,mode=0744 tmpfs /var/www/domain.com/var/cache/
mount -t tmpfs -o size=64M,mode=0744 tmpfs /var/www/domain.com/var/session/

Now it might be a good idea to restore these volumes each time your server boots. Just add the following lines to your /etc/fstab:

tmpfs /var/www/domain.com/var/cache/ tmpfs size=256,mode=0744 0 0
tmpfs /var/www/domain.com/var/session/ tmpfs size=64,mode=0744 0 0

Please note, your tmpfs is temporary in the sense that nothing will be created on your hard drive. If you reboot, everything in tmpfs will be lost.

Save the sessions in your database

Another option for the sessions is to save them in your database. Magento supports this very well and it is one small step to make this work. Just edit app/etc/local.xmland set

<session_save><![CDATA[files]]></session_save>

to

<session_save><![CDATA[db]]></session_save>

it will then save all sessions in the database which is a much quicker access than the filesystem. When you use a cluster enviroment you had to use this option.

Enable Apache KeepAlives

Enable Apache KeepAlives, this allows persistent connections. These long-lived HTTP sessions allow multiple requests to be send over the same TCP connection, this can result in an almost 50% speedup in latency times for HTML documents with lots of images. An example setting can be:

KeepAlive On
KeepAliveTimeout 2

Need more Magento Performance?

Ok, you are a very successful online retailer and it is time to cluster, no problem. This means that one single-server doesn't have enough power to keep your customers happy and so you need a clustered environment with two or more servers. A first step can be to start using a Content Delivery Network (CDN).

The most easy to start is using an separate media server, e.g. media.domain.com. Magento has native support for this. You can configure 'Base Media URL' secure and unsecure under web configurations. This allow you to serve media form one server without the needs to synchronize any directory. Another option is to start using a Content Delivery Network (CDN) for delivering the static files like images. MaxCDN has some options for Magento that are quite nice.

Another option is to use more than one database servers this tactic is called "database replication". One database will be the "master" and all others will be called "slaves". The master is the only database that accepts any sort of write-base queries. These write queries are then replicated to any of the slave servers in real-time. A post at the Magento blog will get you on the right track.

To summarize, 5 quick wins

• move the the rules in the .htaccess files from the directories to virtualhost configuration directives
• install Xcache or APC PHP cache accelerator
• clean up your template and layout
• make sure Apache KeepAlives is enabled
• use a memory-based file system for Magento's var/cache/ and var/session/ directory

Conclusion

This article give a introduction how to improve your Magento site performance, none of these tips are revolutionary. Because every website's scenario is different, when you really want to get the most out of your Magento install you need to hire a professional. The only way to discover the optimal server configuration is testing, a really great tool to use is Browsermob, load testing with real web browsers so you will able to put even the Magento checkout process under load testing.

Now, all of the above you can’t do on your average host, you need a VPS that provides you full control of your server environment. Check out WestHost’s sister company, VPS.net, for a VPS environment that would give you full control.

Magento performance hosting is a post by Joachim Houtman on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!