Quelle est l'utilisation correcte de schema.org SiteNavigationElement?
En termes de référencement ...
Est-il préférable de mettre le schéma sur le parent contenant tous les liens?
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
... ou chaque lien doit-il être considéré comme son propre élément?
<nav>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 1</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 2</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 3</span>
</a>
</span>
</nav>
Si SiteNavigationElement est destiné à l'ensemble de la navigation (c'est-à-dire une liste de liens de navigation), votre premier exemple est correct.
Si SiteNavigationElement est destiné à une seule entrée de navigation (c'est-à-dire un lien dans la liste des liens de navigation), votre deuxième exemple est correct.
Je pense que Schema.org ne définit pas sans ambiguïté la variante à signifier, car ils disent seulement:
Un élément de navigation de la page.
Cependant, le type parent WebPageElement est défini comme suit:
Un élément de page Web, comme une table ou une image
En outre, tous les autres types enfants (comme Table ou WPFooter ) semblent être utilisés pour l'ensemble, et non pour des parties spécifiques de celui-ci.
Cela semble donc suggérer que toute la navigation devrait être balisée, et non chaque lien:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="/link-1">Link 1</a></li> <!-- don’t use the 'url' or 'name' property here! -->
<li><a href="/link-2">Link 2</a></li>
</ul>
</nav>
Dans ce cas, toutes les propriétés appartiennent à l'ensemble de la navigation, ce qui signifie que la propriété url spécifierait une URL pour cette navigation (et not les URL des liens de cette navigation!).
Selon Search Engine Land , il est supposé ressembler à ceci:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name">
<a itemprop="url" href="#">Link 1</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Link 2</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Travel Resources</a>
</li>
</ul>
La première réponse est correcte mais je mélange les deux pour la sémantique (HTML5):
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a itemprop="url" href="http://example.com/">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
<nav role="navigation">
<ul role="menubar" aria-activedescendant="">
<li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<a href="" role="menuitem" tabindex="-1" itemprop="url">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
schema.org/SiteNavigationElement étend WebPageElement et peut être utilisé pour baliser des liens, qui créent souvent de bons liens contextuels. Vous pouvez utiliser ce schéma pour votre menu de page.
<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a href="https://yoursite.com/" title="Link to Home" itemprop="url">
<span itemprop="name">Home</span>
</a>
</li>
<li>
<a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
<span itemprop="name">sample page</span>
</a>
</li>
</ul>
Cela dépend du moteur de recherche. Étant donné l'extrait de code suivant:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Navigation Menu">
<a itemprop="url" href="/">Overview</a>
<a itemprop="url" href="/feature/">Features</a>
<a itemprop="url" href="/module/">Modules</a>
<a itemprop="url" href="/shortcode/">Shortcodes</a>
<a itemprop="url" href="/extra/">Extras</a>
<a itemprop="url" href="/search/">Search</a>
</nav>
Le test des données structurées de Yandex outil renverra:
sitenavigationelement
itemType = http://schema.org/SiteNavigationElement
name = Navigation Menu
url
href = /
text = Overview
url
href = /feature/
text = Features
url
href = /module/
text = Modules
url
href = /shortcode/
text = Shortcodes
url
href = /extra/
text = Extras
url
href = /search/
text = Search
Alors que Google outil renvoie:
SiteNavigationElement
0 ERRORS
0 WARNINGS
@type = SiteNavigationElement
name = Navigation Menu
url = https://domain.example/
url = https://domain.example/feature/
url = https://domain.example/module/
url = https://domain.example/shortcode/
url = https://domain.example/extra/
url = https://domain.example/search/
Les deux outils affichent des données structurées et fournissent une valeur sémantique supérieure à la simple utilisation de nav. Donc, bien que certains pensentSiteNavigationElement devrait être totalement déconseillé, ils ont aussi, dans le même flux de pensée, avouer que celle qu'ils "reconnaissent" est celle que j'ai fournie ici.
Vous devez placer SiteNavigationElement dans un wrapper autour du groupe d’URL individuelles utilisées dans votre navigation pour pouvoir nommer la navigation elle-même à l’aide de itemprop="name".
Par conséquent, le premier exemple est correct.
La question initiale de OP contenait un bon exemple de code. aucune des réponses ne fait cependant ...
Il semble que tout le monde ait jeté une réponse quelque peu aléatoire ... Vous pouvez tester votre code de microdonnées de schéma à l'aide de l'outil officiel Google suivantsearch.google.com/structured-data/testing-tool .
Si vous exécutez les réponses proposées dans cet outil, vous remarquerez qu’aucune ne vous donne le résultat attendu: une liste de SiteNavigationElement avec un nom et une URL.
Certains pourraient dire qu'un menu complet pourrait être considéré comme un "élément de navigation", mais je pense qu'il est plus logique que cette dénomination désigne un seul lien de navigation. De plus, si nous utilisons la variable SiteNavigationElement comme marqueur pour l’ensemble du menu, nous n’avons aucun moyen d’associer des noms à des URL dans le code HTML.
Pour ce faire, chaque lien doit être encapsulé dans une propriété itemscope et tous doivent avoir leurs propres name et urlitemprop (ce sont des singleton comme mentionné par @David Harkness, ils ne doivent donc apparaître qu'une fois par itemprop)
<nav>
<ul>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-1">
<span itemprop="name">Link 1</span>
</a>
</li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-2">
<span itemprop="name">Link 2</span>
</a>
</li>
</ul>
</nav>
Le code ci-dessus va associer deux éléments de navigation différents, chacun avec un nom et une URL.
Remarque: l'attribut itemprop="url" utilise l'attribut href de l'ancre comme valeur
Je pense que la solution la plus élégante serait d'utiliser la propriété hasPart .
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="hasPart" href="/link1.html">Link 1</a>
<a itemprop="hasPart" href="/link2.html">Link 2</a>
<a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>
En utilisant l'outil de test des données de structure de Google , vous informez que ces liens font partie de SiteNavigationElement et que Google doit suivre les liens correspondants:
