Social images autogeneration

Aka Open Graph ↗ images and X/Twitter Card ↗ images.

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

Satori

• Example in astro-theme-cactus ↗
• Example in astro-paper ↗

CanvasKit

• Astro OG Canvas ↗

Installation

Full instructions for Astro OG Canvas ↗

Related

• SEO and SMO meta tags
• MetaTags.io ↗

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 Canvas doesn’t support emojis
• Add a logo