How are an Open Graph image's dimensions and format declared?

Definition: An Open Graph image's dimensions and format are declared with optional structured properties attached to og:image: og:image:width stores the pixel width, og:image:height stores the pixel height, and og:image:type stores the image's MIME type. Each property is an HTML <meta> element whose property names the field and whose content carries its value, as described by the Open Graph protocol specification.

Key facts

• The Open Graph protocol specification defines og:image:type as a MIME type, og:image:width as the number of pixels wide, and og:image:height as the number of pixels high.
• Structured properties use the same property and content attributes as other metadata, with an extra colon in the property name.
• The specification's full image example uses image/jpeg, width 400, and height 300.
• RFC 9110 defines a media type with a type, a slash, a subtype, and optional parameters, such as type/subtype.

How are the three values written?

The root property is og:image. Its structured properties follow as separate <meta> elements. The property attribute carries the Open Graph name, while content carries the value. The documented example is:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

The width and height values describe pixels. They are properties of the image named by the preceding og:image element. The format value is a MIME type, so image/jpeg identifies the image format in the example. The Open Graph page also shows og:image:alt as a separate property for an image description.

What does og:image:type mean?

The Open Graph specification uses “MIME type” for the value of og:image:type. RFC 9110, published in June 2022, describes media types as defining a data format and processing models. Its grammar is:

media-type = type "/" subtype parameters
type       = token
subtype    = token

The RFC says that the type and subtype tokens are case-insensitive. It also describes the HTTP Content-Type header as the field that indicates the media type of an associated representation. That response header is separate from the Open Graph <meta> property. The Open Graph value communicates the image type in the page metadata, while Content-Type belongs to the HTTP response for the image resource.

How are dimensions attached when a page has several images?

The specification allows multiple og:image values by repeating the same <meta> element. It gives preference to the first tag from top to bottom during conflicts. A structured property belongs to the root image declared immediately before it: the documentation says to put structured properties after the root tag, and parsing another root starts another image.

Its example contains three images. The first is 300x300, the middle has unspecified dimensions, and the last is 1000 pixels tall. A page therefore keeps each image's width, height, and type beside the matching og:image declaration, before the next root image appears.

How can the declaration be checked?

Inspect the page HTML and find each og:image root. Confirm that its og:image:type, og:image:width, and og:image:height elements come after that root and before the next og:image. Check that the width and height values are pixel counts and that the type value follows the media type form described by RFC 9110.

Related terms

• Content-Type
• Semantic HTML
• Image alternative text

FAQ

How do I declare an image's width and height?

Put og:image:width and og:image:height after the matching og:image element. Set each content value to the image's width or height in pixels.

Can I omit these structured properties?

Yes. The Open Graph specification describes the image properties as optional structured properties. An image can therefore have an og:image root without these additional values.

What value belongs in og:image:type?

Use the image's MIME type, such as image/jpeg in the specification's full image example. RFC 9110 describes the media type form as a type and subtype separated by a slash, with optional parameters.

Sources

1. The Open Graph protocol, "The Open Graph protocol", undated
2. IETF, "RFC 9110: HTTP Semantics", June 2022

---

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