Back to Docs

Documentation site generator

Docusaurus OG Image Integration

Add automatic MyOG.social images to Docusaurus docs, blogs, and landing pages with themeConfig metadata and MDX head tags.

Prerequisites

  • A Docusaurus site with access to docusaurus.config
  • A production site URL and baseUrl configured
  • A MyOG.social account with your domain added

How MyOG fits Docusaurus

Docusaurus can set global social image metadata through themeConfig, and individual Markdown or MDX pages can add or override head metadata.

Use a global MyOG image only for a single-site default. For high-value docs and blog pages, add page-specific head metadata so MyOG receives the exact page URL.

Docs sites often have generated routes, versioned docs, and blog pages, so the safest guide explains both global defaults and per-page overrides.

1

Choose a layout

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

2

Add the Docusaurus code

MDX page head

Use this on a high-value doc or blog page with a known final URL.

<head>
  <meta property="og:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fdocs%2Fgetting-started&template=screenshot-right" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fdocs%2Fgetting-started&template=screenshot-right" />
</head>

Replace the encoded example URL with the final deployed docs or blog URL.

Global fallback metadata

Use this only as a site-wide fallback for pages without a better page-specific image.

export default {
  url: "https://example.com",
  baseUrl: "/",
  themeConfig: {
    metadata: [
      { property: "og:image", content: "https://api.myog.social/og?url=https%3A%2F%2Fexample.com&template=screenshot-right" },
      { property: "og:image:width", content: "1200" },
      { property: "og:image:height", content: "630" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:image", content: "https://api.myog.social/og?url=https%3A%2F%2Fexample.com&template=screenshot-right" },
    ],
  },
}
3

Place it correctly

  1. Confirm url and baseUrl in docusaurus.config match production.
  2. Use themeConfig.metadata for a global default only if every page can share the same fallback image.
  3. For important docs or blog posts, add a <head> block in MDX with a page-specific MyOG URL.
  4. Build the site and inspect generated HTML for a doc page and a blog post.

Avoid duplicate og:image tags

Docusaurus can emit default og:image and twitter:image from themeConfig.image. If you add page-level MyOG tags, confirm the page-specific value wins or remove the conflicting default for that page.

Dynamic pages

For versioned docs and blog posts, use the final published URL in the MyOG url parameter. Docusaurus does not need runtime JavaScript for this; static head metadata is enough.

Test the result

  • Run a production build and inspect generated HTML.
  • Check a docs page, a blog post, and the home page separately.
  • Use the deployed URL because baseUrl changes can affect generated metadata.

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

Known limitations

One global MyOG URL is only a fallback, not a full per-page rollout.
Versioned docs need final versioned URLs in their page-specific metadata.
Theme-level image settings can compete with page-level head tags if both remain active.

Sources

Ready to get started?

Sign up for free and add generated social previews to Docusaurus docs.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f