: Schema.org WebPage structure for single page site I am building a single page portfolio site with WordPress for a client which is divided into sections that would traditionally be separate pages
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>
More posts by @Gonzalez347
2 Comments
Sorted by latest first Latest Oldest Best
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>
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.