All in one WebPage and Article
Usually you see websites marked up using snippets they find around the interwebs where they have one for some kind of Article, one for breadcrumbs and sometimes even one for WebPage. That is bad practice!
In this blogpost I will demonstrate how you get an Article, breadcrumbs and a WebPage to be in one nice and neat script, like schema is intended, using JSON-LD.
Best practice
A web page. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page.
schema.org/WebPage
As you see in the quote above, this is the recommended way of marking up your pages.
No need to beat around the bush, here come the code!
The schema code, JSON-LD style
<script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "WebPage",
"@id": "https://jsonld-examples.com/articles/all-in-one-schema-with-json-ld.php",
"name":"All in one Schema using JSON-LD. WebPage and Article",
"breadcrumb":{
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":"1",
"item":{
"@type":"WebSite",
"@id":"https://jsonld-examples.com/",
"name":"JSON-LD Examples"
}
},
{
"@type":"ListItem",
"position":"2",
"item":{
"@type":"WebPage",
"@id":"https://jsonld-examples.com/articles/index.php",
"name":"Articles"
}
},
{
"@type":"ListItem",
"position":"3",
"item":{
"@type":"WebPage",
"@id":"https://jsonld-examples.com/articles/all-in-one-schema-with-json-ld.php",
"name":"All in one Schema using JSON-LD. WebPage and Article"
}
}
]
},
"inLanguage":"en-US",
"mainEntity":{
"@type":"TechArticle",
"@id": "https://jsonld-examples.com/schema.org/code/article-markup.php#main_content",
"mainEntityOfPage": "true",
"datePublished":"August 28, 2016",
"dateModified":"September 10, 2016",
"headline": "All in one WebPage and Article",
"description":"Description, I use the same as meta name",
"keywords":"JSON-LD, schema.org, blog",
"Publisher":{
"@type":"Organization",
"@id": "https://jsonld-examples.com#organization",
"name":"JSON-LD Examples",
"url":"https://jsonld-examples.com"
},
"Author":{
"@type":"person",
"@id": "https://jsonld-examples.com#andrewderssmith",
"name":"Andrew Ders Smith"
},
"image":[
{
"@type":"imageObject",
"url":"https://jsonld-examples.com/images/social/big-all-ine-one-blog.png",
"height":"630",
"width":"1200",
"isFamilyFriendly":"yes"
},
{
"@type":"imageObject",
"url":"https://jsonld-examples.com/images/social/medium-all-ine-one-blog.png",
"height":"220",
"width":"440",
"isFamilyFriendly":"yes"
},
{
"@type":"imageObject",
"url":"http://jsonld-examples.com/images/social/small-all-ine-one-blog.png",
"height":"150",
"width":"150",
"isFamilyFriendly":"yes"
}
]
}
}</script>
What do this JSON-LD code mean?
So you have one WebPage as basis and add your breadcrumbs and language used. The WebPage part is basically done.
The magic of this JSON-LD code and how you fit all in one script is mainEntity.
right use of mainEntity
Indicates the primary entity described in some page or other CreativeWork.
schema.org/mainEntity
This mean your kind of Article go inside mainEntity. Everything related to that entity also go in there, like description, headline and date modified.
There are pitfalls using this method. For instance you don't get errors and warnings the same way as if you had it as a stand alone code. So be sure to test your entity alone before adding WebPage around it.
Using "@id" the right way
You might have noticed how the Publisher and Author is minimal and have "@id" linked to domain.com. This is a nice way of using the LD(Linked-Data) in JSON-LD.
You are supposed to have a single organization and author script in your domain.com marked up as much as you can, and then link to that using id. The benefit of this method is not many, but powerful.
For instance, lets say you add or remove a social media page or even change your name. Having to edit hundreds of pages just to fix that minimal change would be extremely tedious. This way you only have to edit the information one single place!