JSON-LD: How to Implement WebPage using JSON-LD Example

WebPage uses

• Why Use JSON-LD?

As you see in the quote, you are highly recommended to use WebPage on every page. Except on WebSite of course. By doing that you get the possibilities to add breadcrumbs, WPHEader and all the other WP's. Not to mention TechArticle or other CreativeWork's
Lets see what the WebPage properties are:

Property	Description
breadcrumb	A set of links that can help a user understand and navigate a website hierarchy.
lastReviewed	Date on which the content on this web page was last reviewed for accuracy and/or completeness.
mainContentOfPage	Indicates if this web page element is the main subject of the page.
primaryImageOfPage	Indicates the main image on the page.
relatedLink	A link related to this web page, for example to other related web pages.
reviewedBy	People or organizations that have reviewed the content on this web page for accuracy and/or completeness.
significantLink	One of the more significant URLs on the page. Typically, these are the non-navigation links that are clicked on the most. Supersedes significantLinks.
specialty	One of the domain specialities to which this web page's content applies.

Minimal Code Example

<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "WebPage",
"name": "A name. I use same as title tag",
"url": "http://example.com",
"description": "Description. I just use the same description as meta data"
}</script>

• Why Use JSON-LD?

That is minimal WebPage markup with JSON-LD. This don't really do anything AT ALL, so keep on reading for the more advanced code to see how you can make it useful.

Advanced Code Example

<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "WebPage",
"name": "A name. I use same as title tag",
"url": "http://example.com",
"description": "Description. I just use the same description as meta data",
"breadcrumb":{
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":"1",
"item":{
"@type":"WebSite",
"@id":"http://example.com",
"name":"Home"
}
},
{
"@type":"ListItem",
"position":"2",
"item":{
"@type":"WebPage",
"@id":"http://example.com/thispage",
"name":"Same name from above"
}
}
]},
"mainEntity": {
"@type": "Article",
"@id": "http://example.com/thispage#ArticleID",
"author": "Author Name",
"datePublished": "3 September, 2016",
"dateModified": "3 September, 2016",
"mainEntityOfPage": "http://example.com",
"headline": "Headline. H1 of Article",
"image": {
"@type": "imageObject",
"url": "http://example.com/image.png",
"height": "500",
"width": "300"
},
"publisher": {
"@type": "Organization",
"name": "Your Name",
"logo": {
"@type": "imageObject",
"url": "http://example.com/logo.png"
}
}
}
}</script>

Advanced Code Breakedown

This JSON-LD markup for schema.org is just the way you will want to do it :) It got all the stuff you will want.
You told the search engines you have a Article on a webpage thanks to mainEntity. You also have breadcrumbs making it look nice in the SERPs for even more SEO juice.
Using @id you told what element it starts and ends in. I assume you already have a semantically good page using <article> and <section>. You just use a id on the one containing your CreativeWork. Just like you link to jump to specific parts of your site.
The image is what is going to pop up when people share your page on social media's. I use 3 defferent sizes of the same picture. Based on the media viewed, the most fitting one is picked. You dont need to have this picture on the webpage.

• Why Use JSON-LD?