Skip to content

Document redesigned dynamic OG images with toggle flags and color overrides#4322

Open
kgowru wants to merge 4 commits intomainfrom
devin/1773760543-og-text-color-docs
Open

Document redesigned dynamic OG images with toggle flags and color overrides#4322
kgowru wants to merge 4 commits intomainfrom
devin/1773760543-og-text-color-docs

Conversation

@kgowru
Copy link
Contributor

@kgowru kgowru commented Mar 17, 2026

Summary

Documents the redesigned dynamic OG image feature, including seven new docs.yml metadata settings:

  • Color overrides: og:dynamic:text-color and og:dynamic:background-color — let users override auto-detected theme colors (fixes visibility issues on light backgrounds)
  • Toggle flags: og:dynamic:show-logo, og:dynamic:show-section, og:dynamic:show-description, og:dynamic:show-url, og:dynamic:show-gradient — let users show/hide individual elements in the generated OG image

Changes:

  • metadata.mdx: Added ParamField entries for all 7 new settings and updated the YAML example block
  • seo-metadata-site.mdx: Added the new fields to the snippet example and ParamField list
  • changelog/2026-03-17.mdx: New changelog entry describing the full OG image redesign (section title, description, URL, dark mode default, gradient, toggle flags)

Companion PRs:

Review & Testing Checklist for Human

  • Verify the companion fern-platform and fern PRs are merged before this goes live, otherwise the docs will reference settings that don't work yet
  • Preview the metadata page and confirm the 7 new ParamField entries render correctly under the "Dynamic OG images" section — especially verify default={true} shows up as expected on the toggle flags
  • Confirm the changelog entry at /learn/docs/changelog/2026-03-17 renders the bullet list and YAML block correctly, and the "Read the docs" button links to the right anchor
  • Verify the snippet example in seo-metadata-site.mdx stays in sync with the main metadata.mdx — both should list the same 7 new fields

Notes

The changelog entry was updated from the original color-override-only scope to describe the full OG image redesign. The toggle flags all default to true when og:dynamic is enabled, so existing users who enable dynamic OG images get the full layout without extra configuration. Individual elements can be hidden by setting the corresponding flag to false.

Link to Devin session: https://app.devin.ai/sessions/6790df55b5bb4b4b9c7d3f68c5b7ada9
Requested by: @kgowru

… entry

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
@devin-ai-integration
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions
Copy link
Contributor

github-actions bot commented Mar 17, 2026


## 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[FernStyles.Current] Avoid time-relative terms like 'now' that become outdated

…dynamic:background-color

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

## 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: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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[FernStyles.Current] Avoid time-relative terms like 'now' that become outdated

@devin-ai-integration devin-ai-integration bot changed the title Add og:text-color and og:background-color documentation and changelog Add og:dynamic:text-color and og:dynamic:background-color documentation and changelog Mar 17, 2026
devin-ai-integration bot and others added 2 commits March 17, 2026 16:23
Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
…sign

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
@devin-ai-integration devin-ai-integration bot changed the title Add og:dynamic:text-color and og:dynamic:background-color documentation and changelog Document redesigned dynamic OG images with toggle flags and color overrides Mar 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant