Improvements to the Open Graph Protocol impl.

[Malvoz]

Remaining work:

• update og:image image to be at least 200x200 (probably need a new one)
• Add og:url
• Add og:type

---

I ran a check for webhint.io on the facebook-developers sharing debugger which concluded the og:image property is invalid because the image source is relative, but an absolute url is required.

In the OGP specification it is said that the prefix prefix="og: http://ogp.me/ns#" is required, however as can be seen in the image above, all the correct og: properties are recognized in the debugger even without it.

Some other properties that fail the check because they aren't set include:
og:url - Seems "webhint.io" is used, which is fine.
og:type - This defaults to website if not specified, so not an issue.
fb:app_id - Is only really useful if FB analytics~ is used.

The current og:image is 180x180px by the way, and although there are some:

Social Platforms Requirements

(these requirements may be somewhat outdated, I looked these up about a year ago)

Facebook (https://developers.facebook.com/docs/sharing/webmasters#markup + https://developers.facebook.com/docs/sharing/best-practices/):
og:type, og:url, og:title, og:image, og:description
Minimum image dimensions: 200x200

Facebook Messenger (https://developers.facebook.com/docs/messenger-platform/send-messages/template/open-graph/#metadata):
og:title, og:{audio|image}, og:site_name

Twitter (https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started):
og:title, og:url, og:image,og:description
Minimum image dimensions: 300x157

Google+ (https://developers.google.com/+/web/snippet/):
og:title, og:image, og:description

Pinterest (https://developers.pinterest.com/docs/rich-pins/articles/):
og:type:article|blog, og:title, og:description

Yandex (https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml):
og:type, og:url, og:title, og:image, og:description

LinkedIn (https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en):
og:title, og:url, og:image, og:description
Minimum image dimensions: 80x150

---

It doesn't seem that every requirement is actually required, as seen in the screenshot from the facebook debugger. Anyhow, the og:image url should be absolute! :)

Oh and please for the love of a11y, use the og:image:alt property too.

[alrra]

@Malvoz Want to open a PR to fix this? Thanks!

[Malvoz]

I don't have much time at the moment. If someone else would like to open a PR on this, by all means do! :)

[Fmressel]

As of #832 being merged, I believe this issue can be closed! Unless the image dimensions should be updated to match the 200px by 200px minimum size recommendation and/or we want to add the og:image:alt attribute. :)

[molant]

@Fmressel I don't have a Facebook account so I cannot run the tool linked by @Malvoz. Could you please take a screenshot of the results to double check everything is OK before closing this issue?

Thanks! 🙏

[Malvoz]

Here you go @molant

[molant]

Thanks @Malvoz,

looks like we need to:

• update the image to be at least 200x200
• Add og:url
• Add og:type

I don't think we need to add fb:app_id

I'll put this information in the first comment so it's easier to find out what's pending.