5568 sujets

Sémantique web et HTML

Itemscope Imbriqué

Bonjour à tous.

J'essaye de developper un Theme html pour ma boutique à pres avoir lu pas mal de chose sur le HTML5, mais j'ai un problème dont je ne trouve pas de solution.

Voici ma structure de 

<!DOCTYPE HTML>
<html>
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header>
			[...]				  
		</header>
		<div>
			[...]				  
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Sachant que dans mon header j'ai les coordonnées de ma société je pensait placer
un itemtype="http://schema.org/Organization" sur le header
et
un itemtype="http://schema.org/Product" sur la partie principale

J'ai tenter
<!DOCTYPE HTML>
<html>
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header itemscope itemtype="http://schema.org/Organization">
			<span  itemprop="name">Nom de ma société</span>
			[...]				  
		</header>
		<div itemscope itemtype="http://schema.org/Product">
			<h1 itemprop="name">Nom de ma société</h1>
			[...]				  
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Mais dans ce cas lorsque je teste
avec http://www.google.com/webmasters/tools/richsnippets
ou partager avec G+ j'ai toujours des soucis avec le contenu partager ou principale. est celui de l Organisation



Puis j'ai essayer:
<!DOCTYPE HTML>
<html  itemscope itemtype="http://schema.org/Product">
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header itemscope itemtype="http://schema.org/Organization">
			<span  itemprop="name">Nom de ma société</span>
			[...]				  
		</header>
		<div>
			<h1 itemprop="name">Nom de ma société</h1>
			[...]				  
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Mais idem



Puis
<!DOCTYPE HTML>
<html itemscope itemtype="http://schema.org/WebPage">
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header itemscope itemtype="http://schema.org/Organization">
			<span  itemprop="name">Nom de ma société</span>
			[...]				  
		</header>
		<div itemscope itemtype="http://schema.org/Product">
			<h1 itemprop="name">Nom de ma société</h1>
			[...]				  
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Mais dans ce cas il considere ma page comme webpage et ne prend pas en compte les meta produit.


Peut on avoir deux itemscope dans un page?
Quel syntaxe serait correct?
Merci pour ta réponse.

Mais tu dis "oui" mais oui à quoi?

Je suis possible à la possibilité d'avoir deux itemscope.

Mais dans ce cas quel est la syntaxe correct. et comment faire en sorte que le itemscope principale soit Product et non organisation?
La logique est à peu près la même qu’en HTML : tu imbriques tes éléments et tu as donc un contenant et un contenu. Pour faire simple :


<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Mon produit</h1>
  <aside itemprop="brand" itemscope itemtype="http://schema.org/Organization">
	 <span  itemprop="name">Nom de ma société</span>				  
  </aside>
</body>


Il suffit que ta société soit considérée comme une propriété de ton produit : tu as le choix entre brand et manufacturer. La nuance n’est pas évidente, mais dans ton cas brand semble mieux indiqué — en supposant que tous tes produits le soient bien par la même société et que tu construises le site de cette dernière, définir ta société en tant que marque donnera (en théorie) plus d’homogénéité dans les résultats de recherche. Manufacturer est plutôt indiqué dans le cas ou les produits commercialisés sont produits par différentes sociétés…

Bon courage, les micro-données ne sont jamais simples à mettre en place !
Merci pour ta réponse.

J'ai déja dans la fiche produit un
<meta itemprop="brand">
Mon souci concerne en fait le header, contenan le nomn de la société le logo, la baseline, le lien vers la home (bref, le header classique) que lequel j'ai rajouter un itemscope="organisation"

Considérant que tout le header représente l'entié "organisation"

Mais peut être Est ce une erreur de ma part de vouloir faire cela?
Et bien si tu souhaites que le produit remonte avant la société, oui c’est une erreur : les micro-données ajoutent une couche sémantique au HTML mais respectent la sémantique de base.

Dans ta page HTML, les éléments importants sont le header et les titres (h1, h2,h3…). Donc si tu affubles ton header des micro-données concernant ta société, elles sont évidemment plus importantes que celles du produit. Question de logique.

Tu peux te passer de la répétition des micro-données dans le header, par exemple ne les mettre que sur la page d’accueil ou de contact (ou autres) — et laisser le header vierge de micro-données dans tes pages produits. Si tu renseignes les micro-données brand dans ton produit, les informations sur ta société seront donc reprises dans ta fiche produit.

Qu’en penses-tu ?
C'est effectivement ce que j'ai fait après de nombreux test, mais j'avais peur de ne pas avoir compris quelque chose.

D'autant que j'avais quelque chose comme cela:

