Documentation site generator

Docusaurus OG Image Integration

Add automatic per-page MyOG.social images with the Docusaurus 3.10+ plugin or a manual src/theme/Root.tsx recipe.

Prerequisites

Access to docusaurus.config; the plugin requires stable Docusaurus core 3.10 or a later 3.x release and Node.js 20.11.0 or newer
The production url, baseUrl, and trailingSlash set in docusaurus.config
A MyOG.social account with your public domain added and a paid plan or card trial with image credits

How MyOG fits Docusaurus

Install docusaurus-plugin-myog for Docusaurus core 3.10 or later 3.x. The plugin wraps the resolved SiteMetadata component, replaces global image defaults, and keeps existing Root components. Front matter and MDX page images still win.

The manual option below uses src/theme/Root.tsx to read the site URL and current path, then add a MyOG og:image and twitter:image. Use one option. When switching to the plugin, remove the manual MyOG Head block and keep any other Root logic.

Docusaurus pre-renders each route to static HTML, so the tags are in the HTML that social crawlers fetch. Docs, blog posts, tag pages, versioned docs, and the home page all get their own image without a URL per page.

The plugin writes metadata without fetching images during builds or navigation. Social platforms request the image URL when they preview a page; generation and refreshes use your MyOG credits.

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

Add the Docusaurus code

Install plugin (Docusaurus 3.10+)

Run pnpm add docusaurus-plugin-myog@^0.2.0 in your Docusaurus site, then add this plugin entry to your existing docusaurus.config.ts or .js. Keep your other plugins in the same array.

Preview anonymously. Sign in to get complete install code for your account.

Keep global theme image settings and existing Root components. Page images override MyOG. Remove static og:image/twitter:image entries from headTags and any manual MyOG Head block before enabling the plugin.

Manual recipe (src/theme/Root.tsx)

Use this option without the plugin. Create this file, or add the Head block to an existing Root while keeping its other logic.

Preview anonymously. Sign in to get complete install code for your account.

Docusaurus already emits twitter:card summary_large_image. If your site isn't TypeScript, save it as src/theme/Root.js, drop the type import, and change the signature to Root({ children }).

Place it correctly

Check that url, baseUrl, and trailingSlash in docusaurus.config match your deployed URLs.
For the plugin, run the install command and add its config entry. For the manual option, create src/theme/Root.tsx or add its Head block to your existing Root. Keep existing providers and effects.
With the plugin, keep themeConfig.image and themeConfig.metadata; MyOG replaces their image defaults. With the manual recipe, remove those global image defaults so they do not override Root. For either option, remove static image entries from headTags to avoid duplicates.
Run npm run build and check og:image against og:url in the built HTML for a doc, a blog post, a versioned doc, and the home page.

Avoid duplicate og:image tags

The plugin replaces themeConfig.image and themeConfig.metadata image defaults; the manual Root recipe renders before them and needs those defaults removed. Front matter image replaces both MyOG tags. An MDX <head> block replaces only the tags it sets. Static headTags sit outside Helmet and must not duplicate the image tags; the plugin warns about them.

Dynamic pages

The wrapper reads siteConfig.url and the route path, which already includes baseUrl and your trailingSlash form. Versioned docs, blog pagination, and tag pages get their final URL the same way, so you don't keep a list of pages.

Test the result

Run a production build and open the generated HTML, not the dev server.
Compare og:image with og:url for a doc, a blog post, a versioned doc, and the home page. The url parameter should decode to the og:url value.
Check that each page has one og:image and one twitter:image.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

The plugin was checked on Docusaurus 3.10.0 and 3.10.2 with webpack/Rspack, React 18/19 and Node 20/24 in representative combinations. Only en was tested; other themes and i18n paths are unverified, and the hash router is unsupported.

To uninstall, remove the plugin config entry and run pnpm remove docusaurus-plugin-myog, then rebuild. Existing theme image settings apply again. Recheck the manual recipe against your Docusaurus version if you use it instead.

The plugin supports stable Docusaurus core >=3.10.0 <4.0.0 with the classic preset. Docusaurus 4 and prereleases are not supported yet. Docusaurus 3.10.0 itself fails plain webpack builds with webpack 5.106 or newer; use 3.10.1 or later, or Rspack. Its alias remap and metadata order rely on internal contracts. Unsupported versions and unsafe alias states fail with recovery instructions. Competing SiteMetadata remaps are outside tested support; remove the conflict or use the manual recipe.

The image uses the deployed URL, so url, baseUrl, and trailingSlash must match the live site.

An MDX <head> block that sets only og:image keeps the MyOG twitter:image. Set both tags when you override a page by hand.

Sources

Ready to get started?

Add your public domain, then use a paid plan or card trial for generated social previews on your Docusaurus pages.

Already have an account?

d6da63065f957eac3c92e241d07decc62fced9b5