SEO optimized HTML5 Prestashop theme with Rich Snippets support

[dunglas 7]

This is the default Prestashop template technically enhanced for natural SEO and accessibility. This is a good base to create your own custom template. It includes:

• Google Rich Snippets for products
  
• New SEO friendly semantic HTML5 tags
  
• ARIA roles for a better accessibility
  

This is the default template technically enhanced for natural SEO and accessibility. This is a good base to create your own custom template.

Features

• Adds Schema.org microdata to display Rich Snippets for products in Google
  
• Uses header, nav, footer, article SEO friendly semantic HTML5 tags with support for old browsers (Modernizr)
  
• Adds main, navigation, search, complementary, contentinfo and banner ARIA roles to enhance accessibility of the shop to disabled people
  

Of course it is

• SEO (Search Engine Optimization) friendly
  
• Completely customizable
  
• Optimized for fast loading
  
• Applicable for multi-store and multi-languages
  

Created by me. This code has been contributed to the Prestashop project for upstream inclusion.

 

Try it.

Download it on GitHub.

 

French can read the french version of this summary.

Edited January 12, 2013 by dunglas (see edit history)

[enzolarosa 7]

you have demo link ?

[Dh42 1,268]

I have heard that they will kick your rich snippets out for doing your price like that.

 

You are also missing the currency and the breadcrumbs. actually you are missing a lot of things like offerurl, seller, itemoffered.

 

This might help a bit http://blog.dh42.com/prestashop-and-google-rich-snippets/

[dunglas 7]

No demo link is currently avaiable.

 

Dh42 what is the problem with the price in this template? They are working in prod and the markup in Schema.org's example is the same: http://www.schema.org/Offer

 

Here is the output of the Google Rich Snippet test tool with a page generated by this template: http://www.google.co...ch-snippet.html

 

As you can see prices, currencies and breadcrumbs are correctly extracted.

OfferURL must be avoided because microdata are only displayed on the product page. From the Google's doc:

 

Don't use offer URL for markup that appears on the product page itself.

 

ItemOffered can be interesting for packs (nested products) but is useless for single products because the Offer microdata is already nested in the Product one. Feel free to add it (send a PR).

 

The breadcrumb markup is present, see https://github.com/d.../breadcrumb.tpl

 

Fell free to comment or contribute on GitHub: https://github.com/P...staShop/pull/89

 

Note: the doc from the article you submited is outdated, standardized Schema.org's markup must be preferred to Google's markup now. It is recognized and used by Google, Yahoo, Bing...

Edited January 14, 2013 by dunglas (see edit history)

[dunglas 7]

A demo is available.

[bliker 0]

sir,

your are a hero. keep up the good work

[Tropical Dream 2]

Hi Dunglas,

 

is it possible to add Rich Snippet pictures as well?

 

In the Google Tool, I notice that your demo pictures are not showing up.

example: http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fprestashop-html5.dunglas.fr%2Fmusic-ipods%2F1-ipod-nano.html&html=

 

It would be better to show with a picture like this:

http://leesmallwood.com/2012/02/07/optimise-wordpress-for-rich-snippets/

[Dh42 1,268]

Dunglas

Everyone supports data vocabulary. http://screencast.com/t/CW5IgF00yC This is how I tend to mark them up, I use the offerurl in case something is loaded in an iframe or accessed from a non canonical url. http://www.google.co...33dImages&html=

 

 

What I was talking about, about the currency; it has not happened to me yet, but Nemo got a message from Google telling him to take the currency sign out and display price as numbers and currency separately.

 

 

Tropical Dream,

 

His does support pictures, although it is not loading the thumbnails. But the rich snippet testing tool does not show pictures for products in the actual tool. It does for publisher data though, http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fblog.dh42.com%2Finstalling-prestashop-locally%2F&html=

[dunglas 7]

Hi Dh42.

 

Data-Vocalubary is deprecated. Schema.org is the preferred solution now. See http://www.data-vocabulary.org/

[dunglas 7]

For the currency feel free to send a patch.

[the.rampage.rado 57]

For the currency feel free to send a patch.

http://nemops.com/pr...-rich-snippets/

 

It's great that after they don't want to include your additions in the template you released standalone version!

 

I'll probably adopt it because at the moment I'm running default template with customisations and Nemo's rich snippets additions.

Edited January 15, 2013 by the.rampage.rado (see edit history)

[dunglas 7]

The use of Regex to do that is dirty. The price must be displayed without currency without this sort of hacks.

[Galanid 6]

Thx for this optimized theme Pleas can you tell the proper install instruction

Currently i just uploaded the theme folder inside the theme folfer install and selected it from the theme selector. Does it sounds correct?

 

cheers,

[dunglas 7]

Yes it is correct.

[mestallo 1]

i tried to see ur tutorial but very small pics

 

i want to implement it in PS 1.5.3 ... have u tried that?

 

Could you post the text you changed or added in product.tpl?

You don't need to change product.js?

 

thanks

[mestallo 1]

which files did you modified in the Theme HTML-5?

 

thanks

