I've seen and used Open Graph properties, such as og:title
, og:description
, and og:image
, because the effects they have are obvious and desired. However, in the official Open Graph document, there are a lot of other properties I've never seen used in practice, such as og:image:width
and og:image:height
. The document explains they're meant for, but how are they actually used? My image loads correctly in the Facebook feed without me specifying its size via those attributes, so why should I bother adding them? If I specify og:video
, where will that video be displayed?
2 Answers
Facebook has the ability to handle the task of identifying the height and width of the images. However, OpenGraph is a protocol that can be used by many other services, which instead of automatically trying to cope with that task, they would expect to explicitly indicate those dimensions. To make sure that all services that support the OpenGraph protocol correctly visualize the specified image, it is necessary to provide the specific dimensions. In practice, fewer webmasters do this because they mainly target popular services such as Facebook and Twitter.
While Facebook can handle identity width/height, Facebook considers it best practice to include width/height tags:
Use
og:image:width
andog:image:height
Open Graph tags to specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
Admittedly, ignoring this advice is unlikely to have a noticeable impact on your site.