THELIA Forum

Welcome to the THELIA support and discusssion forum

Offline


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

itemprop="image"
									<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&nbsp;€</span>&nbsp;&nbsp;&nbsp;<del>#PRIX&nbsp;€</del>][<span class="prixProduit">#PRIX&nbsp;€ <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&nbsp;€</span>&nbsp;&nbsp;&nbsp;<del>#PRIX&nbsp;€</del>][<span class="prixProduit">#PRIX&nbsp;€ <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)

Offline


Attention, ce n'est valable que pour Thelia 1.

Le template de base Thelia 2 propose un balisage sémantique complet.


CQFDev | Sites, boutiques, modules, développement et intégration pour Thelia 1 et 2

Offline


Merci, je vais le préciser
Sinon, tu peux le déplacer dans la bonne section, mais cela apporte peut-être quelques notions complémentaires pour le balisage qui ne serait pas complètement abordé tel que le balisage, entreprise et notoriété, vidéo, site de publication et comprendre son utilisation et l'application.

Last edited by stephst84 (19-09-2017 11:13:55)

Offline


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

Je ne vois pas le rapport entre le guide et le site du peintre ?


CQFDev | Sites, boutiques, modules, développement et intégration pour Thelia 1 et 2

Offline


Pourquoi c'est interdit la citation du site en question ?

Offline

Offline


Bonjour, à propos de questions

roadster31 wrote:

Attention, ce n'est valable que pour Thelia 1.

Le template de base Thelia 2 propose un balisage sémantique complet.

Es ce que cette version 2 ajoute les balises meta comme celle-ci dans tes produits automatiquement ?

<meta itemprop="price" content="2170.00">
<meta itemprop="priceCurrency" content="EUR">

Je demande car je n'ai pas fait d'installation sur cette version et ne connait nullement toutes les caractéristiques et offres de celle-ci et de plus pas lu la doc.

Offline


Es ce que cette version 2 ajoute les balises meta comme celle-ci dans tes produits automatiquement ?

Oui. Et même les balises spécifiques aux promos. Regarde donc le code source des pages produit sur la démo Thelia 2 : http://demo.thelia.net/?view=product&la … duct_id=21

Mais tu ne réponds toujours pas à ma question neutral


CQFDev | Sites, boutiques, modules, développement et intégration pour Thelia 1 et 2

Offline


Oui. Et même les balises spécifiques aux promos. Regarde donc le code source des pages produit sur la démo Thelia 2 :

merci pour l'info mais comme je ne l'ai pas lu, ni installé CQFD, donc cela doit rouler comme il faut, je me suis dit que pour certains qui étaient restés sous du thelia 1 comme ce site (soit dit en passant il faut migrer de cette version 1 vers la nouvelle thelia2) cela pouvait servir pour une mise en place de balisage, sachant qu'il existe des outils pour vérifier le fonctionnement des balises en corrélation avec google qui est fortement demandeur des meta données pour mieux virer ou diminuer la popularité de sites ne répondant pas à ces exigences.
A défaut d'être incorporé dans cette version 2, faut-il activer manuellement l'option ou es-ce automatique?

à propos de réponse j'ai simplement donné le source et son intitulé, sinon cela dérange vraiment je supprime le post
la citation du site en question est elle formellement interdite ?
Bonne journée
Steph

Last edited by stephst84 (10-10-2017 08:45:20)

Offline


A SAVOIR
Cette méthode de schema de balisage proposée est un balisage entièrement manuel, Certaines balises sont propres à la solution Thelia 1, si vous utilisez un autre concept de site vous adaptez, vous ne tenez pas compte des balises thelia

Exemple de balise thelia

<THELIA_LIEN_PROD type="PRODUIT" id="#ACCESSOIRE">
votre code normal <h1><h2><p>
</THELIA_LIEN_PROD>

Cependant si vous construisez un site complètement de A à Z, en dehors des traditionnelles solutions open source offertes ou vous devez simplement cocher les cases pour activer les balises, cette méthode de balisage manuelle peut éventuellement vous servir pour marquer, personnaliser vos produits de boutique (offer et product + price et image), vos articles, votre marque selon un principe bien ordonné et justifié.

A titre informatif
Dans la fin de l'article vous avez les principaux liens pour tester votre balisage avec vos données structurées SEO par type de site et comprendre le type de balise sémantique en lui même et toutes les variantes issues de schema.org.

Le but de ce schema de balisage est de permettre une meilleure compréhension du contenu de votre site : améliore la visibilité dans les moteurs de recherche de vos extraits de produits, article selon votre site

Les principaux Schéma de balisage
pour les entreprises, Site Web, e-commerce, blog, événementiels, personnels...

Je vous souhaite à tous un meilleur référencement de vos produits pour vos boutiques et autres avec des données structurées...
Steph

Last edited by stephst84 (10-10-2017 08:27:13)

Offline


Bonjour, complément d'info
Pour obtenir des balises meta conformes sous thelia version 1  avec le plugin seo et sans ou seulement les meta description et keyword
Ce complément d'info doit être différent de vos meta avce le plugin seo

Les champs concernés par ces balises sont Chapo et Post_scriptum comme précisé dans la doc

Vous balisez de cette manière pour être conforme et avoir vos infos dans les rich snipets

<meta name="description" content="#STRIPCHAPO"/>
<meta name="keywords" content="#POSTSCRIPTUM"/>
  <link rel="canonical" content="#URL"/>

Last edited by stephst84 (10-10-2017 08:24:08)

Offline

Offline


Merci pour le complément d'info
Ce que je soumets et non une obligation c'est un balisage manuel ce qui permet de comprendre là où tu dois le placer pour faire ressortir tes données structurées à savoir que cela s'applique à tous types de site internet, entièrement construit de A à Z ou tu veux avoir la main et, pas que thelia.
Parfois l'automatisation est ultra pratique, et comprendre le mode manuel est utile même si on a un plugin qui fait tout, comprendre les bases du schema doit aider à en comprendre son fonctionnement, son utilisation.
Je vous souhaite à tous une excellente journée
Steph

Last edited by stephst84 (10-10-2017 08:52:43)