Create a connection
- Sign in to OpenGraph+
- Go to your website’s Meta Tags page
- Create a new connection and copy your connection URL
Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.
Find your page settings
In the Webflow Designer, click the Pages panel (or press P), then click the gear icon next to any page to open its settings.
Set Open Graph tags per page
Webflow has built-in fields for Open Graph tags in Page Settings → Open Graph Settings:
- og:title - set the “Title” field (defaults to your page title)
- og:description - set the “Description” field
- og:image - enter your connection URL + page path:
https://$OGPLUS_KEY.ogplus.net/about
Replace https://$OGPLUS_KEY.ogplus.net with your actual connection URL, and /about with the path of each page:
- For the homepage:
https://$OGPLUS_KEY.ogplus.net/ - For
/about:https://$OGPLUS_KEY.ogplus.net/about - For
/blog/my-post:https://$OGPLUS_KEY.ogplus.net/blog/my-post
Then go to Page Settings → Custom Code → Head Code and add the twitter card tag:
<meta name="twitter:card" content="summary_large_image">
Webflow automatically sets og:url to the canonical URL and og:site_name to your project name. You do not need to set these manually.
CMS Collection pages
For dynamic CMS pages (blog posts, team members, etc.), Webflow fills in og:title and og:description from your collection fields automatically. You still need to set the og:image URL for each page path, which you can do in the collection page template’s Open Graph Settings.
Repeat for each page
Webflow doesn’t have server-side templating, so you need to set the og:image URL for each page individually in that page’s settings.
Verify
Publish your site and open the preview tool in your OpenGraph+ dashboard. Paste a URL from your site and confirm all Open Graph meta tags are present with correct values.