skills.rest
Anglesite
AnglesiteOFFICIAL
Explore all skills by this author →
WebsiteGitHub

og-images

Generate branded Open Graph images for Anglesite pages using Satori.

2|1|Updated May 11, 2026
Search Tags:#branding#image generation#satori#social media sharing#open graph images
One-click install
npx skills add https://github.com/Anglesite/anglesite --skill og-images-anglesite
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: og-images
Source: https://github.com/Anglesite/anglesite/tree/main/agent-skills/og-images
Command: npx skills add https://github.com/Anglesite/anglesite --skill og-images-anglesite

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the generation of branded Open Graph images for social media sharing, ensuring consistent branding across all social platforms.

Core Features & Use Cases

  • Branded Images: Generates social sharing previews with consistent branding elements such as site name, primary colors, and logos.
  • Site-Wide & Per-Page: Provides site-wide default images and individual images for each page.
  • Use Case: Use this Skill to ensure that every page of your website has a professional-looking preview image when shared on social media platforms.

Quick Start

Run npm run ai-og to generate per-page Open Graph images.

Frequently Asked Questions about og-images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Open Graph images for social media sharing automatically?▼

Generate Open Graph images automatically by running `npm run ai-og` within your Anglesite project. This script uses Satori to integrate site configuration and page content, producing branded preview images for consistent social media sharing.

What is Satori used for in Open Graph image generation?▼

Satori is used to convert HTML and CSS into SVG images for Open Graph generation. It enables the npm-based scripts to dynamically render site configuration and page content into branded social sharing previews.

Can I create both site-wide default and per-page Open Graph images?▼

Yes, you can create both site-wide default and per-page Open Graph images. This ensures consistent branding elements like your site name and primary colors across social platforms while providing specific previews for individual pages.

Do I need an Anglesite project to generate branded social sharing previews?▼

Yes, an Anglesite project is required to generate branded social sharing previews with this method. The scripts rely on the Anglesite environment to extract site configuration and page content for rendering optimal social media previews.

How do I ensure consistent branding across social media platforms?▼

Ensure consistent branding across social media platforms by automating Open Graph image generation with Satori. This applies your site name, primary colors, and logos uniformly to every page preview, maintaining a professional appearance when shared.

Related Skills

Explore More Design & Creative Skills→
AnglesiteAnglesite
2

new-page

Generate a new web page with SEO and accessibility structure in Astro and Keystatic.

Official
Intermediate
686f6c61686f6c61
105

meta-tags

Audit page URLs and generate corrected HTML meta tag snippets.

Community
Intermediate
NormVgNormVg

meta-tags-optimizer

Generate optimized HTML meta tags with SEO character validation.

Community
Advanced
richtaborrichtabor
69

og-images

Generate branded Open Graph and Twitter share images with next/og ImageResponse in Next.js routes.

Community
Advanced