Skip to content

Kévin Dunglas

Founder of Les-Tilleuls.coop (worker-owned cooperative). Creator of API Platform, FrankenPHP, Mercure.rocks, Vulcain.rocks and of some Symfony components.

Menu
  • Talks
  • Resume
  • Sponsor me
  • Contact
Menu

Un thème Prestashop HTML5 optimisé pour le référencement avec Rich Snippets

Posted on January 11, 2013March 9, 2015 by Kévin Dunglas
Exemple d'extrait enrichi (Rich Snippet) sur Google
Exemple d’extrait enrichi (Rich Snippet) sur Google

Mise à jour : ces fonctionnalités sont maintenant incluses dans le thème par défaut de Prestashop 1.6. Ce thème n’est donc plus maintenu.

J’ai contribué il y’à quelques temps déjà la migration vers HTML5 du thème par défaut de Prestashop, la plateforme e-commerce libre. En attendant l’inclusion de ce patch dans la version upstream je vous propose au téléchargement un thème autonome libre et gratuit compatible avec les versions 1.5 et supérieures de Prestashop.

Il s’agit donc du thème par défaut techniquement optimisé pour un meilleur référencement naturel, plus accessible aux personnes handicapées et avec le support automatique des extraits enrichis affichés dans Google (voir l’illustration plus haut).

Voici la liste détaillée des fonctionnalités ajoutées :

  • Microdata HTML5 Schema.org Offer, Product et Breadcrumb pour afficher des “extraits enrichis” (Rich Snippets) dans Google
  • Nouvelles balises sémantiques HTML5 header, nav, footer et article pour un meilleur référencement (support des anciens navigateurs via Modernizr)
  • Rôles ARIA main, navigation, search, complementary, contentinfo et banner pour rendre le site plus accessible aux personnes souffrant de déficiences visuelles, auditives ou cognitives

Bien sûr cette template est complétement personnalisable, faites pour se charger vite et compatible avec le mode multiboutique et multilingue de Prestashop. C’est une base moderne pour personnaliser l’apparence de sa boutique sans négliger le référencement.

  • Télécharger la template sur GitHub (si vous ne savez pas utiliser Git, cliquez sur le bouton ZIP).
  • Voir une démo.

Related posts:

  1. Diaporama diffusé lors du workshop sur le référencement avec HTML5
  2. Workshop gratuit sur le référencement naturel avec HTML5 jeudi 31 janvier à Lille
  3. Réaliser un site Flash/Flex optimisé pour le référencement
  4. Nouvelle réalisation : la boutique Lost In The Supermarket

