enhance "open graph" meta property sharing

[garrett]

We already have a bit of this in the Cockpit project website, but it would be nice to enhance it further.

This is useful when people share links on Twitter, Facebook, and other sites. It's also a way to present the website a little more nicely in Firefox recents.

TODO

• Jekyll implementation
• Default image

[garrett]

Some info @ https://css-tricks.com/essential-meta-tags-social-media/ & https://neilpatel.com/blog/open-graph-meta-tags/

[andreasn]

Are there any specific size requirements?

[garrett]

According to CSS Tricks:

Facebook	Twitter
The URL of the image for your object. It should be at least 600x315 pixels, but 1200x630 or larger is preferred (up to 5MB). Stay close to a 1.91:1 aspect ratio to avoid cropping.	A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size.

So, together, ideally:

• 1200x630 (or larger)
• 1.91:1 aspect ratio
• < 1MB
• Unique to the page, not the site (this is the tricky one for us). I suggest the following:
  1. Use an image specified in frontmatter (yaml block at the top)
  2. Otherwise, if the page includes an image, use the first image
  3. Otherwise, fall back to a default Cockpit image

[garrett]

The default Cockpit image could be based on the website's front page. Or we could do something snazzy with the logo. Or just use the logo in those dimensions on a white background in the correct aspect ratio with a little bit of padding.

I'm happy to take on the Jekyll part and can do the third option here for the default image. If you have an idea for something snazzy, I'll happily add that in instead too.

[garrett]

https://flathub.org/apps/details/com.rafaelmardojai.SharePreview looks really useful for this, but it crashes on Cockpit-project.org at the moment.