A couple weeks ago, I started entertaining offers for employment. As part of that effort I spun up my old resume site, dusted off the cobwebs and updated the content. After it was all bright and shiny, I sent the link to my wife over text. She’s not an engineer but she is a fantastic writer. I was disappointed it didn’t generate a cool picture and excerpt as many links do these days. Why not?
I’ll share you the google (or AI conversation depending on your preferences), but I found the mechanism to create that content is provided by an “open graph protocol”. Really this “protocol” (by Meta™) is nothing more than adding a couple of lines to the website’s HTML. (There is also a competing protocol/standard used by Twitter/X). They’re both pretty easy to add.
After adding a couple of fields to my website, behold:
If you’re interested in adding support for your own site, that’s not what this post is about 😆.
I believe this is a great way to link content. It not only shows what to expect from a link–a quick title and description–it also adds a large click target. When I went to create my post, I was disappointed I couldn’t find a plugin supporting this card data on WordPress sites. (It’s probably already there, but I figured it would be fun to roll my own rather than use someone else’s).
After a quick coding sesh, I threw together an early version. Now with the Link Preview Card plugin (wordpress.org), you too can add these cards to your posts and pages.
Result
I’m fond of the slight zoom when you hover over it.
Features:
- Enter a link.
- Caches site data (via an API call).
- Displays open graph card (with slight zoom on hover)
For a general proof of concept this is definitely workable. I thought it was fun to play with. I used AI to evaluate better testing approaches to plugin development (still haven’t found a great method for doing this). I have a list of TODO’s that are still low hanging fruit, but would love any thoughts for new features.
If you have a site, give it a spin and kick the tires. Let me know how it goes.