Open graph image service that runs on deta.sh
A deta micro that generates a dynamic image that you can embed in your <meta> tag.
Usage
You can simply pass the title and description of your blog post to the micro and it will generate an image for you!
<head>
<title>Hello World</title>
<meta
property="og:image"
content="https://<micro url>/?title=Hello%20World&description=from%20a%20micro%20running%20on%20deta.sh"
/>
</head>Why use this service?
From og-image:
The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter
Deploying to deta.sh
You'll want to fork this repository and deploy your own image generator.
- Click the fork button at the top right of this page
- Clone the forked repo to your local machine
- Customize the html template in public/index.html
- Push your changes
- Use the
Deploy to Detabutton to deploy the micro into your project - (Optional) Put your micro behind cloudflare and configure caching
Customizing the image
You can start the demo server to preview how the image will look like
npm run demoTo customize, change the code in public/index.html. Query params in the URL are directly used to replace placeholders in the html file using ETA.
You'll also want to have a fallback image in case something breaks. Replace the file at public/default.png with your own.
Credits
-
Guide on generative images with SVG by @georgedoescode
-
Examples and other approaches at CSS Tricks
-
A lot of code borrowed from Open Graph Image as a Service
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent