Social images autogenration

aka open graph ↗ images, x/twitter card ↗ images

Options

Basic idea is to create HTML or SVG “image” for page based on metadata, like title, description, tags etc. And then convert it to 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 instruction for Astro OG Canvas ↗

Related

• SEO and SMO meta tags
• https://metatags.io/ ↗

Further improvements

Current implementation looks boring. Maybe I can:

• generate gradient based on tag colors
• Some pages have “cover” images. Can I use it in social images? Though in my case all of them are SVGs
• It seems, Astro OG Canvas doesn’t support emojis
• add logo