web-dev-qa-db-ja.com

単一ページサイトのSchema.org WebPage構造

私は、クライアント用にWordPressで単一ページのポートフォリオサイトを構築しています。これは、従来、ポートフォリオ、連絡先などの個別のページであるセクションに分割されています。

次のマークアップのように、1つのグローバルWebPage内に複数のschema.org WebPageをネストできますか？

<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

スキーマは、ネストされた子と親が相互に関連付けられている場合にサポートします。この場合、AboutPage、CollectionPage、およびContactPageはすべて有効なWebPageの子です。ただし、AboutPage、CollectionPage、およびContactページはCreativeWorkとペアになっているため、多くの子はサポートされていません。つまり、親を内部で使用する必要があるため、使用するコードの量を大幅に増やす必要があります。

たとえば、ContactPageはtelephoneまたはaddressの子をサポートしていないため、LocalBusinessなどのContactPage内で親を使用する必要があります。また、サイトにEdgeを追加したいので、HTML5タグを使用しないでください。時間の90％は、セクション、記事、脇などでDIVを使用することを選択する必要があります。いくつかの理由と HTML5 Doctorをチェックアウトすることをお勧めします 。

以下に、いくつかの変更を加えたコードの一部と、子をサポートしていない場合に使用する必要がある親を理解できるようにする要素を示します。

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

Googleのリッチスニペットツールテスターでこのコードを表示するにはここをクリック 、GoogleがContactPageに直接関連付けられていないアドレスの詳細を個別に読み取ることがわかります。スキーマはまだ開発段階にあり、最終的なものにはほど遠いため追加されていません。ページ上のすべての要素にスキーマを使用する必要があると思わないでください。

4
Simon Hayter

このネストは効果がありません。

Microdataの場合、これら2つのドキュメントは同等です。

<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>

これらの要素の1つが別の要素の子であるかどうかは関係ありません。unlessitemprop属性を使用してアイテムを関連付けます。

単一ページのWebサイトは、まだwebsiteである（…各「ページ」に独自のURLがあると仮定して）？したがって、 WebSite およびいくつかのWebPage（およびサブタイプ）アイテムを使用できます。これらの項目をWebSiteに関連付けるには、 hasPart プロパティを使用できます。

例えば：

<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