Please implement the Open Graph protocol for products homepage

[adriens]

❔ Context

Actually, when we share endoflife.date products homepages, their preview on social network is not optimal.

Below some actual previews.

🐦 Twitter preview

🏢 linkedIn preview

🧑‍🤝‍🧑 Facebook preview

💡 Feature request

It would be useful to get a preview thanks to The Open Graph protocol

On each product homepage, provide Open Graph protocol resources showing for example :

• product name
• latest release
• logo
• product short desc
• software url

💰 Benefits

• Make endoflife audience grow
• Make shares cooler
• Get more community contributors as EOL would increase its audience

[hugovk]

There's already some OG metadata, but can be improved. For example https://endoflife.date/opensearch:

<title>OpenSearch | endoflife.date</title>
<meta name="generator" content="Jekyll v4.3.1" />
<meta property="og:title" content="OpenSearch" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://endoflife.date/opensearch" />
<meta property="og:url" content="https://endoflife.date/opensearch" />
<meta property="og:site_name" content="endoflife.date" />
<meta property="og:image" content="https://endoflife.date/logo.png" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://endoflife.date/logo.png" />
<meta property="twitter:title" content="OpenSearch" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","dateModified":"2022-12-11T14:21:35+00:00","headline":"OpenSearch","image":"https://endoflife.date/logo.png","url":"https://endoflife.date/opensearch"}</script>
<!-- End Jekyll SEO tag -->

Facebook has a tool for checking OG metadata: https://developers.facebook.com/tools/debug/

For example: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fendoflife.date%2Fopensearch

[marcwrobel]

Linked to #28 (and incidentally #978).

[captn3m0]

Suggested improvements:

1. Switch to a better og:description for the product layout. This could be product specific.
2. og:image, had a nice idea here on path of favicon.ico is wrong #978. But needs us to take a call for the icon first.
3. Maybe og:title should say {{product}} | endoflife.date instead of just the product name?

Anything else we're missing?

[marcwrobel]

That's a good start I think.

+1 for the og:title.

For the description a generic one with the product name could do the trick. I do not know if this could be configured in the Jekyll config file, but it would be great.

Note: currently all tags are managed/injected by https://jekyll.github.io/jekyll-seo-tag/.

[adriens]

@marcwrobel , thanks for pointing Jekyll SEO Tag : I did not know about it 🙏

[marcwrobel]

endoflife.date already implements Open Graph, even if it's limited. And #28 was already about social media preview. Closing this as duplicate.

[adriens]

👍