Jump to content
dunglas

SEO optimized HTML5 Prestashop theme with Rich Snippets support

Recommended Posts

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 by dunglas (see edit history)
  • Like 4

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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 by dunglas (see edit history)

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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=

Share this post


Link to post
Share on other sites

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 by the.rampage.rado (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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?

 

post-76547-0-76536400-1359303618_thumb.png

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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 by shoulders (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi Dunglas,

 

what is the difference between the DEFAULT theme and your?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hello.. 

 

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

i got error Felaktig konfigurationsfil 

so have i got wrong??

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More