Add Open Graph Metadata to the index.html

[roblarsen]

@coliff writes:

This had been suggested long ago and decided against, but since then Opengraph metadata is used in many more places. It's used in previews in many messenger apps including Facebook Messenger, Apples Messages app, Slack and more social media services. I think adding Opengraph metadata is always a good idea - unless your site/app is not public at all/behind a Firewall/login etc)

[roblarsen]

@coliff 👇 ?

<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />

Are empty values harmful?

[coliff]

Interesting question! Really, we should do a proper deep dive and research into this and make sure we've got this 100% right before adding. In my quick testing, empty values fallback to standard meta description and title tags in some systems, but not in others. There are so many systems and they work differently... so let's not proceed with this just yet.
Interesting links:

• https://24ways.org/2019/microbrowsers-are-everywhere/
• https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254

[roblarsen]

Context for this as we try to get the release out the door- we ship stuff without required values (title, html lang attribute) all the time, so I'm not against shipping this if there's some negative to someone downstream shipping code without required values for these elements.

[roblarsen]

(Tweeted)

[captn3m0]

How about shipping them commented?

<!---
Please ensure the following before you uncomment:
- that all titles are unique
- the og:type for your document is semantically correct (See ...)
- the URL is canonically correct and is set uniquely
-->
<!---
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
-->

I think og:image might be one where a default (uncommented) value might make sense? A single og-image across a website is a common/okay enough - kinda like favicons?