Document redesigned dynamic OG images with toggle flags and color overrides

fern/products/docs/pages/changelog/2026-03-17.mdx

@@ -0,0 +1,16 @@
+---
+tags: ["seo", "configuration", "docs.yml"]
+---
+
+## Dynamic OG image color overrides <Availability type="beta" /> [#og-color-overrides]
+
+You can now control the text and background colors of dynamically generated OG images. Set `og:text-color` and `og:background-color` in your `docs.yml` metadata to override the auto-detected theme colors. This is useful when your site has a light background where the default white text is hard to read.
+
+```yaml docs.yml
+metadata:
+  og:dynamic: true
+  og:text-color: "#1a1a1a"
+  og:background-color: "#ffffff"
+```
+
+<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/seo/setting-seo-metadata#dynamic-og-images">Read the docs</Button>

fern/products/docs/pages/seo/metadata.mdx

@@ -114,6 +114,8 @@ You can optionally provide a custom background image (`og:background-image`) for
 metadata:
   og:dynamic: true
   og:background-image: ./images/og-background.png # optional
+  og:text-color: "#1a1a1a" # optional
+  og:background-color: "#ffffff" # optional
 ```
 
 <ParamField path="metadata.og:dynamic" type="boolean" required={false} default={false} toc={true}>
@@ -124,6 +126,14 @@ metadata:
   A custom background image for dynamically generated OG images. Can be a URL or a relative file path. When set, this image is used as the background instead of a solid color.
 </ParamField>
 
+<ParamField path="metadata.og:text-color" type="string" required={false} toc={true}>
+  Override the text color for dynamically generated OG images. Accepts any valid CSS color value (e.g., `"#1a1a1a"`). By default, Fern auto-detects the text color from your site's theme. Use this when the auto-detected color doesn't contrast well with your background.
+</ParamField>
+
+<ParamField path="metadata.og:background-color" type="string" required={false} toc={true}>
+  Override the background color for dynamically generated OG images. Accepts any valid CSS color value (e.g., `"#ffffff"`). By default, Fern uses your site's theme background color.
+</ParamField>
+
 ### Twitter / X
 
 Controls how your docs appear in Twitter Card previews when shared on X.

fern/snippets/seo-metadata-site.mdx

@@ -17,6 +17,8 @@ metadata:
   # Dynamic OG images (beta)
   og:dynamic: true
   og:background-image: "https://developer.squareup.com/images/og-background.png"
+  og:text-color: "#1a1a1a"
+  og:background-color: "#ffffff"
 
   # Twitter/X
   twitter:title: "Square Developer Platform Documentation"
@@ -95,6 +97,14 @@ metadata:
   A custom background image for dynamically generated OG images. Can be a URL or a relative file path.
 </ParamField>
 
+<ParamField path="metadata.og:text-color" type="string" required={false}>
+  Override the text color for dynamically generated OG images. Accepts any valid CSS color value. Use this when the auto-detected color doesn't contrast well with your background.
+</ParamField>
+
+<ParamField path="metadata.og:background-color" type="string" required={false}>
+  Override the background color for dynamically generated OG images. Accepts any valid CSS color value.
+</ParamField>
+
 <ParamField path="metadata.canonical-host" type="string" required={false}>
   The host of your documentation website. This will be used to set the canonical URL for metadata tags and documents like the sitemap.