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

  • A Webflow site plan that supports custom code
  • A MyOG.social account with your domain added
  • The final published URL for each static page or a CMS field that can output it

How MyOG fits Webflow

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

For static pages, use the exact published URL in the MyOG url parameter. For CMS pages, use a CMS field that contains the absolute canonical URL or bind the page URL value if your setup exposes one.

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.

<meta property="og:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fpricing&template=screenshot-right" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fpricing&template=screenshot-right" />

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 a CMS field that outputs the encoded absolute URL for the current item.

<meta property="og:image" content="https://api.myog.social/og?url={{wf {&quot;path&quot;:&quot;canonical-url&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}&template=screenshot-right" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?url={{wf {&quot;path&quot;:&quot;canonical-url&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}&template=screenshot-right" />

The field placeholder is illustrative. Insert your actual Webflow CMS field using the field picker in the custom code editor.

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 use the head custom code area for that template.
  3. Paste the MyOG tags after any title and description tags, then remove or replace a conflicting og:image value in Webflow's Open Graph image settings if needed.
  4. 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

For CMS collection pages, add a CMS plain text field such as Canonical URL and populate it with the absolute public URL, then insert that field into the head code. Static pages can use their literal URL.

Test the result

  • Publish before testing; Webflow preview is not the same HTML crawlers fetch.
  • Open the published page source and confirm MyOG appears in the head.
  • 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.
CMS pages need a dynamic URL value; a body embed is too late for link-preview crawlers.
If a Webflow page has a native Open Graph image set, clear it or confirm tag order.

Sources

Ready to get started?

Sign up for free and turn Webflow pages into generated social cards.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f