Social images autogeneration
Aka Open Graph ↗ images and X/Twitter Card ↗ images.
Options
Section titled “Options”The basic idea is to create an HTML or SVG “image” for a page based on metadata, such as title, description, tags, etc. Then, convert it to a raster image. There are several options:
- Satori ↗
- CanvasKit - Skia ↗
- resvg-js ↗
- Headless browsers
- Example in astro-theme-cactus ↗
- Example in astro-paper ↗
CanvasKit
Section titled “CanvasKit”Installation
Section titled “Installation”Full instructions for Astro OG Canvas ↗
Related
Section titled “Related”Further Improvements
Section titled “Further Improvements”The current implementation looks boring. Maybe I can:
- Generate a gradient based on tag colors
- Use “cover” images from some pages in social images, although all of them are SVGs
- It seems that
Astro OG Canvasdoesn’t support emojis - Add a logo