probeo

How to add og:image:alt, og:image:width and og:image:height?

og:og:image:alt page

The issue

A share image with no og:image:alt reaches people using a screen reader as an image with no description. One with no declared width and height can be missing from a Facebook preview the first time the link is shared, because Facebook hasn’t yet measured it. Either way the preview loses something, and the page gives no sign of it.

The cause is a template that sets og:image and stops there. The Open Graph protocol defines the alt text, width and height as separate properties, so each has to be set on its own.

Scope

Each page that declares at least one og: property and has an og:image is checked. Probeo reads the first og:image:alt, og:image:width and og:image:height in the HTML; each needs a non-empty value.

How to check you have it

  • In probeo: the page reports Missing og:image:alt, or Missing og:image:width/height — Facebook may reject image when either dimension is missing. Both are warnings, stored as og:og:image:alt and og:og:image:width.
  • By hand: view the page source and search the <head> for og:image:alt, og:image:width and og:image:height next to og:image.
  • With a tool: Facebook’s Sharing Debugger lists the image properties it read for the URL.

The fix

Declare the image’s alt text, width and height alongside og:image.

The alt text describes what the image shows, not the page; it isn’t a caption. The width and height are the image file’s real pixel dimensions, so they change when the image does.

<meta property="og:image" content="https://example.com/images/annual-report-share.png">
<meta property="og:image:alt" content="A calendar with the annual report due date circled">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Done when: every page with an og:image also declares its alt text, width and height, and the check above comes back clean.

Do not

  • Do not reuse the page title as the alt text.
  • Do not declare dimensions that don’t match the file.
  • Do not set fixed dimensions in a template that serves images of different sizes.

FAQ

Is og:image:alt the same as the alt on an <img>?

It does the same job for a different image: the share image, which may not appear on the page at all. A page can have good alt text throughout and still leave the share image undescribed.

What happens without the width and height?

Facebook’s sharing guidance says the crawler otherwise has to download and process the image before it can show it, so the first share of a link may appear without one. With the dimensions declared, it can show the image straight away.

Does probeo check that the dimensions are correct?

No. It checks that both are present. Compare them with the image file by hand.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.