XooCode(){

WebPage

WebPage is the structural type for the page itself, as opposed to the thing the page is about. It answers "what is this URL?" rather than "what is this URL describing?" It follows the schema.org/WebPage vocabulary.

Unlike most other schema types, WebPage has no dedicated Google rich result. Its value is as a backbone that other types branch off via mainEntity. A product listing page is a WebPage whose mainEntity is a Product. A recipe page is a WebPage whose mainEntity is a Recipe. The rich result comes from the main entity; WebPage is the container.

This example uses WebPage as a page about a markup example, so its mainEntity is a Code entity. That's rarer than the Product or Article pattern but it shows how the container relationship works regardless of what the page is about. Include WebPage on every page you care about, even when you already have a primary type marked up.

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

The markup is verified as valid with Rich Results Test from Google.

schema.org/WebPage
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@id": "https://xoocode.com/json-ld-code-examples/webpage#webpage",
  "@type": "WebPage",
  "name": "WebPage JSON-LD Example",
  "url": "https://xoocode.com/json-ld-code-examples/webpage",
  "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>

Minimal valid version

The smallest markup that still produces a valid WebPage entity. Use it as the floor. Reach for the advanced example above when you want search engines and AI agents to understand more about your content.

schema.org/WebPage (minimal)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@id": "https://xoocode.com/json-ld-code-examples/webpage#webpage",
  "@type": "WebPage",
  "name": "WebPage JSON-LD Example",
  "description": "A page which provides an example how you can mark up webpages with structured data",
  "url": "https://xoocode.com/json-ld-code-examples/webpage"
}
</script>

Google rich results this unlocks

WebPage is a structural type. It does not produce a rich result on its own.

Its value comes from combining it with a primary type whose markup earns a rich result (Article, Product, Event, and so on). WebPage becomes the trunk that the primary type branches off viamainEntityorbreadcrumb. Include it on every page as the backbone of your markup.

Common WebPage mistakes

Mistakes that pass validation but silently fail to earn rich results or mislead consumers walking the graph. Avoid these and your markup will be ahead of most sites in the wild.

  1. 01

    Using WebPage alone and expecting a rich result

    Wrong
    A page with only WebPage markup, nothing else
    Right
    A page with WebPage AND a primary type (Article, Product, Event, etc.). The primary type earns the rich result. WebPage anchors it to the page.

    WebPage is a structural type. It describes the page itself but has no rich result of its own. The value comes from combining it with a primary type whose markup earns a rich result. WebPage becomes the trunk that the primary type branches off via mainEntity or breadcrumb.

  2. 02

    breadcrumb as a free-text string instead of BreadcrumbList

    Wrong
    "breadcrumb": "Code Examples > JSON+LD"
    Right
    "breadcrumb": {
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://xoocode.com" },
    { "@type": "ListItem", "position": 2, "name": "Code Examples", "item": "https://xoocode.com/json-ld-code-examples" }
  ]
}

    A string technically validates but gains nothing. The BreadcrumbList form earns its own rich result (breadcrumb trail in Search) and lets Google understand the site hierarchy. Almost always worth the extra markup.

  3. 03

    Missing publisher @id on a page that already defines Organization

    Wrong
    "publisher": { "@type": "Organization", "name": "XooCode" }
    Right
    "publisher": { "@id": "https://xoocode.com#organization" }

    If the Organization is already marked up elsewhere on the site with a stable @id, reference it instead of redefining. This is how the graph stays consistent and facts flow between pages. It's one of the main reasons to use JSON-LD over other formats.

Schema properties in this example

namedescriptionalternativeHeadlinemainEntityaboutlearningResourceTypeeducationalUsepotentialActionversionauthordateCreatededitorcontributorsameAsdiscussionUrlkeywordstextprimaryImageOfPagespecialtysignificantLinkpublisherlicensecopyrightYearcopyrightHolderdatePublishedlastReviewedreviewedBylocationCreateddateModifiedexpiresaddressurlPostalAddress

Also mentioned in 14 other examples

WebPage also appears in AboutPage, CheckoutPage, CollectionPage, ContactPage, ImageGallery, ItemPage, MedicalWebPage, ProfilePage, and 6 more. See the full WebPage schema page for every reference.

Comments

Loading comments...

Leave a comment