21 thoughts on “Un thème Prestashop HTML5 optimisé pour le référencement avec Rich Snippets”

  1. Films says:
    January 12, 2013 at 12:38 pm

    Merci pour le partage je vais tester ca, C’est exactement le même design que le theme par défaut ?,Et merci pour nous expliqué comment telecharger sur Github, j’avais deja cherché pendant 20 minutes sans trouver (honte a moi) …

    Reply
    1. Kévin Dunglas says:
      January 12, 2013 at 11:17 pm

      Oui c’est exactement le même design que le thème par défaut. En fait j’ai d’abord contribué ces changements pour inclusion dans une future version de Prestashop avant d’en extraire un thème par défaut boosté pour le SEO. A terme ces changements devraient arriver en natif dans Prestashop (si l’équipe décide de merger la Pull Request GitHub).

      Reply
  2. Mimou says:
    January 15, 2013 at 1:27 pm

    Une question: Doit faire qqchose de particulier: Renseigner des champs supplémentaire pour les rich snippet soit correctement activé dans le thème ou tout se faire naturellement grace a udescription ?

    Reply
    1. Kévin Dunglas says:
      January 17, 2013 at 9:47 pm

      Tout est automatique. S’inscrire au Google Webmaster Tools pour suivre l’indexation des pages reste tout de même une bonne idée.

      Reply
  3. papich says:
    January 17, 2013 at 9:04 pm

    Merci pour ce thème
    Comment le personaliser en html 5 sans dénaturer votre travail?
    Pensez vous dans un futur proche rendre le thème par défaut responsive ce serait vraiement très cool de votre part…et un grand pas en avant pour la communauté prestashop

    Reply
    1. Kévin Dunglas says:
      January 17, 2013 at 9:50 pm

      Bonjour,
      le passage au Responsive Design n’est pas prévu car il nécessiterait une créa spécifique et je n’en ai pas les compétences.

      Vous pouvez personnaliser ce thème comme vous l’auriez fait pour le thème par défaut standard. Il suffit de respecter la norme HTML5. Le site HTML5 Doctor est une bonne ressource si vous souhaitez connaitre les changements apportés à HTML5 par rapport aux version précédentes de HTML : http://html5doctor.com/

      Reply
  4. papich says:
    January 17, 2013 at 9:24 pm

    j’oubliais le site et aussi en css3? que signifie développement en html5?

    Reply
    1. Kévin Dunglas says:
      January 17, 2013 at 9:51 pm

      Pas de CSS3 n’est utilisé dans ce thème. HTML5 signifie simplement que ce thème utilise cette version de HTML et une (faible) partie du lot de nouveautés qu’elle apporte.

      Reply
  5. papich says:
    January 18, 2013 at 2:24 pm

    J’aimerais bien vous aidez à améliorer ce thème en html5/css3 et en responsive si vous me donnez les consignes à respecter…

    Reply
    1. dunglas says:
      January 21, 2013 at 9:20 am

      Tu peux envoyer des Pull Request directement sur la page GitHub du theme. Les règles de styles à respecter sont celles du projet Prestashop : http://docs.prestashop.com/display/PS15/Coding+Standard

      Reply
  6. Pingback: Diaporama diffusé lors du workshop sur le référencement avec HTML5 - Kévin Dunglas
  7. Adrian says:
    February 7, 2013 at 1:32 pm

    Bonjour,
    J’avais prestashop 1.5.3.1 et je reçois cet message d’erreur au cours de l’installation de thème: “Bad configuration file”.
    Avez-vous des suggestions?
    Toutes mes excuses. Il a fait 30 ans que j’ai appris le français a l’école 🙁
    Merci!

    Reply
  8. creation site perpignan says:
    February 11, 2013 at 2:49 pm

    Merci pour ce thème. Cela tombe bien car je dois faire une boutique prestashop optimisée avec quelques produits. Je reviendrais vers vous pour vous tenir au courant des résultats avec ce thème.

    Reply
  9. Melvinn says:
    March 5, 2013 at 12:40 pm

    Bonjour,
    J’ai prestashop 1.5.3.1 et je reçois un message d’erreur au cours de l’installation de thème: « Bad configuration file ».
    Avez-vous des suggestions?

    Un développeur me dit que ce thème n’est pas installable sur la V 1.5 de presta !

    Pourriez vous me donner quelques indications utilses pour faire une install propre

    En vous remerciant par avance pour votre réponse

    Reply
    1. Kévin Dunglas says:
      April 16, 2013 at 9:07 am

      Problème bizarre. La version de démo est pourtant une version 1.5 et personne ne semble avoir le problème.

      Quelle procédure avez-vous suivi pour installer le thème ?

      Reply
  10. Minifab says:
    March 23, 2013 at 9:41 pm

    Bonjour,

    Tout d’abord merci à vous de partager votre travail.

    J’ai installé votre thème optimisé SEO sur ma boutique http://www.clescd.fr/ cependant je constate qu’il n’est pas valide W3C, est ce un problème pour le référencement ? Quelle est votre recommandation sur ce sujet ?

    Minifab

    Reply
    1. Melvinn says:
      March 24, 2013 at 9:36 am

      Bonjour,

      je reviens sur un commentaire. Mon post en date du 5 Mars et resté sans réponse……(plus haut)

      J’aurais apprécié pouvoir l’utiliser, j’ai dû en acheter un qui fonctionne en html5 et responsive.

      Merci tout de même pour votre contribution.

      Reply
      1. Kévin Dunglas says:
        April 16, 2013 at 9:07 am

        Désolé je n’avais pas vu votre commentaire. Je viens d’y répondre.

        Reply
    2. Kévin Dunglas says:
      April 16, 2013 at 9:10 am

      Bonjour,
      ce n’est pas un problème pour le référencement.

      Je viens de tester votre site et il ne semble pas utiliser le thème optimisé Rich Snippet.

      Reply
  11. Laurent says:
    October 1, 2013 at 1:35 pm

    Bonjour,
    Votre thèmes est super pour un débutant comme moi mais j avais une question sur les css global et gird à quoi sert grid dans ce thèmes
    puisque global gère le gabarit de la page il me semble.
    merci pour votre retour

    Reply
  12. Pingback: SEO optimized HTML5 Prestashop theme with Rich Snippets support - PrestaShop Türkiye

Leave a ReplyCancel reply

Social

  • Bluesky
  • GitHub
  • LinkedIn
  • Mastodon
  • X
  • YouTube

Links

  • API Platform
  • FrankenPHP
  • Les-Tilleuls.coop
  • Mercure.rocks
  • Vulcain.rocks

Subscribe to this blog

Top Posts & Pages

  • JSON Columns and Doctrine DBAL 3 Upgrade
  • Securely Access Private Git Repositories and Composer Packages in Docker Builds
  • Preventing CORS Preflight Requests Using Content Negotiation
  • FrankenPHP: The Modern Php App Server, written in Go
  • Symfony's New Native Docker Support (Symfony World)
  • Develop Faster With FrankenPHP
  • HTTP compression in PHP (new Symfony AssetMapper feature)
  • PHP and Symfony Apps As Standalone Binaries
  • How to debug Xdebug... or any other weird bug in PHP
  • Generate a Symfony password hash from the command line

Tags

Apache API API Platform Buzz Caddy Docker Doctrine FrankenPHP Go Google GraphQL HTTP/2 Hydra hypermedia Hébergement Javascript JSON-LD Kubernetes La Coopérative des Tilleuls Les-Tilleuls.coop Lille Linux Mac Mercure Mercure.rocks Messagerie Instantanée MySQL performance PHP Punk Rock Python React REST Rock'n'Roll Schema.org Security SEO SEO Symfony Symfony Live Sécurité Ubuntu Web 2.0 webperf XML

Archives

Categories

  • DevOps (84)
    • Ubuntu (68)
  • Go (17)
  • JavaScript (46)
  • Mercure (7)
  • Opinions (91)
  • PHP (170)
    • API Platform (77)
    • FrankenPHP (9)
    • Laravel (1)
    • Symfony (97)
    • Wordpress (6)
  • Python (14)
  • Security (15)
  • SEO (25)
  • Talks (46)
© 2025 Kévin Dunglas | Powered by Minimalist Blog WordPress Theme