web-dev-qa-db-fra.com

Structure de la page Web Schema.org pour un site à page unique

Je construis un site de portfolio d'une seule page avec WordPress pour un client divisé en sections qui, traditionnellement, seraient des pages distinctes, telles que - about, portfolio, contact.

Puis-je imbriquer plusieurs pages Web schema.org dans un même WebPage global comme le balisage suivant:

<body>
    <main itemscope itemtype="https://schema.org/WebPage">

        <article itemscope itemtype="https://schema.org/AboutPage">
        </article>

        <article itemscope itemtype="https://schema.org/CollectionPage">
        </article>

        <article itemscope itemtype="https://schema.org/ContactPage">
        </article>

    </main>
</body>
htmlmicrodataschema.orgsingle-page-application
7
Martin Sotirov

Schema prend en charge les enfants et les parents imbriqués lorsqu'ils sont associés les uns aux autres. Dans ce cas, AboutPage, CollectionPage et ContactPage est entièrement une page Web valide. Toutefois, étant donné que la page AboutPage, CollectionPage et Contact est associée à CreativeWork, de nombreux enfants ne sont pas pris en charge, ce qui signifie que vous devez utiliser leurs parents au sein de l’appareil, ce qui augmente la quantité de code à utiliser de manière significative.

Par exemple, ContactPage ne prend pas en charge un enfant de telephone ou address et vous devrez utiliser un parent dans ContactPage tel que LocalBusiness. De plus, j'aimerais souligner que n'utilisez simplement pas les balises HTML5, car vous souhaitez que votre site soit à la pointe de la technologie. 90% du temps, vous devriez quand même choisir d'utiliser DIV au-dessus de section, article, aparté, etc. Pour plusieurs raisons et je vous conseille de commander HTML5 Doctor .

Vous trouverez ci-dessous une partie du code avec quelques modifications et des éléments vous permettant de comprendre quels parents vous devez utiliser lorsque vos enfants ne sont pas pris en charge.

<!doctype html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body itemscope itemtype="https://schema.org/WebPage">
    <div itemscope itemtype="https://schema.org/AboutPage">About</div>
    <div itemscope itemtype="https://schema.org/CollectionPage">Collection</div>
    <div itemscope itemtype="https://schema.org/ContactPage">
        <div itemscope itemtype="http://schema.org/LocalBusiness">
            <h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1>
            <span itemprop="description"> A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.</span>
            <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="streetAddress">3102 Highway 98</span>
                <span itemprop="addressLocality">Mexico Beach</span>,
                <span itemprop="addressRegion">FL</span>
            </div>
        Phone: <span itemprop="telephone">850-648-4200</span>
        </div>
        <span itemprop="description">This is an example description.</span>
    </div> 
</body>
</html>

Cliquez ici pour afficher ce code sur le testeur d'outil Rich Snippets de Google , car vous pouvez voir que Google lit les détails de l'adresse séparément et non directement associés à ContactPage. Schema est quasiment encore en développement et les choses sont loin d'être finales et non ajoutées. Ne vous sentez pas obligé d'utiliser Schema pour chaque élément de votre page.

4
Simon Hayter

Cette imbrication n'a aucun effet.

Pour les microdonnées, ces deux documents seraient équivalents:

<div itemscope itemtype="http://schema.org/WebPage">
  <div itemscope itemtype="http://schema.org/WebPage">
  </div>
</div>

<div itemscope itemtype="http://schema.org/WebPage">
</div>

<div itemscope itemtype="http://schema.org/WebPage">
</div>

Peu importe si l’un de ces éléments est l’enfant d’un autre, , sauf si vous utilisez l’attribut itemprop pour associer les éléments.

Un site Web à une seule page est toujours un site Web , à droite (… en supposant que chaque "page" a sa propre URL)? Vous pouvez donc utiliser WebSite et plusieurs éléments WebPage (et sous-types). Pour associer ces éléments à WebSite, vous pouvez utiliser la propriété hasPart .

Par exemple:

<body itemscope itemtype="http://schema.org/WebSite">

  <article itemprop="hasPart" itemscope itemtype="http://schema.org/WebPage"></article>

  <article itemprop="hasPart" itemscope itemtype="http://schema.org/AboutPage"></article>

</body>
1
unor