<!DOCTYPE HTML>
[code=html]<html itemscope itemtype="http://schema.org/WebPage">
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header itemscope itemtype="http://schema.org/Organization">
			<span  itemprop="name">Nom de ma société</span>
			[...]				  
		</header>
		<div itemscope itemtype="http://schema.org/Product">
			<h1 itemprop="name">Nom de ma société</h1>
			[...]				  
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Donc comme l'élément ayant le plus de poids est le H1 et que le header peut être considérer comme moins important j'ai penser qu'il mettrait le focus sur le http://schema.org/Product

Donc il serais plus judicieux d'avoir:

<!DOCTYPE HTML>
<html itemscope itemtype="http://schema.org/Product">
	<head>
		<title>[..]</title> 
		[...]
</head>
<body>
	<div>
		<header>
			<span>Nom de ma société</span>
			[...]				  
		</header>
		<div >
			<h1 itemprop="name">Nom de ma société</h1>
			[...]		
<div id="productscategory_list">
		<ul>
			<li itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
				<a itemprop="url" href="http://www.example.tld/2.html">
					<img itemprop="image" src="http://www.example.tld/2.jpg"/>
					<span itemprop="name">autreproduit</span>
				</a>
			</li>
			<li>
			[...]
		</ul>
		</div>
		<footer>
			[...]				  
		</footer>
	</div>
</body>
</html>


Et du coup tu mettrai l'itemscope sur <html> oui <body> ou la div principale?

Et sur le issimliar
laquel des deux syntaxe est correct:
<li itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
ou
<li itemprop="isSimilarTo">

Merci
Bonjour

Je pense que la solution à votre problème s'appelle "itemref".

Voici un exemple extrait de mon site (http://www.alma-musica.net/html/repertoire/repertoire.php?Miroirs2014, Première ligne:
<tr class="impair">
<td class="author">
<div class="authorbox">
<div class="author" id="Monteverdi" itemprop="author" itemscope="itemscope" itemtype="http //schema.org/Person" onclick="window.open('http://fr.wikipedia.org/wiki/Claudio_Monteverdi');" style="cursor: pointer;background: url('/images/auteurs/Monteverdi.jpg') no-repeat;">
<meta itemprop="url" content="http://fr.wikipedia.org/wiki/Claudio_Monteverdi">
<meta itemprop="image" content="/images/auteurs/Monteverdi.jpg">
<div class="authorname" itemprop="name">Claudio Monteverdi</div>
<div class="authorInfo"><time itemprop="birthDate">1567</time>-<time itemprop="deathDate">1643</time></div>
</div>
<div class="disk" title="Enregistrements" onclick="window.open('http://roy.free.fr/monteverdi');">&nbsp;</div>
</div>
</td>
<td class="work">
<div class="work" itemscope="itemscope" itemtype="http://schema.org/CreativeWork" itemref="Monteverdi">
<div class="docs">
<table style="border:none;cellspacing:2px;">
<tbody><tr style="vertical-align:top;">
<td><a href="/html/partitions/Monteverdi/Cantate-Domino.pdf" target="_blank" title="Afficher la partition"><img src="/images/score.gif" style="border:none;"></a></td>
<td>
<div onclick="window.open('/html/private/partitions/display.php?Monteverdi_CantateDomino');" title="Afficher le texte de cette œuvre"><img src="/images/text2.gif"></div>
</td>
</tr>
</tbody></table>
</div>
<div class="worktitle" itemprop="name"><img src="/images/nomvt.gif">&nbsp;Cantate Domino</div>
<div class="musicians">Chœur</div>
</div>
</td>
</tr>

on voit que la description du compositeur ("Monteverdi") se trouve avant la description de l’œuvre ("Cantate Domino").

La syntaxe est la suivante:
- <div id="Monteverdi" ... itemprop="author"> contient la description de l'auteur (nom, image, dates de naissance et de mort, etc.
- <div class="work" ... itemref="Monteverdi"> contient la description de l’œuvre, SAUF L'AUTEUR, et renvoie à <div id="Monteverdi"> par l'intermédiaire de "itemref".
Noter également les balises <meta> qui renvoient à des informations (portrait de l'auteur, lien vers l'entrée Wikipédia) qui sont adressées dans le html de façon indirecte ("onclick" et "background-image").

Pourquoi j'ai fait cela dans cet ordre: parce que, comme dans votre cas, il arrive que plusieurs œuvres d'un même concert (et pas forcément jouées consécutivement) soient les œuvres d'un même auteur. Dans ce cas il n'y a qu'une seule description de l'auteur et autant de description d’œuvres qui renvoient toutes à la même description d'auteur par "itemref".
Modifié par PapyJP (27 Feb 2014 - 12:56)
Sujet clos
Aller à