diff --git a/fern/products/docs/pages/changelog/2026-03-11.mdx b/fern/products/docs/pages/changelog/2026-03-11.mdx index 19583ca582..28b708baec 100644 --- a/fern/products/docs/pages/changelog/2026-03-11.mdx +++ b/fern/products/docs/pages/changelog/2026-03-11.mdx @@ -6,12 +6,12 @@ tags: ["seo", "configuration", "docs.yml"] Fern can now automatically generate unique Open Graph images for each page of your docs site. Set `og:dynamic` to true in your `docs.yml` metadata to enable it. Pages with an `og:image` set in frontmatter will use the specified image instead. -You can also use `og:background-image` to set a custom background image for your dynamically generated OG image, instead of a solid color. +You can also use `og:dynamic:background-image` to set a custom background image for your dynamically generated OG image, instead of a solid color. ```yaml docs.yml metadata: og:dynamic: true - og:background-image: ./images/og-background.png # optional + og:dynamic:background-image: ./images/og-background.png # optional ``` diff --git a/fern/products/docs/pages/changelog/2026-04-29.mdx b/fern/products/docs/pages/changelog/2026-04-29.mdx index 713d800000..7a2ee45122 100644 --- a/fern/products/docs/pages/changelog/2026-04-29.mdx +++ b/fern/products/docs/pages/changelog/2026-04-29.mdx @@ -9,7 +9,7 @@ Dynamic OG images have a new layout with fine-grained control over the logo vari ```yaml docs.yml metadata: og:dynamic: true - og:background-image: ./images/og-background.png + og:dynamic:background-image: ./images/og-background.png og:dynamic:text-color: "#1a1a1a" og:dynamic:background-color: "#ffffff" og:dynamic:logo-color: dark diff --git a/fern/products/docs/pages/navigation/site-level-settings.mdx b/fern/products/docs/pages/navigation/site-level-settings.mdx index a190dd915a..6d06e4adef 100644 --- a/fern/products/docs/pages/navigation/site-level-settings.mdx +++ b/fern/products/docs/pages/navigation/site-level-settings.mdx @@ -997,7 +997,7 @@ metadata: # Dynamic OG images (beta) og:dynamic: true - og:background-image: "https://developer.squareup.com/images/og-background.png" + og:dynamic:background-image: "https://developer.squareup.com/images/og-background.png" # Twitter/X twitter:title: "Square Developer Platform Documentation" @@ -1072,7 +1072,7 @@ metadata: When `true`, enables dynamic OG image generation for pages that don't have a custom `og:image` set. - + A custom background image for dynamically generated OG images. Can be a URL or a relative file path. Relative paths are resolved from the YAML file where this property is set (e.g., `docs.yml`). diff --git a/fern/products/docs/pages/seo/metadata.mdx b/fern/products/docs/pages/seo/metadata.mdx index 6d858b4368..65588cfc5f 100644 --- a/fern/products/docs/pages/seo/metadata.mdx +++ b/fern/products/docs/pages/seo/metadata.mdx @@ -109,14 +109,14 @@ Set one static image with `og:image` that applies to every page. Use a 1200x630p #### Dynamic [#dynamic-og-images] -Instead of using a single static image for all pages, you can enable dynamic OG image generation. When enabled, Fern automatically generates a unique `og:image` for each page that doesn't have one [set in frontmatter](#open-graph). The `og:dynamic:*` sub-settings and `og:background-image` below are only read when `og:dynamic: true` — they're ignored otherwise. `fern check` surfaces warnings for conflicting settings so you can resolve them locally. +Instead of using a single static image for all pages, you can enable dynamic OG image generation. When enabled, Fern automatically generates a unique `og:image` for each page that doesn't have one [set in frontmatter](#open-graph). The `og:dynamic:*` sub-settings below are only read when `og:dynamic: true` — they're ignored otherwise. `fern check` surfaces warnings for conflicting settings so you can resolve them locally. -You can optionally provide a custom background image (`og:background-image`) for dynamically generated OG images. +You can optionally provide a custom background image (`og:dynamic:background-image`) for dynamically generated OG images. ```yaml docs.yml metadata: og:dynamic: true - og:background-image: ./images/og-background.png + og:dynamic:background-image: ./images/og-background.png og:dynamic:text-color: "#1a1a1a" og:dynamic:background-color: "#ffffff" og:dynamic:logo-color: dark @@ -131,7 +131,7 @@ metadata: When `true`, enables dynamic OG image generation for pages that don't have a custom `og:image` set. Any site-wide `og:image` and `twitter:image` still apply to the homepage; every other page uses the dynamically generated image. - + A custom background image for dynamically generated OG images. Can be a URL or a relative file path. Relative paths are resolved from the YAML file where this property is set (e.g., `docs.yml`). When set, this image is used as the background instead of a solid color. No default; the dynamic OG image renders without a background image when unset. diff --git a/fern/snippets/seo-metadata-site.mdx b/fern/snippets/seo-metadata-site.mdx index 519ad09112..6ee33c0287 100644 --- a/fern/snippets/seo-metadata-site.mdx +++ b/fern/snippets/seo-metadata-site.mdx @@ -16,7 +16,7 @@ metadata: # Dynamic OG images (beta) og:dynamic: true - og:background-image: "https://developer.squareup.com/images/og-background.png" + og:dynamic: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 @@ -99,7 +99,7 @@ metadata: When `true`, enables dynamic OG image generation for pages that don't have a custom `og:image` set. - + A custom background image for dynamically generated OG images. Can be a URL or a relative file path. Relative paths are resolved from the YAML file where this property is set (e.g., `docs.yml`). No default; the dynamic OG image renders without a background image when unset.