Astro Takumi: Generate Open Graph Images for Your Astro Site

Astro Takumi is a powerful integration for Astro that automates the generation of Open Graph images for your website. This tool simplifies the process of creating rich, embedded link previews that enhance your site's appearance on social media and other platforms.

Key Features:

• Automated Image Generation: Creates Open Graph images for every page on your Astro site.
• TypeScript Based: Built with TypeScript for robust and maintainable code.
• Customizable Images: Offers full customization through React/JSX and Tailwind CSS, or vanilla JavaScript.
• Preset Renderers: Includes several pre-built renderers like backgroundImage, blackAndWhite, brandedLogo, customProperty, gradients, podcast, rauchg, simpleBlog, tailwind, and waveSvg to get started quickly.
• Tailwind CSS Support: Seamlessly integrates with Tailwind CSS using the tw prop for easy styling.
• Multiple Output Formats: Supports PNG, WebP, and JPEG formats, with WebP recommended for better compression.
• Font Integration: Allows you to easily include custom fonts for image rendering.
• Content Collection Support: Works with both static pages and Astro content collections.
• Flexible Page Support: Handles pages written in Markdown, MDX, HTML, and other formats.

Quick Start:

1. Add the integration to your Astro project using the Astro CLI or by installing the package and updating your astro.config.js.
2. Install React if you plan to use JSX for custom image creation.
3. Install and configure desired fonts.
4. Ensure the site property is set in your Astro configuration for absolute URL generation.
5. Update your Astro layout with the necessary Open Graph meta tags (og:title, og:type, og:image, og:description).
6. Build your site and verify the generated image files in the dist folder.

Astro Takumi leverages the underlying Takumi library for rendering React/JSX directly to images, providing a powerful and flexible solution for enhancing your website's social sharing experience.