How are structured properties assigned to the correct Open Graph image?

Definition: An Open Graph image root is an og:image property. A structured property extends that root, for example og:image:width or og:image:height; the protocol assigns each structured property to the root that immediately precedes it in document order.

Key facts

• The Open Graph protocol defines og:image as an image URL that represents the object in the graph. Its example places the property in the HTML head.
• The protocol calls fields such as og:image:type, og:image:width, og:image:height and og:image:alt structured properties attached to og:image.
• Structured properties follow their root tag. When another root is parsed, the current group ends and a new group begins, according to the protocol's array rules.
• If a property accepts multiple values, the first tag from top to bottom receives preference during conflicts, as the same specification explains.
• The protocol's worked example contains three images: the first is 300x300, the middle has unspecified dimensions and the last is 1000 pixels tall.

How does the grouping rule work?

Read the metadata in source order. When a parser reaches an og:image, it starts an image record. The following og:image:* properties belong to that record until another og:image appears. That later root closes the preceding group and starts the next one. This is the rule stated in the Open Graph protocol's array section.

The specification illustrates the rule with this markup:

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

The first image receives both dimensions. The second image receives no dimensions in this example. The third receives the height value because its root is the last og:image before that structured property.

Which fields can be grouped with an image?

The Open Graph protocol describes structured properties as metadata expressed with property and content, where the property name contains an extra colon. For og:image, the documented fields are og:image:url, og:image:secure_url, og:image:type, og:image:width, og:image:height and og:image:alt in the structured properties section.

The specification defines og:image:url as identical to og:image. It describes og:image:secure_url as an alternate URL for a page that requires HTTPS, og:image:type as the image MIME type, og:image:width as the number of pixels wide and og:image:height as the number of pixels high. It defines og:image:alt as a description of what is in the image and recommends specifying it when the page specifies og:image.

What does the HTML property attribute contribute?

Open Graph uses RDFa-style HTML metadata. The W3C's RDFa Core 1.1 Recommendation says that, in HTML, authors can use meta and link elements for metadata and relationships concerning the current document. It defines the property attribute as expressing a relationship between a subject and a resource object or literal text.

The same Recommendation, published 17 March 2015, says that processing begins with the document object and that all elements in the tree are processed depth-first. The Open Graph page supplies the application-specific grouping rule: og:image is the root and the colon-qualified properties are its structured metadata. Together, these sources explain why the order of the elements in the HTML matters for this grouping.

How should you check a page?

Inspect the HTML that contains the Open Graph metadata and make a sequence of the og:image roots. For each root, collect the following og:image:* properties until the next root. Compare the resulting groups with the image URLs, dimensions, MIME types and alternate URLs declared in the markup. The W3C processing model's depth-first traversal makes the element sequence part of the input being processed.

A property placed after a later og:image belongs to that later root. If one tag can have multiple values, the Open Graph specification gives the first tag from top to bottom preference when values conflict.

Related terms

• Structured data
• RDFa
• JSON-LD

FAQ

What happens when dimensions follow a later image root?

The dimensions belong to the later og:image. The protocol treats the earlier structured-property group as complete when it parses another root element.

Can all image roots come before all image dimensions?

The protocol specifies that structured properties follow the root tag they describe. Put each image's dimensions and other og:image:* fields after that image's og:image root and before the next root.

Does og:image:url start another image group?

No. The protocol lists og:image:url as a structured property and defines it as identical to og:image. A new group starts when another og:image root is parsed.

Sources

1. Open Graph protocol, "The Open Graph protocol", undated
2. W3C, "RDFa Core 1.1 - Third Edition", 17 March 2015

---

Check how a page reads to answer engines. Open the GEO score analyzer