[Galanid 6]

Dunglas why your post in french forum has been deleted ?.... ( je suis francais)

 

I have a quick question: In order to use riche snippet on this theme, do we have to do something particular or everything is automatic ?

 

Thx

[petete2008 80]

Thank's for sharing!!

[dunglas 7]

Hi,

 

@Mestallo, many files have been modified. A diff: https://github.com/P...p/pull/89/files

The theme is compatible with 1.5.3 (the demo runs 1.5.3). No change in product.js is needed.

 

@Design-IT, the french thread is still online: http://www.prestasho...-rich-snippets/

Edited January 16, 2013 by dunglas (see edit history)

[mestallo 1]

Thanks dunglas ... i updated the files into my theme and it works perfectlly ... SUPER

They are no so many files

Hopefully Google will rise the ranking for my website

What is that NEW modernizr.js file doing?

 

thanks

[dunglas 7]

Modernizr is used for HTML5 compatibility in old browsers. http://modernizr.com/

Edited January 17, 2013 by dunglas (see edit history)

[Trip 81]

Hi Dunglas, thanks for your work.

I just tested it on an upgraded 1.5.3 version and CCC on JS and CSS don't seem to work. In your demo page it is the same so I assume this might be a bug as the default ps theme is working correct.

Best regards, trip

[alsitn 5]

Thanks a lot!

I'll try it asap

[dunglas 7]

I've just updated the theme to fix a JS bug in order OPC.

 

Empty width and height attributes and images not showing in IE is a Prestashop bug. A comment in the bug report explains how to fix it: http://forge.prestashop.com/browse/PSCFV-6435

[mestallo 1]

@Dunglas

 

which file did you changed? could you put the code text to be modified and deleted?

i followed the instructions of that link you gave us and it didn't work

 

thanks

[seog 2]

I've just updated the theme to fix a JS bug in order OPC.

 

Empty width and height attributes and images not showing in IE is a Prestashop bug. A comment in the bug report explains how to fix it: http://forge.prestas...owse/PSCFV-6435

 

Thanks very much for share. In http://www.google.co...ls/richsnippets with your files modified only shows product price. Even it doesn´t show the product image it will be seen in google search engines like the next image?

 

[Aramon 13]

Please, compatible 1.4.9?

[Snade 125]

Interesting project, how is it going ?

 

Did you managed to make accurate rich snippets for breadcrumbs, as this turns out to be a bit of a problem on the presta ?

[shoulders 35]

can you make the demo use the non cpmpressed code. the first thing i look at on a demo is the source code, lol

 

has this been merged in to prestashop?

 

thanks

Edited March 4, 2013 by shoulders (see edit history)

[papich 35]

Any news?Can it's possible to have this template in responsive?

[lightsb 11]

Hi,

For all "rich snippets" please folow this demo link

This is the module for sale.

[jasonhar 0]

legend!

 

does it have structred data? ie micro data for products etc?

[hihihihi88 3]

I like the demo ~~~ is cool

[GraphicsParty 0]

i love it~~~~

[wieslawg 3]

Hi Dunglas,

 

what is the difference between the DEFAULT theme and your?

[roflmyeggo 20]

Hi dunglas,

 

I have been using your theme as a base to start a custom design, and it has been very good to me so for that I thank you for all the work you have put in. Helped me out big time!

 

However, I don't believe the price changes with increase or reduction due to combinations on the product page, only in the cart, not sure why?

 

I would really appreciate some help, it doesn't seem to work in just the plain version of your template.

 

Thanks!

 

eggo

[roflmyeggo 20]

Hey dunglas,

 

I found that replacing the tools.js with the Prestashop default theme tools.js file worked perfectly to fix the issue.

 

Thought I would let you know. Still not sure if I downloaded a version before a release that fixed the bug.

 

Anyways, thanks again.

 

Best regards,

 

roflmyeggo

[sts098 0]

Dunglas, thanks for the theme! I had it running on my site for a while. I later found an issue. I use a lot of product combinations. So selecting differnet options should change price. When your module is active price never changes. I tried the suggestion above about using the default tools.js file, however, this does not solve the problem either.

 

I would very much like to use this theme, are you still supporting it?

[roflmyeggo 20]

sts098,

 

I think I identified the wrong file, but it is definitely in the js/ folder, if you can just replace the js/ folder in the theme with the default theme js/. The problem will be fixed.

 

Best,

 

eggo

[sts098 0]

I replaced entire js folder, still no luck. Anywhere else to look?

[roflmyeggo 20]

Might be an issue unrelated to the initial install of the theme then. I believe if you install this theme on a brand new default Prestashop installation, install the theme, and replace the js folder with the one from the default theme, you should see the issue resolved (this is what I did to find the issue).

 

I would try doing the same with product.tpl and then if that works, check over the changes between your product.tpl and the default to see what the culprit was.

 

Let me know if need anymore help.

 

Best,

 

eggo

[Rma Data 0]

Hello.. 

 

I wonder whay i got error when all other get it to work. 

i got error Felaktig konfigurationsfil 

so have i got wrong??