Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser.
The Eleventy Plugin OG Image is a fantastic tool designed to streamline the creation of Open Graph images within Eleventy projects. Using a combination of HTML and CSS, this plugin eliminates the need for headless browsers, making the process both efficient and uncomplicated. This focus on simplicity allows users to generate visually appealing OG images without getting bogged down in complex setups.
With its emphasis on usability in ESM (ECMAScript Modules) environments, the plugin is tailored for modern web developers looking to integrate dynamic and customizable graphical content seamlessly into their sites. Whether integrated directly into templates or used alongside existing layouts, this plugin opens a world of possibilities for enhancing shared content on social platforms.
Effortless Integration: Easily add OG images by simply calling the ogImage shortcode within your templates, making it quick to implement in any layout.
Dynamic Data Handling: Supports scoped data from parent templates, allowing for a personalized design of your Open Graph images based on the content of each page.
Customizable Templates: Create OG-image-templates using any supported HTML elements and CSS properties, giving you the flexibility to match your brand’s aesthetic.
Built-in Shortcode Options: Offers configuration options through the eleventyPluginOgImage key, allowing for tailored settings like file paths and custom data.
No Headless Browsers Required: This plugin operates without requiring any external rendering tools, streamlining server processes and enhancing speed.
Flexible Output Settings: You can specify output file formats and directories, ensuring that your generated images are organized and optimized for your needs.
Cross-Template Compatibility: Mix and match template languages for both the regular page and OG-image-template, providing the freedom to use the best tools for each task.
Configurable Hash Length: Control the length of the generated filenames with the hashLength property, ensuring your files are easily identifiable while avoiding clashes.
