WebPageElement

WebPageElement is a CreativeWork subtype for a component of a web page. It adds 2 direct properties:

cssSelector (CssSelectorType): a CSS selector pointing to the element.
xpath (XPathType): an XPath pointing to the element.

It is the parent of SiteNavigationElement, Table, WPHeader, WPFooter, WPSideBar, WPAdBlock.

Prefer the specific subtype where it applies. Attach to WebPage via mainContentOfPage, primaryImageOfPage, or directly as a child of hasPart.

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

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

Highlight legend:Required by GoogleRecommendedOptional

schema.org/WebPageElement

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPageElement",
  "name": "You may also like",
  "cssSelector": "#related-products",
  "xpath": "/html/body/main/section[4]"
}
</script>

Minimal valid version

The smallest markup that still produces a valid WebPageElement 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/WebPageElement (minimal)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPageElement",
  "cssSelector": "#related-products"
}
</script>

Google rich results this unlocks

Markup matching this example makes your page eligible for the following Google Search rich results. The primary target drives the required / recommended property classification in the advanced code block above.

No dedicated rich result (accessibility / speakable surfaces)
Google docs

Common WebPageElement 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.

01
Generic WebPageElement when a subtype applies
Wrong
```
WebPageElement on a page's footer
```
Right
```
WPFooter for the footer; similarly for header / sidebar
```
Subtype classification adds meaning consumers use.

Schema properties in this example

WebPageElement CreativeWork name cssSelector xpath WebPage mainContentOfPage SiteNavigationElement Table WPHeader WPFooter WPSideBar WPAdBlock

About the example data

A generic WebPageElement marking the product-recommendations strip on a Xoo Code product page.

Comments

Loading comments...