Partage de technique via Créactivit
Le balisage sémantique de vos données Attention, ce n'est valable que pour Thelia 1 comme précise roadster31 Thélia 2 est fourni avec un balisage complet
mais il peut vous servir à tester et comprendre le fonctionnement de vos différentes balises installées nativement sur un thelia 2 ou vous permettre d'en ajouter à des endroits ciblés pour améliorer votre présence dans les moteurs de recherche avec des richsnippets : balisage de votre logo, des informations de contact de votre société, les liens qui la relie aux différents réseaux sociaux.
Bonjour, à tous
Je vous propose une solution pour mettre en place un schéma de balisage pour vos sites e-commerce sous Thelia 1 et même pour vos sites vitrines ou autres sur ladite plateforme préférée
Le principe reste le même pour les autres sites sous d'autres plateformes open source et pour les différentes versions de thelia
Pour mettre en place la technique, vous avez deux méthodes, soit via l'outil de google qui vous indique phase par phase là ou vous devez placer vos balises dans vos templates ou à la mano comme je vais vous montrer, cependant si vous utilisez un cms de type Wordpress vous pouvez utiliser un plugin que vous paramétrez.
Le schéma de balise est mis en place sur un thelia ver 1.5.4.3 les autres versions vous adaptez selon le corps de vos templates pour l'emplacement de vos balises.
Pourquoi mettre en place un balisage de schema ?
Les données structurées sémantiques que vous installez vont aider les petits robots d'indexation (googlebot and consorts) à mieux comprendre la structure de votre site, comment mieux discerner votre fil d'ariane ou breadcrumb, comprendre le chemin de navigation sur votre rubrique, vos produits associés à leur prix, si vous avez des produits nouveaux, en promo, des réductions et plein d'autres choses...
La mise en place de ces nouvelles balises vont améliorer votre code html pour mieux comprendre le balisage des catégories, les pages de vos produits, vos contenus en guise de fiche associée à vos produits.
En fin de tutoriel vous avez les liens pour tester et valider votre schema.org et des exemples visuels sur un site (utilisez firebug ou autre extension dans votre navigateur préféré, ou voir le code source pour visualisez la mise en place du code).
Application de données structurées sur un produit
Les balises sémantiques utilisent trois types d’attributs : itempscope, itemtype, itemprop
Début du schema de balisage pour un produit
une page Produit avec description, associé avec une image
On définit la catégorie de notre produit
1. La balise pour définir notre produit
itemscope="" itemtype="http://schema.org/Product"
2. La balise insérée dans le corps du template
<div id="wrapper_info_magazine" itemscope="" itemtype="http://schema.org/Product" >
<div id="wrapper_picture_magazine" class="theme_container">
<div id="wrapper_visuel_magazine">
<THELIA_PROD type="PRODUIT" id="#PRODUIT_ID" itemprop="">
1. Indication supplémentaire propre au code de thélia
<div id="wrapper_visuel_magazine">
<THELIA_PROD type="PRODUIT" id="#PRODUIT_ID" itemprop="">
Balisage du titre du produit product
<h1><span itemprop="name">#TITRE</span></h1>
<h2>#CHAPO</h2>
Balisage des caractéristiques du produit product
Je vous laisse discerner les caractéristiques à données structurées et celles à moindre valeur.
la balise description concernant les caractéristiques du produit, elle est incluse parfois à l'intérieur de balise html "SPAN"
<span itemprop="description">
Insertion des balises dans les caractéristiques du produit
<h2 class="quote">::caracteristiques::#TITRE</h2>
<ul class="features">
<li>
<THELIA_CARACVAL_THEME type="CARACVAL" caracteristique="26" produit="#ID">
Thème : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_THEME>
<//THELIA_CARACVAL_THEME>
</li>
<li>
<THELIA_CARACVAL_ANNEE type="CARACVAL" caracteristique="14" produit="#ID">
ART : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_ANNEE>
<//THELIA_CARACVAL_ANNEE>
</li>
<li>
<THELIA_CARACVAL_MARQUE type="CARACVAL" caracteristique="15" produit="#ID">
TECHNIQUE : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_MARQUE>
<//THELIA_CARACVAL_MARQUE>
</li>
<li>
<THELIA_CARACVAL_MODEL type="CARACVAL" caracteristique="16" produit="#ID">
Format Dessin : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_MODEL>
<//THELIA_CARACVAL_MODEL>
</li>
Le balisage de l'image du produit dans ce cas pas plus d'info mais elle est complémentaire à notre product
Pose de la balise d'indication
<THELIA_img type="IMAGE" cache="1" num="1" produit="#ID" largeur="333">
<THELIA_ZOOM type="IMAGE" num="1" id="#ID" largeur="1000">
#SET{zoom, #IMAGE}
</THELIA_ZOOM>
<a title="#PRODTITRE" href="#GET{zoom}" rel="superbox[image]" class="grandeImage">
<div class="boardCoverWrapper">
<span class="hoverMask"></span>
<img itemprop="image" class="pinImg fullBleed loaded fade" src="#IMAGE" alt="#PRODTITRE"/>
</div>
</a>
</THELIA_img>
Le balisage de notre offre concernant le produit
1. La balise de shema
itemscope="" itemtype="http://schema.org/Offer"
La balise de la valeur de notre produit en stock
<link itemprop="availability" href="https://schema.org/InStock">
2. La balise de prix est insérée et nous ajoutons les balises méta afin d'apporter un peu plus de signification en lui indiquant le prix courant et la monnaie utilisée
<div itemscope="" itemtype="http://schema.org/Offer" class="theme_priceSelected">
<TEST_ex3 variable="#PRIX" test="superieurouegal" valeur="1">
<link itemprop="availability" href="https://schema.org/InStock">
<b>PRIX : </b> #PROMO[<span class="prixProduit">#PRIX2 €</span> <del>#PRIX €</del>][<span class="prixProduit">#PRIX € <meta itemprop="price" content="#PRIX"><meta itemprop="priceCurrency" content="EUR"></span>]
</TEST_ex3>
<//TEST_ex3>
</div>
2.1 A l'intérieur du code on insère des balises méta
<meta itemprop="price" content="#PRIX"><meta itemprop="priceCurrency" content="EUR">
Le résultat de votre balisage
Donc la vérification du schema de vos balises vous informe sur les erreurs éventuelles, il indique que le fil d'ariane ou breadcrumb est pris en compte correctement
Il détecte l'offre du produit et le product proprement dit, et le breadcrumb si vous en avez placer un
Tester le balisage de vos templates et comprendre les résultats
Outil vérification
Résultats globaux
Détectés 0 ERREUR 0 AVERTISSEMENT 3 ÉLÉMENTS
BreadcrumbList 0 ERREUR 0 AVERTISSEMENT 1 ÉLÉMENT
Offer 0 ERREUR 0 AVERTISSEMENT 1 ÉLÉMENT
Product 0 ERREUR 0 AVERTISSEMENT 1 ÉLÉMENT
Résultat détaillé
Détail de la balise * Offer * vous trouvez toutes les infos renseignées dans votre back-office concernant votre produit
Offer 0 ERREUR 0 AVERTISSEMENT
@type Offer
availability http://schema.org/InStock
price 2170.00
priceCurrency EUR
Résultat détaillé
Le résultat de la balise * Product * sur votre produit : le type, l'image, le name, et la description
ProductID: http://www.alexandregirot.com/wrapper_info_magazine
0 ERREUR 0 AVERTISSEMENT
@type Product
@id http://www.alexandregirot.com/wrapper_info_magazine
image http://www.alexandregirot.com/client/cache/produit/333_______statue-of-liberty-ny-alexandre-girot-_377.jpg
name Statue de la Liberté
description Liberté
description Fractionnisme paysage
description Peinture acrylique
description Saison 2016 - 2017
Le code complet des balises sur un produit
La mise en place des balises à l'intérieur du code * HTML * de votre page produit
<div id="wrapper_info_magazine" itemscope="" itemtype="http://schema.org/Product" >
<div id="wrapper_picture_magazine" class="theme_container">
<div id="wrapper_visuel_magazine">
<THELIA_PROD type="PRODUIT" id="#PRODUIT_ID" itemprop="">
<div class="wrapper_bloc_visu_galerie_fiche">
<div class="BoardBase Board Module boardCoverImageSelect">
<T_img>
<THELIA_img type="IMAGE" cache="1" num="1" produit="#ID" largeur="333">
<THELIA_ZOOM type="IMAGE" num="1" id="#ID" largeur="1000">
#SET{zoom, #IMAGE}
</THELIA_ZOOM>
<a title="#PRODTITRE" href="#GET{zoom}" rel="superbox[image]" class="grandeImage">
<div class="boardCoverWrapper">
<span class="hoverMask"></span>
<img itemprop="image" class="pinImg fullBleed loaded fade" src="#IMAGE" alt="#PRODTITRE"/>
</div>
</a>
</THELIA_img>
</T_img>
<img src="./template/_gfx/no-image.png" alt="Pas d'image disponible"/>
<//T_img>
</div>
</div>
</div>
</div>
<div id="wrapper_txt_magazine">
<div id="wrapper_title_magazine" class="title_heightInfo">
<div class="c_both liseret_top"></div>
<h1><span itemprop="name">#TITRE</span></h1>
<h2>#CHAPO</h2>
<div class="c_both liseret_bottom"></div>
<div class="push"></div>
<h2 class="quote">::caracteristiques::#TITRE</h2>
<ul class="features">
<li>
<THELIA_CARACVAL_THEME type="CARACVAL" caracteristique="26" produit="#ID">
Thème : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_THEME>
<//THELIA_CARACVAL_THEME>
</li>
<li>
<THELIA_CARACVAL_ANNEE type="CARACVAL" caracteristique="14" produit="#ID">
ART : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_ANNEE>
<//THELIA_CARACVAL_ANNEE>
</li>
<li>
<THELIA_CARACVAL_MARQUE type="CARACVAL" caracteristique="15" produit="#ID">
TECHNIQUE : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_MARQUE>
<//THELIA_CARACVAL_MARQUE>
</li>
<li>
<THELIA_CARACVAL_MODEL type="CARACVAL" caracteristique="16" produit="#ID">
Format Dessin : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_MODEL>
<//THELIA_CARACVAL_MODEL>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="17" produit="#ID">
Disponibilité : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="18" produit="#ID">
Support : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="19" produit="#ID">
Année de réalisation : <h3 class="feature"><span itemprop="description">#VALEUR</span></h3>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="27" produit="#ID">
GPS : <span class="featureInfo"><a href="https://www.google.fr/maps/place/#VALEUR">#VALEUR</a></span>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="20" produit="#ID">
Encadrement : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
<li>
<THELIA_CARACVAL_DIM type="CARACVAL" caracteristique="21" produit="#ID">
Accessoire : <span class="featureInfo">#VALEUR</span>
</THELIA_CARACVAL_DIM>
<//THELIA_CARACVAL_DIM>
</li>
</ul>
<div class="quote">#POSTSCRIPTUM</div>
<form action="#AJOUTER_PARAMETRE(#URLCOURANTE,panier=1)" method="post">
<input type="hidden" name="action" value="ajouter" />
<input type="hidden" name="ref" value="#REF" />
<input type="hidden" name="quantite" value="1" />
<div class="newContainer">
#NOUVEAU[<span class="paintingOut">::nouveau::</span>][]
</div>
<div itemscope="" itemtype="http://schema.org/Offer" class="theme_priceSelected">
<TEST_ex3 variable="#PRIX" test="superieurouegal" valeur="1">
<link itemprop="availability" href="https://schema.org/InStock">
<b>PRIX : </b> #PROMO[<span class="prixProduit">#PRIX2 €</span> <del>#PRIX €</del>][<span class="prixProduit">#PRIX € <meta itemprop="price" content="#PRIX"><meta itemprop="priceCurrency" content="EUR"></span>]
</TEST_ex3>
<//TEST_ex3>
</div>
<div class="grid_4 ralign ajoutPanierWrap">
#FILTRE_different(#STOCK||0||<button type="submit">::ajouterpanier::<span class="hidden"> #STRIPTITRE</span></button>)
<TEST_ex5 variable="#STOCK" test="superieurouegal" valeur="1">
<span>#FILTRE_egalite(#STOCK||0||ON AIME !)</span>
</TEST_ex5>
<div class="priceContainer">
<span class="paintingOut">#FILTRE_egalite(#STOCK||0||ON AIME !)</span>
</div>
<//TEST_ex5>
</div>
</form>
<T_CONTENU>
<div class="contenusAssocies grid_6">
<THELIA_PRODUITSACC type="CONTENUASSOC" objet="#PRODUIT_ID" num="1">
<THELIA_CONTENU type="CONTENU" id="#CONTENU">
<div class="article grid_12">
<div class="article-contenu">
#SET{urlContenu, #URL}
<T_IMAGE>
<THELIA_IMAGE type="IMAGE" contenu="#ID" num="1">
<div class="grid_3"><a href="#GET{urlContenu}"><img class="miniature" src="#IMAGE" alt="#CONTTITRE" title="#CONTTITRE" /></a></div>
</THELIA_IMAGE>
</T_IMAGE>
<img src="./template/_gfx/no-image.png" alt="Pas d'image disponible" />
<//T_IMAGE>
<div class="grid_9">
<h3><a href="#URL">#TITRE</a><span class="spanDate rfloat">#DATE</span></h3>
#CHAPO
</div>
<div class="push"></div>
<a href="#URL" class="lire-la-suite"><b>::liresuite::</b> #TITRE</a>
</div>
</div>
</THELIA_CONTENU>
</THELIA_PRODUITSACC>
</div>
</T_CONTENU>
<//T_CONTENU>
<T_ACC>
<div class="blocMozaique grid_6">
<div class="contenusAssocies-wrap">
<h3>::autreproposition::</h3>
<THELIA_ACC type="ACCESSOIRE" aleatoire="1" produit="#PRODUIT_ID" num="8">
<div class="grid_3 calign">
<THELIA_LIEN_PROD type="PRODUIT" id="#ACCESSOIRE">
<h4><a href="#URL">#TITRE</a></h4>
#SET{urlProduit, #URL}
</THELIA_LIEN_PROD>
<T_IMAGE>
<THELIA_IMAGE type="IMAGE" num="1" produit="#ACCESSOIRE">
<a href="#GET{urlProduit}"><img src="#IMAGE" alt="#TITRE" title="#TITRE"/></a>
</THELIA_IMAGE>
</T_IMAGE>
<a href="#GET{urlProduit}"><img src="./template/_gfx/no-image.png" alt="Pas d'image disponible" /></a>
<//T_IMAGE>
</div>
</THELIA_ACC>
</div>
</T_ACC>
<//T_ACC>
</div>
#FILTRE_different(#ENV{panier, 0}||0||
<div id="informations-thickbox">
<div class="grid_12">
<h4>::quefaire::</h4>
<div class="grid_6"><a href="#URLFOND(produit,id_produit=#ENV{id_produit}&id_rubrique=#ENV{id_rubrique})">::poursuivreachats::</a></div>
<div class="grid_6"><a rel="nofollow" href="#URLFOND(panier)">::validerpanier::</a></div>
</div>
</div>)
</div>
</div>
</THELIA_PROD>
</div>
Annexes liens et outils gratuits
Liens des différents outils pour ce tutoriel d'aide au balisage sémantique de vos produits
Mettre en place le balisage sémantique https://schema.org/docs/schemas.html
La liste complètes des balises selon ce que vous voulez structurer sur votre site https://schema.org/docs/full.html
Outil d'aide au balisage de Google https://www.google.com/webmasters/markup-helper/u/0/
Outil de vérification de balisage sémantique https://developers.google.com/structure … ting-tool/
Un guide en français pour connaitre les différents usages et utilisation des balises en passant par les sites entreprises, de recettes, branding, événementiels, blog...
Le site en question Alexandre Girot artiste peintre
Page test pour visualiser les effets du balisage d'un article produit http://alexandregirot.com/147-paysage-f … berte.html
Page test schema sur une rubrique catégorie de produit http://alexandregirot.com/paysage-fractionnisme.html
Info
A ce jour 19-09-2017-11:09 je n'ai pas vu de tutoriel sur le schema de balisage sur le forum donc celui-ci serait un complément
En vous souhaitant une bonne mise en place de balisage sémantique pour vos sites et un meilleur référencement de vos produits
Stéphane Lieppe
Last edited by stephst84 (10-10-2017 09:02:18)