NuxtSEO
OG Image v6 is in beta! Try the v6 docs .
Getting Started

Nuxt OG Image

Last updated by Harlan Wilton in feat!: rename chromium renderer to browser, add cloudflare support (#461) * feat!: rename chromium renderer to browser, add cloudflare support BREAKING CHANGES: - Renamed `chromium` renderer to `browser` - Component suffix `.chromium.vue` → `.browser.vue` - Config `chromium: 'playwright'` → `browser: { provider: 'playwright' }` - Internal: `useChromiumRenderer()` → `useBrowserRenderer()` New features: - Cloudflare Browser Rendering support via `@cloudflare/puppeteer` - New config: `browser: { provider: 'cloudflare', binding: 'BROWSER' }` - Auto-fallback for cloudflare provider: chrome-launcher (dev), playwright (prerender), cloudflare (runtime) - Playwright/Puppeteer API compatibility layer in screenshot.ts * docs: add chromium→browser migration and cloudflare support docs - Add chromium→browser rename section to v6 migration guide - Document cloudflare browser rendering setup in browser renderer docs - Add configuration examples for cloudflare provider * fix: resolve type errors for browser renderer refactor - Update ProviderName type: 'chromium' → 'browser' in dependencies.ts - Add BrowserConfig import and browser property to ModuleOptions - Update createBrowser type declaration to accept optional H3Event - Fix cloudflare binding to use lazy-loaded puppeteer with local types - Fix colorPreference comparison (remove impossible 'no-preference' check) - Update defineOgImageScreenshot renderer to 'browser' - Update client/pages/index.vue chromium → browser in templates * chore: remove working files that should not be committed.

Why use Nuxt OG Image?

When you share a link of your site on social media or some chat platforms, the link will be unfurled, displaying a title, description, and an image. All of these are powered by the Open Graph Protocol.

New to Open Graph? Check out the Mastering Open Graph Tags guide to learn more.

Nuxt OG Image allows you to generate these images at runtime or when prerendering, using simple Vue templates.

For example, the OG image for the current page is:

While it may not help with your organic traffic, it can significantly improve the click-through rate of your pages when shared.

While it's simple to create your own OG images, it can be time-consuming to keep them up-to-date with your site's content and easy to misconfigure the meta tags for each platform.

Ready to get started? Check out the installation guide.

Features

  • ✨ Create an og:image using the built-in templates or make your own with Vue components
  • 🎨 Design and test your og:image in the Nuxt DevTools OG Image Playground with full HMR
  • ▲ Render using Satori: Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families supported and more!
  • 🤖 Or prerender using the Browser: Supporting painless, complex templates
  • 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
  • ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers
Edit this page
Markdown For LLMs
Did this page help you?

Installation

Get started with Nuxt OG Image by installing the dependency to your project.