primaryImageOfPage

primaryImageOfPage · Not mentioned by Google

Appears in

• WebPage

What is it?

primaryImageOfPage identifies the main image on a web page. It tells search engines and AI systems which image represents the page's content, separating the hero visual from sidebar graphics, ads, and decorative elements. The value is an ImageObject, not a plain URL.

Why this matters for AEO

When an AI engine summarizes a page in response to a query like "What does [brand] offer?", it needs to select one image to display alongside the answer. primaryImageOfPage removes the guesswork. Without it, AI systems fall back to heuristics (first large image, og:image tag, or nothing). With it, publishers control which visual appears in AI-generated summaries and knowledge panels.

What the specs say

Schema.org: ImageObject. Indicates the main image on the page. schema.org/primaryImageOfPage

Google: Not mentioned. No dedicated Google structured data page exists for WebPage's primaryImageOfPage property.

How to find your value

• Page design — The hero image or featured image at the top of the page
• CMS — The "featured image" or "hero image" field in your CMS
• WordPress — Featured Image in the post/page editor sidebar
• Webflow — The first image in your page layout, or a dedicated CMS image field

Format and code

primaryImageOfPage accepts an ImageObject. The most common pattern uses @id references within a @graph array to link the page node to a separately defined image node.

Reference by @id (recommended)

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://jsonld.com/web-page/",
      "url": "https://jsonld.com/web-page/",
      "name": "JSON-LD Web Page Example Code",
      "primaryImageOfPage": {
        "@id": "https://jsonld.com/web-page/#primaryimage"
      }
    },
    {
      "@type": "ImageObject",
      "@id": "https://jsonld.com/web-page/#primaryimage",
      "url": "https://jsonld.com/wp-content/uploads/2019/10/webpage.png",
      "width": 1200,
      "height": 630
    }
  ]
}

Inline ImageObject

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Product Overview",
  "primaryImageOfPage": {
    "@type": "ImageObject",
    "url": "https://example.com/hero.jpg",
    "width": 1200,
    "height": 630,
    "caption": "Product dashboard overview"
  }
}

Do not pass a plain URL string. The expected type is ImageObject, not URL.

Webflow implementation

Static pages

Add JSON-LD in Page Settings > Custom Code (before </head>). Reference the hero image URL directly in an inline ImageObject:

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "About Us",
  "primaryImageOfPage": {
    "@type": "ImageObject",
    "url": "https://yoursite.com/images/about-hero.jpg"
  }
}

CMS template pages

In Webflow CMS Collection Page settings, embed the CMS image field URL inside the JSON-LD block. Use a CMS image field bound to the hero image, and reference its URL in the primaryImageOfPage object.

In Schema HQ

The primaryImageOfPage field detects the page's primary image from your Webflow page metadata and includes it as a properly formatted ImageObject in the generated WebPage schema. No manual JSON-LD editing required.

Real examples

JSONLD.com uses primaryImageOfPage with an @id reference pattern in their @graph array:

{
  "@type": "WebPage",
  "@id": "https://jsonld.com/web-page/",
  "primaryImageOfPage": {
    "@id": "https://jsonld.com/web-page/#primaryimage"
  }
}

Source: jsonld.com/web-page/

Yoast SEO (WordPress plugin) generates primaryImageOfPage automatically, referencing the post's featured image by @id. If no featured image exists, it falls back to the site logo ImageObject.

Source: developer.yoast.com

Related fields

• image
• thumbnailUrl
• logo
• url

FAQ

Is primaryImageOfPage the same as the og:image tag?

No. og:image is an Open Graph meta tag used by social platforms for link previews. primaryImageOfPage is a schema.org property that sits inside JSON-LD and targets search engines and AI systems. They often point to the same image, but they serve different consumers.

Can I use a plain URL instead of an ImageObject?

Schema.org specifies ImageObject as the expected type. While some validators may not flag a plain URL, using an ImageObject with url, width, and height properties provides richer data and follows the specification correctly.

Do I need primaryImageOfPage if I already have image on my WebPage?

image is a generic property inherited from Thing. primaryImageOfPage is specific to WebPage and signals which image is the hero visual for that page. Using both is valid: image for general images, primaryImageOfPage for the single most representative one.