7

I am building a single page portfolio site with WordPress for a client which is divided into sections that would traditionally be separate pages like - about, portfolio, contact.

Can I nest multiple schema.org WebPages within one global WebPage like the following markup:

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

Schema supports nested childs and parents when they are associated with each other, and in this case AboutPage, CollectionPage and ContactPage is all child's of WebPage which is valid. But because AboutPage, CollectionPage and Contact page is paired with CreativeWork your find many childs are not supported meaning you need to use their parents within and therefor increasing the amount of code you need to use significantly.

For example ContactPage does not support a child of telephone or address and you will need use a parent within ContactPage such as LocalBusiness. Also I'd like to point out that simply don't use HTML5 tags because you want your site to be cutting edge. 90% of the time you should still opt to use DIV over section, article, aside and so on. For several reasons and I recommend you checkout HTML5 Doctor.

Below is some of the code with a few changes and with the elements to make you understand what parents you need to use when not having supported childs.

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

Click here to view this code on Google's Rich Snippets Tool Tester, as you can see Google reads address details separately and not directly associated with ContactPage. Schema is pretty much still in development and things are far from final and not added. Don't feel like you have to use Schema for every single element on your page.

  • The Microdata in OP’s example is not nested; the three items AboutPage, CollectionPage and ContactPage have no relation to the WebPage item, as there is no property used to relate them. (The HTML is nested, but that doesn’t matter for parsing Microdata.) – unor Sep 2 '14 at 12:05
  • They actually sub childs of thing and creative work, go to : schema.org/AboutPage it says Thing > CreativeWork > WebPage > AboutPage and Web page type: About page. – Simon Hayter Sep 2 '14 at 12:08
  • Also, I was referring to nesting itemtypes but more so itemprop requires the appropriate parent. – Simon Hayter Sep 2 '14 at 12:11
  • 1
    This is the type hierarchy of the Schema.org vocabulary. It means that when you use AboutPage, this item is also a WebPage and also a CreativeWork and also a Thing. But this doesn’t affect which types you can nest on your page. You only nest via properties, and if a certain property is defined, for example accountablePerson, a Person can be a child of AboutPage. – unor Sep 2 '14 at 12:11
  • This is not a proper placement of schema declarations. Right? – Ron Royston Jun 1 '15 at 1:05
1

This nesting has no effect.

For Microdata, these two documents would be equivalent:

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

It doesn’t matter if one of these elements is the child of another one, unless you are using the itemprop attribute to relate the items.


A single-page website is still a website, right (… assuming that each "page" has its own URL)? So you could go with WebSite and several WebPage (and sub-types) items. To relate these items to the WebSite, you could use the hasPart property.

For example:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.