Back to Docs

No-code site builder

Webflow OG Image Integration

Add automatic Open Graph images to Webflow static pages and CMS collection pages with head custom code.

Prerequisites

  • Webflow custom-code access through an eligible paid Workspace or an active Site plan; CMS publishing also needs a CMS-capable plan
  • A MyOG account with your public domain added and available image credits from a paid plan or the 10-day card trial
  • The exact canonical origin and Collection path, plus Webflow's saved Slug field for each item

How MyOG fits Webflow

Webflow lets you add custom code in the head globally, per page, and for CMS collection templates.

For CMS pages with ordinary path-only URLs, combine the fixed canonical origin and Collection path with Webflow's native Slug field. New items then get their own image without a manually maintained Canonical URL field.

The CMS recipe supports letters, digits, hyphens and path separators in the canonical path. It does not support query strings, fragments, percent escapes, plus signs or ampersands. Use an encoded per-page URL for those cases and for custom canonical overrides.

Do not use a code embed element inside the page body for OG tags; social crawlers read head metadata from the initial HTML.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Webflow code

Static page head code

Use this for a Webflow page with a known published URL.

Preview anonymously. Sign in to get complete install code for your account.

Sign in to get install code

Replace the encoded example URL with the page's public URL. Encoding https://example.com/pricing becomes https%3A%2F%2Fexample.com%2Fpricing.

CMS collection head code

Use this only for canonical paths made of letters, digits, hyphens and slashes. Insert Slug through Webflow's field picker in both marked positions.

Preview anonymously. Sign in to get complete install code for your account.

Sign in to get install code

REPLACE_WITH_SLUG marks where to insert Webflow's Slug field. Select it and use + Add Field → Slug. Leave no marker in the published source. For other URL shapes, encode the full canonical URL once and use the static-page recipe.

3

Place it correctly

  1. For one page, open Page settings, Custom code, then the Head code section.
  2. For CMS templates, open the Collection page settings and its Head code area. Replace https://example.com/blog/ with your canonical origin and full Collection path, including parent or locale folders.
  3. In both CMS image URLs, select REPLACE_WITH_SLUG and use + Add Field to insert the native Slug field. Do not paste that marker as a value or invent a template token.
  4. Remove or replace the conflicting image block or binding in Webflow's Open Graph settings. Confirm MyOG is the only og:image in the published head.
  5. Publish the site. Webflow custom code changes are not live until publish.

Avoid duplicate og:image tags

Webflow page settings can already output an Open Graph image. If both Webflow and MyOG emit og:image, social platforms may choose the first value. Use MyOG as the only og:image for pages where you want automatic images.

Dynamic pages

Use + Add Field in the Collection template's Head code to insert Slug after the fixed public path. Keep url as the final MyOG parameter. A saved letters/digits/hyphens slug needs no query-value escaping; update the fixed prefix if your domain, Collection path or locale changes.

Test the result

  • Publish before testing; Webflow preview is not the same HTML crawlers fetch.
  • Inspect two published Collection items. Each decoded MyOG url value must equal that item's canonical link, and each page should contain one og:image.
  • If the canonical contains ?, &, +, # or %, use the encoded per-page fallback. Moving url to the end or writing & does not encode a nested URL.
  • Run the page through the MyOG checker and a social platform debugger.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

A global head tag cannot safely use one fixed URL for every page.
The native Slug recipe covers path-only Collection URLs, not arbitrary full URL fields. Webflow does not document a URI-component encoding transform for inserted fields.
Private pages cannot be fetched. Free MyOG signup does not activate paid image serving; keep the registered domain and image credits available.

Sources

Ready to get started?

Create a MyOG account, add your Webflow domain, then start the card trial to serve images.

Already have an account?

379f5379a5705306bcc425895d6a79f1a1883384