it-swarm-fr.com

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>
33
Giel Berkers

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!).

21
unor

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>
11
John R Perry

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>
9
Stephan Weinhold
<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>
5
davidcondrey

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>

3
ashrafnezhad

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.

0
Josh Habdas

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

0
Mathieu VIALES

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:

Google's Structured Data Testing Tool's result

0
David Barratt