Proper Link Previews

[camball]

Motivation

Currently, link previews for the blog look like the following in Obsidian:

The first is for the home page, then the second is for the article "Canon Software Engineer Events". The first is acceptable. The second sucks and absolutely must be fixed. It doesn't even include the blog article title. In iMessage, it also doesn't include the article title:

How?

• Open Graph Protocol Specification
• Blog article on creating link previews
• How Slack creates link previews
• Open Graph Generator – Article
• Twitter/X
  • Card Meta Tags
  • Test with Card Validator

[camball]

Fixed the iMessage one completely—it looks great:

Obsidian one is better, but leaves much to be desired:

For now, this is complete; I'm happy with the results.

UPDATE: with 0815d28, now displays description instead of copywrite notice in Obsidian, lol (using the Link Embed plugin).

[camball]

Passes validation in the Twitter Card Validator:

INFO:  Page fetched successfully
INFO:  16 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

[camball]

Update: it's not working for Slack, which is ironic because I followed Slack's engineering blog to implement it. Doesn't generate any sort of preview. Need to fix this ASAP.

[camball]

Update: only partially works for Twitter. Gets title and generates a preview, but missing the image:

[camball]

Update: with 0815d28, link previews work on Slack. I did have a hunch the reason links wouldn't display in a pretty manner was because of the missing description, and it turns out that was correct after testing.

It's still missing the favicon though, although I didn't even know I had to do a special notation for the favicons, so I'll need to investigate. Medium articles have everything set for a proper unfurl, so use any good Medium article as a reference when fixing.

Twitter is still broken after 0815d28; neither an image nor the new descriptions come up.