Zach did that thing where each of his blog posts has a special URL with the design of social image card that is screenshat by a headless browser (like Puppeteer) and used as a true meta Open Graph image, meaning it’s displayed on Twitter, Facebook, iMessage, Slack, Discord, and whatever else supports that card look.
I like it. Even though I’ve got a pretty good solution cooking now (for WordPress), the templates aren’t controlled with HTML/CSS like I wish they were.
As bit of yang to the ying here, Jim has some thoughts on the not-so-great aspects of Open Graph images:
I feel like they’ve been hijacked by auto-generated computer imagery serving as attention-grabbing filler more than supportive expression.
Jim Nielsen, “Quibbles With Social Share Imagery”
It’s kinda like… we can add Open Graph images, and we essentially get a totally free massive clickable target for hungry fingers, so we do add Open Graph images — even when that image is, well, boring. Just auto-generated computer barf of title text with branding. Jim’s post has examples.
I get where Jim is coming from, and I suppose I’m guilty to some degree. I feel like we’re a cut-above on CSS-Tricks though, if you’ll pardon a taste of defensiveness, because:
- We have a variety of templates to choose from to switch it up, like a quote design.
- We incorporate custom imagery into the final card, meaning most cards are somewhat visually unique.
- We don’t just brand the cards, we usually incorporate the author for a little extra high five for the person, rather than just our brand.
Screenshat?! I think you mean ‘screenshot’ Chris
I just looked up Screenshat on Urban Dictionary and you’re right – it is a term
LOL, that got me too as I was going over the draft. So funny, and I’m all for it.
It seems to me that the issue is the age-old one: you don;t have content (a good image), but you want to PRETEND that you do.
My LAMP solution for automated sharing cards:
Get the featured image if there is one (“featured” images are good one sites for in-site search results, banners, etc)
Or else get the first image if there is one (this assumes that your site has interesting images)
Or else choose randomly from a per-selected bunch of generic images that rep your site: Logos, subject photo/illustrations, etc.
Yep. Doing something similar in WordPress to generate entirely redundant (!) featured, and thus Open Graph, images. I mean, at least I use them for “post thumbnails” as well, I guess? Using only PHP (well, DomPDF and Imagick) to convert actual HTML/CSS to PNG, too, which is nice.