Skip to content

docs: rename og:background-image to og:dynamic:background-image #5235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fern-support merged 2 commits into from
Apr 29, 2026
Merged

docs: rename og:background-image to og:dynamic:background-image #5235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bc0fe6
docs: rename og:background-image to og:dynamic:background-image
devin-ai-integration[bot] Apr 29, 2026
21ed05a
docs: update old og:background-image reference in changelog
devin-ai-integration[bot] Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions fern/products/docs/pages/changelog/2026-03-11.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/seo/setting-seo-metadata#dynamic-og-images">Read the docs</Button>
2 changes: 1 addition & 1 deletion fern/products/docs/pages/changelog/2026-04-29.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions fern/products/docs/pages/navigation/site-level-settings.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -1072,7 +1072,7 @@ metadata:
When `true`, enables dynamic OG image generation for pages that don't have a custom `og:image` set.
</ParamField>

<ParamField path="metadata.og:background-image" type="string" required={false}>
<ParamField path="metadata.og:dynamic:background-image" type="string" required={false}>
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`).
</ParamField>

Expand Down
8 changes: 4 additions & 4 deletions fern/products/docs/pages/seo/metadata.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ Set one static image with `og:image` that applies to every page. Use a 1200x630p

#### Dynamic <Availability type="beta" /> [#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
Expand All @@ -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.
</ParamField>

<ParamField path="metadata.og:background-image" type="string" required={false} toc={true}>
<ParamField path="metadata.og:dynamic:background-image" type="string" required={false} toc={true}>
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.
</ParamField>

Expand Down
4 changes: 2 additions & 2 deletions fern/snippets/seo-metadata-site.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -99,7 +99,7 @@ metadata:
When `true`, enables dynamic OG image generation for pages that don't have a custom `og:image` set.
</ParamField>

<ParamField path="metadata.og:background-image" type="string" required={false}>
<ParamField path="metadata.og:dynamic:background-image" type="string" required={false}>
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.
</ParamField>

Expand Down
Loading