Add toggle flags documentation and update changelog for OG image redesign

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

Author: devin-ai-integration[bot]

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

@@ -2,15 +2,26 @@
 tags: ["seo", "configuration", "docs.yml"]
 ---
 
-## Dynamic OG image color overrides <Availability type="beta" /> [#og-color-overrides]
+## Redesigned dynamic OG images <Availability type="beta" /> [#og-image-redesign]
 
-Control the text and background colors of dynamically generated OG images. Set `og:dynamic:text-color` and `og:dynamic: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.
+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 description** extracted from frontmatter, clamped to two lines
+- **Page URL** displayed below the description
+- **Dark mode default** with a subtle accent gradient overlay
+- **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:show-logo: true
+  og:dynamic:show-section: true
+  og:dynamic:show-description: true
+  og:dynamic:show-url: true
+  og:dynamic:show-gradient: true
 ```
 
 <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

@@ -116,6 +116,11 @@ metadata:
   og:background-image: ./images/og-background.png # optional
   og:dynamic:text-color: "#1a1a1a" # optional
   og:dynamic:background-color: "#ffffff" # optional
+  og:dynamic:show-logo: true # optional
+  og:dynamic:show-section: true # optional
+  og:dynamic:show-description: true # optional
+  og:dynamic:show-url: true # optional
+  og:dynamic:show-gradient: true # optional
 ```
 
 <ParamField path="metadata.og:dynamic" type="boolean" required={false} default={false} toc={true}>
@@ -134,6 +139,26 @@ 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: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>
+
+<ParamField path="metadata.og:dynamic:show-section" type="boolean" required={false} default={true} toc={true}>
+  Toggle visibility of the section title in dynamically generated OG images. The section title is derived from the page's navigation breadcrumb. Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-description" type="boolean" required={false} default={true} toc={true}>
+  Toggle visibility of the page description in dynamically generated OG images. The description is extracted from the page's frontmatter (`description`, `subtitle`, or `excerpt`). Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-url" type="boolean" required={false} default={true} toc={true}>
+  Toggle visibility of the page URL in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-gradient" type="boolean" required={false} default={true} toc={true}>
+  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>
+
 ### Twitter / X
 
 Controls how your docs appear in Twitter Card previews when shared on X.

fern/snippets/seo-metadata-site.mdx

@@ -19,6 +19,11 @@ metadata:
   og:background-image: "https://developer.squareup.com/images/og-background.png"
   og:dynamic:text-color: "#1a1a1a"
   og:dynamic:background-color: "#ffffff"
+  og:dynamic:show-logo: true
+  og:dynamic:show-section: true
+  og:dynamic:show-description: true
+  og:dynamic:show-url: true
+  og:dynamic:show-gradient: true
 
   # Twitter/X
   twitter:title: "Square Developer Platform Documentation"
@@ -105,6 +110,26 @@ metadata:
   Override the background color for dynamically generated OG images. Accepts any valid CSS color value.
 </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>
+
+<ParamField path="metadata.og:dynamic:show-section" type="boolean" required={false}>
+  Toggle visibility of the section title in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-description" type="boolean" required={false}>
+  Toggle visibility of the page description in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-url" type="boolean" required={false}>
+  Toggle visibility of the page URL in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
+</ParamField>
+
+<ParamField path="metadata.og:dynamic:show-gradient" type="boolean" required={false}>
+  Toggle visibility of the accent gradient overlay in dynamically generated OG images. Defaults to `true` when `og:dynamic` is enabled.
+</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.