Coming out of artistic burnout, I’ve found myself enjoying sketching a lot more. Specifically, digital canvases that are a big collection of loosely connected sketches. My website is a great home for these, cause… I designed and coded my website to be a great home for anything I make.
Social media, however… well, it’s where I have a “bigger following” whatever that means, but I feel like this art would feel so alien among the high-speed perfection, self-branding, and self-promo-ing of my social media feeds…
…I’d like to better attract the attention of social-scrollers when I have new media on my website to share with them. And thus, OpenGraph social cards and preview images.
I’m currently using 11ty to put site posts and media into templates. But… unlike… the cooler, smarter, 11ty users that all have server-side Netlify implementations… I kinda just, run 11ty on my desktop computer, building and pushing updates locally.
Through Google I’m seeing automated OpenGraph solutions (ie: grabbing an image and title from the final page’s data and creating a preview image based off of those) for people whose like, 11ty sites build themselves in a server in a cloud, but, are there any automated OpenGraph solutions for static-static, build-and-push, build-and-push people like me?
Do any of you… make OpenGraph cards by hand one at a time? Or maybe have a set of them that you use based on the area of your site a page is from?
I guess I’d like to understand my options for this a bit better.
I have one graphic for every page’s open graph/Twitter Cards data, and frankly the platforms should be on their knees thanking Crom any website operator grants them that much effort.
But that’s not very helpful to you.
Here’s an idea: if 11ty uses templates, what if you used a variable for your image’s URL, height, width, and filename and provided values in each page or post’s YAML frontmatter? You should be able to set a default in the template, too.
Yes, in that my website is fully hand coded. I’m not sure how to make these things fit comfortably within Eleventy, but I’ve picked a few different tags to use and then I test the results with this preview tool. So, for instance, for the Good Web Graveyard I’ve used these meta tags (which is probably overdoing it):
Summary
<title>Good Web Graveyard</title>
<meta name="author" content="Coyote">
<meta property="article:author" content="Coyote">
<meta property="og:site_name" content="Coyote's Link Hub">
<meta property="article:published_time" content="2025-10-01">
<meta name="description" content="For those of us interested in more ethical, user-focused social platforms, it’s worth understanding how these ventures can go wrong. To that end, start here at the Good Web Graveyard: a link compilation on departed websites that had marketed themselves in terms of ethics. Avoiding exploitative business models isn’t itself a guarantee of failure, but plenty of other things are, and by reading up on what’s gone defunct, we can learn to recognize the warning signs.">
<meta property="og:description" content="For those of us interested in more ethical, user-focused social platforms, it’s worth understanding how these ventures can go wrong. To that end, start here at the Good Web Graveyard: a link compilation on departed websites that had marketed themselves in terms of ethics. Avoiding exploitative business models isn’t itself a guarantee of failure, but plenty of other things are, and by reading up on what’s gone defunct, we can learn to recognize the warning signs.">
<meta property="og:title" content="Good Web Graveyard">
<meta property="og:image" content="/images/WebGraveyard.png">
<meta name="twitter:image" content="/images/WebGraveyard.png">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="article">
<meta property="article:tag" content="websites, ethics, social media">
<meta name="keywords" content="websites, ethics, social media">
For your purposes, I figure the most important ones would be og:image, twitter:card, and maybe og:title or og:description.
I used to maintain OpenGraph tags on my handcrafted pages, but largely gave up except for the og:site_title property which has no equivalent in standard HTML.
I use Kilian Finger’s eleventy-plugin-og-image plugin for 11ty, and it does exactly what I need it to do: generate OG images for pages/posts across my site based on a single template that pulls in titles, descriptions, etc. into specific places in the output images.
I do wish that the computational power required to actually generate the image files wasn’t as intense as it is, but the plugin does keep track of what images it has already generated (from previous builds), so in reality you’ll probably experience a looooong build time initially, and then future builds will only need to generate new OG images for new pages that you require them for (much lesser an impact).
The documentation is pretty thorough and maybe a bit overwhelming at first, but I recommend giving it a try!
Oh I spent a bit a time on this, as I’m in the same boat! I build my 11ty site locally and push with no server-side generation (for this part of my site, at least). I set a featured image and then have a default social card as a fallback. Here’s a snippet of the code:
Per-post override via frontmatter (featured_image)
Template logic that picks the right image
You don’t need automated generation if you have good defaults!
This is what ends up rendering as a result. For a page with no featured image:
For a post with a featured image:
(as you can see, I also have front matter give unique description/summary text as well)
What I’d Recomend
Create 5-10 generic social cards for different sections/topics
Use YAML frontmatter to specify which one each post uses
Pro: Full control, fast builds
Con: Manual work
Frontmatter for each post:
---
title: "My Post Title"
featured_image: /assets/images/blog/my-post-social.jpg
featured_image_alt: "Description of the image"
---
Here’s a full example of a post. I don’t know if social media scrollers notice when your social cards aren’t uniquely generated per post, I just do it for the love of the game.
