Which Open Graph image takes precedence when several are declared?

The Citead team, updated

In short. The first og:image tag in top-to-bottom order has preference during conflicts, while structured image properties attach to the root tag before them.

Definition: When a page declares several og:image properties, the Open Graph protocol treats them as multiple values and gives the first tag in top-to-bottom document order preference during conflicts.

Key facts

  • The Open Graph protocol specification defines og:image as the image URL that represents the object in the graph.
  • The protocol represents multiple values by repeating the same <meta> tag.
  • The first repeated tag, counted from the top of the page, has preference during conflicts.
  • Structured properties such as og:image:width and og:image:height belong to the root og:image declared immediately before them.
  • The specification's example contains 3 images: the first is 300x300, the middle has unspecified dimensions, and the last is 1000 pixels tall.

What is the precedence rule?

The Open Graph protocol uses repeated tags for properties that can have multiple values. For og:image, the first declaration in the page's top-to-bottom order is the preferred value when declarations conflict. The rule is about the order of the repeated property tags, so placing a preferred image later in the document does not give it precedence.

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

The two tags describe two image values. The first URL is the preferred value under the protocol's conflict rule. The specification calls the collection an array and shows the same repeated-tag form for other properties that accept multiple values.

How do structured image properties attach?

An image can carry structured properties. The protocol lists og:image:url, og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt; it describes og:image:url as identical to og:image and says an og:image:alt description should accompany an og:image declaration.

The structured properties are read after their root tag. When another root og:image appears, the current image's structured properties are complete and the next image starts a new group. In the specification's example, the first image receives width and height values, the second has no dimensions, and the third receives a height value:

<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" />

What does the RDFa basis clarify?

The Open Graph page says its initial version is based on RDFa and places additional meta tags in the document head. The W3C's RDFa Core 1.1 recommendation defines RDFa as attributes for expressing structured data in any markup language. Its processing model creates a set of triples for the structured data in an RDFa document, and another processing method must have the same effect as the described DOM traversal.

That RDFa context explains why repeated declarations can represent multiple values in the underlying data. The Open Graph specification adds the protocol-specific precedence rule: when Open Graph values conflict, the first repeated tag has preference. The W3C recommendation describes RDFa processing and does not provide a service-by-service rule for Open Graph image selection.

How should you check a page?

Read the raw HTML in the head and record every meta element whose property is og:image, in document order. Check the first URL against the intended primary image. Then associate each og:image:width, og:image:height, and og:image:alt with the most recent root og:image, because a new root starts a new structured-property group under the protocol.

FAQ

Does the last og:image replace the first one?

The Open Graph protocol keeps multiple image values. During a conflict, it gives preference to the first og:image tag in top-to-bottom order.

Can I put image dimensions before the image URL?

The protocol places structured properties after their root tag. Put og:image:width, og:image:height, and related properties after the og:image they describe.

What happens when a second root image appears?

The structured properties attached to the previous root are considered complete. The following og:image begins another image group, and later structured properties attach to that new root.

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

Test a page and see what to fix first

The analysis usually takes less than 10 seconds and needs no account.

400,000+ pages scored in the public benchmark