# OG image generator: a share image for every page, made automatically An OG image generator makes the picture that shows when a link is shared on LinkedIn, X, Slack or WhatsApp — from the page's own title and data, instead of someone exporting one by hand for every post. Shareglint does it over HTTP: pick one of 153 templates or bring your own HTML and CSS, send the title, and put the returned 1200×630 image URL in og:image. ## How it works 1. Pick a design. One of 153 ready-made templates from the gallery, your own HTML and CSS, or layers in the visual editor. Every template renders in 6 sizes. 2. Connect your site. One API call when a post is published, a signed image URL built in your page template, or — with no code at all — one og:image tag that reads each page's title. 3. Share the link. The image is drawn the first time it is asked for and cached; the same title again costs nothing. ## Pick your framework Working code in each framework's own conventions — where the call belongs and the trap that catches people out. - [OG images in Next.js](https://shareglint.com/en/og-image-generator/nextjs): A signed image URL straight from generateMetadata — no request while the page renders. - [OG images in Nuxt](https://shareglint.com/en/og-image-generator/nuxt): useSeoMeta on the server, image fetched inside useAsyncData. - [OG images in Astro](https://shareglint.com/en/og-image-generator/astro): `` in the head, every URL signed during the build. - [OG images in SvelteKit](https://shareglint.com/en/og-image-generator/sveltekit): Fetch the URL in load, print it in svelte:head. - [OG images in WordPress](https://shareglint.com/en/og-image-generator/wordpress): Generate on publish, store the URL in post meta. - [OG images in Laravel](https://shareglint.com/en/og-image-generator/laravel): A trait on the model, a queued job, the URL in the database. - [OG images in Hugo](https://shareglint.com/en/og-image-generator/hugo): One partial in the head: auto-OG, or a URL signed during the build. - [OG images in Ruby on Rails](https://shareglint.com/en/og-image-generator/rails): after_commit hook, Active Job, URL saved on the record. - [OG images in Django](https://shareglint.com/en/og-image-generator/django): post_save signal, transaction.on_commit, URL written back with update(). - [OG images in Jekyll](https://shareglint.com/en/og-image-generator/jekyll): A script before the build writes `image:` into front matter. - [OG images in Ghost](https://shareglint.com/en/og-image-generator/ghost): post.published webhook, image written back through the Admin API. - [OG images in Eleventy](https://shareglint.com/en/og-image-generator/eleventy): An async filter that returns the image URL inside the template. - [OG images in Docusaurus](https://shareglint.com/en/og-image-generator/docusaurus): A plugin that generates images for your documentation pages. ## No code: one tag for the whole site On WordPress, Shopify, Webflow, Ghost, Wix or Framer you can skip the API: allow your domain and paste one og:image tag into the site template. We read each page's title, description and icon and draw the card. Snippets for each platform. https://shareglint.com/en/og-images-without-code ## Try a design before you sign up Paste HTML and CSS into the free HTML-to-image playground and see the PNG Chrome makes from it — no account needed. Or browse the template gallery: every preview there is a real render. https://shareglint.com/en/html-to-image#try ## What it costs Free: 100 images a month, no card, with a small watermark. Starter: $9 a month for 2,000 images. A card you already rendered — same template, same title — comes from cache and uses no quota, so rebuilding your site costs nothing. ## Questions ### What is an OG image generator? A tool that creates the Open Graph image — the picture in a link preview — from a page's own data, such as its title, author and date, so every page gets its own card without anyone designing it by hand. ### How do I generate OG images automatically? Render the image from a template whenever a page is published, or put a signed image URL in the og:image tag so it is drawn on the first request. With Shareglint, both are one HTTP call; the framework pages above show where it goes in 13 frameworks. ### Is there a free OG image generator? Shareglint's Free plan makes 100 images a month with no card, with a small watermark. The playground on the HTML-to-image page renders your own HTML with no account. ### What size should the generated image be? 1200×630 pixels, a 1.91:1 ratio. All built-in templates render at that size by default, and any template renders in each of the 6 size presets (og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720). ### Do I need to write code? No. Auto OG takes one og:image tag in your site template and builds the card from each page's title and description. Code gives you more control: your own fields, sizes and formats. ### Can I use my own design? Yes. Send your own HTML and CSS with {{ field }} placeholders, build it from layers in the visual editor, or copy a built-in template and change it. ## Also useful - [OG image size by platform](https://shareglint.com/en/og-image-size) - [Check a page's OG tags (free)](https://shareglint.com/en/tools/og-checker) - [HTML to image API and playground](https://shareglint.com/en/html-to-image) - [Best OG image APIs, compared](https://shareglint.com/en/best-og-image-api)