Document og:dynamic:logo-color and add conflicts/precedence note

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>

Author: devin-ai-integration[bot]

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

@@ -7,16 +7,20 @@ tags: ["seo", "configuration", "docs.yml"]
 Dynamic OG images have a new layout with more content and fine-grained control:
 
 - **Section title** derived from the page's navigation breadcrumb, styled with your accent color
+- **Page title** clamped to two lines with ellipsis
 - **Page description** extracted from frontmatter, clamped to two lines
 - **Page URL** displayed below the description
 - **Dark mode default** with a subtle accent gradient overlay
+- **Logo variant selection** with the new `og:dynamic:logo-color` setting (`dark` or `light`)
+- **Color overrides** for text and background
 - **Toggle flags** to show or hide individual elements (logo, section, description, URL, gradient)
 
 ```yaml docs.yml
 metadata:
   og:dynamic: true
   og:dynamic:text-color: "#1a1a1a"
   og:dynamic:background-color: "#ffffff"
+  og:dynamic:logo-color: dark
   og:dynamic:show-logo: true
   og:dynamic:show-section: true
   og:dynamic:show-description: true

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

@@ -115,6 +115,7 @@ metadata:
   og:background-image: ./images/og-background.png # optional
   og:dynamic:text-color: "#1a1a1a" # optional
   og:dynamic:background-color: "#ffffff" # optional
+  og:dynamic:logo-color: dark # optional, dark | light
   og:dynamic:show-logo: true # optional
   og:dynamic:show-section: true # optional
   og:dynamic:show-description: true # optional
@@ -138,6 +139,10 @@ metadata:
   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>
 
+<ParamField path="metadata.og:dynamic:logo-color" type="enum" required={false} default="dark" toc={true}>
+  Choose which logo variant to render in dynamically generated OG images. Accepts `dark` or `light`, matching the corresponding entry under the top-level [`logo:` setting](/learn/docs/getting-started/global-configuration#logo-configuration) in your `docs.yml`. Defaults to `dark`. If your `docs.yml` only defines one logo variant, that variant is used regardless of this setting.
+</ParamField>
+
 <ParamField path="metadata.og:dynamic:show-logo" type="boolean" required={false} default={true} toc={true}>
   Toggle visibility of the logo in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
 </ParamField>
@@ -158,6 +163,16 @@ metadata:
   Toggle visibility of the accent gradient overlay in dynamically generated OG images. The gradient uses your accent color. Defaults to `true` when `og:dynamic` is enabled.
 </ParamField>
 
+#### Conflicts and precedence
+
+When `og:dynamic: true`, the following interactions apply. `fern check` surfaces warnings for each conflict so you can resolve them locally.
+
+- `og:image` and `twitter:image` only apply to the homepage. Every other page uses the dynamically generated image.
+- `og:dynamic:*` sub-settings and `og:background-image` are only read when `og:dynamic: true`. If dynamic generation is off, they are ignored.
+- `og:dynamic:logo-color` has no effect when `og:dynamic:show-logo: false`.
+- `og:image:width` and `og:image:height` are only used alongside `og:image`. Setting them without `og:image` is a no-op.
+- `og:dynamic:text-color` must differ from `og:dynamic:background-color`, otherwise the text becomes invisible.
+
 ### Twitter / X
 
 Controls how your docs appear in Twitter Card previews when shared on X.

fern/snippets/seo-metadata-site.mdx

@@ -19,6 +19,7 @@ metadata:
   og:background-image: "https://developer.squareup.com/images/og-background.png"
   og:dynamic:text-color: "#1a1a1a"
   og:dynamic:background-color: "#ffffff"
+  og:dynamic:logo-color: dark
   og:dynamic:show-logo: true
   og:dynamic:show-section: true
   og:dynamic:show-description: true
@@ -110,6 +111,10 @@ metadata:
   Override the background color for dynamically generated OG images. Accepts any valid CSS color value.
 </ParamField>
 
+<ParamField path="metadata.og:dynamic:logo-color" type="enum" required={false}>
+  Choose which logo variant (`dark` or `light`) to render in dynamically generated OG images. Defaults to `dark`.
+</ParamField>
+
 <ParamField path="metadata.og:dynamic:show-logo" type="boolean" required={false}>
   Toggle visibility of the logo in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
 </ParamField>