Improve social media previews

[lidel]

People share links on social media and forums. Most of places have "oneboxing" logic, which turns link into more rich preview card with title, one line summary, and a thumbnail:

Problem

Right now, when someone shares IPFS dir listing on social media, the card includes title, but instead of summary, we get random text from the page and no image.

Our directory listing pages should include relevant metadata in meta headers, so if someone shares a link to a directory, it looks better, provides educational information that the link is content-addressed + perhaps has an IPFS-themed thumbnail to make share more interesting.

TODO

I beleive we should make it look good in three most popular contexts:

• Open Graph (Facebook) – https://ogp.me
• Twitter Cards - https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

Useful links

• Sample dir listing for testing (Project Apollo Archives): https://bafybeiccfclkdtucu6y4yc5cpr6y3yuinr67svmii46v5cfcrkp47ihehy.ipfs.dweb.link/
• prior art: meta headers at blog.ipfs.io: https://github.com/ipfs/blog/blob/83263930019e794b4fcf809ef19599551d44d43c/layouts/partials/head.html#L25-L42
• Facebook
  • sharing debugger: https://developers.facebook.com/tools/debug/ (sadl yrequires account, which I don't have :( )
  • meta tags docs https://developers.facebook.com/docs/sharing/webmasters/
• http://debug.iframely.com - debug URLs against oEmbed, Twitter Cards, Open Graph and Iframely specs

cc @jessicaschilling (this is the thing I briefly mentioned it the other day)

[jessicaschilling]

I think my Facebook developer account is still active. I'll play around with this.

[jessicaschilling]

For my own reference - here are the ones we implemented in docs: ipfs-inactive/docs#343 (comment)

[jessicaschilling]

This can be closed via #36