Open Graph image missing width/height on pages

[uok]

Congratulations on version 4 - great job! :rocket:

Only small bug I noticed is that og:image:width and og:image:height are missing on regular pages with multiple images. Only the first set og:image/og:image:width/og:image:height is there, the other images just have og:image. It works correctly on product pages though.

Also is og:image:alt really necessary? Where is it used when even Facebook does not list it? https://developers.facebook.com/docs/sharing/webmasters/

Twitter has listed twitter:image:alt, so this tag is used somewhere. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html

Thanks!

[sybrew]

Thank you!

Obtaining image dimensions

The width/height dimensions can't be determined when the image URL is taken from the content, or when a URL is filled in manually in our fields. We don't have this information readily available without making complex database queries.

The image-selection feature makes this easy for us by supplying an image ID. This is utilized in the featured-image field, as well as in our image-input areas.

Now, we could try to fetch images without an ID and determine the dimensions, but that's what social networks like Facebook also do for us. That takes me to this philosophy: "If they already do it, why should we? They can parse images asynchronously; they have the resources, server power, and infrastructure. Our users shouldn't be bothered by this."

So, I hope this explains why the image-dimension-tags are used sporadically.

Image alt-tags for social networks

The alt-tag is an accessibility feature: when a user can't see the image, they still know what should be portrayed.

When we have direct access to the image from your database, we can now fetch the alt-tag there. If there's one available, we put it for social networks to use. The social networks can then use that tag when a link is shared. Facebook and Twitter both utilize this feature.

Neither Facebook nor Twitter (nor we... 🤕 ) keep their documentation fully up-to-date. There are too many changes to keep up with, and the writers have to filter through that. In that effort, Facebook decided to remove that part from their documentation. Often, we'll have to resort to testing the tags ourselves. Luckily, https://ogp.me/ displays the technical standard on Open Graph.