WebPage – XooCode

The following is an advanced example of markup for WebPage following schema.org/WebPage context. Use it to understand how you can explicitly structure relevant data about any WebPage. This markup should be included for any and all websites. As it can literally be applied to all webpages, this schema markup should be the cornerstone and foundation of all your markup work.

There is no explicit need to mark up the “url” attribute of the webpage, as it is assumed that the markup is about the current webpage that it is hosted on. If you for any specific reason see an advantage in marking up a webpage elsewhere than where it is actually hosted, noone will stop. It is possible to this with the standard “url” property. We have yet to find such a situation usefull and thertefor the “url” attribute is not included in this example.

This example is built with the premise that the markup is hosted on this current webpage url “https://xoocode.com/json-ld-code-examples/webpage/”.

The example, as all examples on XooCode uses the json+ld data language, as per google and schema.org recommendations. At XooCode we recommend to always and exclusively utilize json+ld for all markup, due to its readability and clear styling.

Full example of schema.org/WebPage json-ld markup

The markup is verified as valid with Structured Data Testing Tool from Google as of 2024-04-12.

Quick JSON FAQ

What is JSON?

JSON is a notation syntax for storing and exchanging data.

What is JSON-LD?

JSON-LD is a notation syntax based on JSON. It extends JSON to help the syntax operate accross seperate resources (read: webpages). Using globally unique identifiers marked with “@id”, JSON-LD can begin data markup on one host and continue on another.

What is JSON short for?

The abbreviation JSON is short for JavaScript Object Notation.

What is the LD in JSON-LD short for?

The letters LD in the abbreviation JSON-LD are short for Linked Data and refers to the way this specific flavor of JSON syntax is specified to be able to link accross code hosts. Simply put: LD extends JSON by adding functionality that allows JSON code to span across multiple webpages.

Why is it called JavaScript Object Notation?

It is called JavaScript Object Notation because JSON is very simply put a text which is written in standardised JavaScript object notation. So it is text marked up in a way which is already standardised in the notation for the JavaScript object language.

XooCode Color Map

Standard HTML/Text.

{

JSON Object enclosure.

[

JSON Array enclosure.

JSON Attribute.

JSON Declaring Colon

JSON String.

JSON Line Separator.


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@id": "https://xoocode.com/json-ld-code-examples/webpage#webpage",
  "@type": "WebPage",
  "name": "WebPage JSON-LD Example",
  "alternativeHeadline": "Use this advanced example of markup for WebPages following schema.org/WebPage context.",
  "breadcrumb": "Code Examples > JSON+LD",
  "mainEntity": {
    "@type": "Code",
    "name": "Example Markup of WebPage Entity",
    "about": "Schema.org",
    "learningResourceType": "Example",
    "educationalUse": "Example",
    "potentialAction": "Learning",
    "version": "1.0.0",
    "author": {
      "@type": "Organization",
      "@id": "https://xoocode.com",
      "name": "Xoo Code Inc."
    },
    "dateCreated": "2017-09-29",
    "editor": "Jane Xoo",
    "contributor": [
      "Dana Laurel",
      "John Cook"
    ],
    "sameAs": "http://schema.org/WebPage",
    "discussionUrl": "https://xoocode.com/json-ld-code-examples/webpage#forum",
    "keywords": "json, webpage, schema, schema.org, markup, structured data",
    "text": "https://xoocode.com/json-ld-code-examples/webpage#webpage"
  },
  "description": "A page which provides an example how you can mark up webpages with structured data",
  "primaryImageOfPage": "https://xoocode.com/images/fictionalImageForWebPageMarkup.jpg",
  "relatedLink": [
    "https://xoocode.com/json-ld-code-examples/event",
    "https://xoocode.com/json-ld-code-examples/organization",
    "https://xoocode.com/json-ld-code-examples/person",
    "https://xoocode.com/json-ld-code-examples/localbusiness"
  ],
  "specialty": "Markup",
  "significantLink": "http://schema.org/WebPage",
  "publisher": {
    "@id": "https://xoocode.com"
  },
  "license": "http://creativecommons.org/licenses/by-nc-sa/3.0/us/deed.en_US",
  "copyrightYear": "2017",
  "copyrightHolder": {
    "@id": "https://xoocode.com"
  },
  "datePublished": "2017-09-27",
  "lastReviewed": "2017-09-29",
  "reviewedBy": {
    "@id": "https://xoocode.com"
  },
  "locationCreated": {
    "@type": "Place",
    "name": "Xoo Code Offices Dunmore",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Dunmore", 
      "postalCode": "T1B 0K2",
      "streetAddress": "355 Eagle Butte Ave"
    }
  },
  "dateModified": "2017-09-29",
  "educationalUse": "Example"
}
</script>

One Comment

Leave a Reply Cancel reply