# Webflow ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 2. Go to your website's **Meta Tags** page 3. On your first visit you'll see the Terms of Service; click **Agree & Create Connection**, then 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: ```html ``` 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](/previews/new). Paste a URL from your site and confirm all Open Graph meta tags are present with correct values. ## Multiple domains Running staging and production, subdomains, or several sites under one account? See [Multiple domains & environments](/docs/multiple-domains). For a single site, the connection tag above is all you need. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags and CSS added through Webflow's Custom Code feature. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of platform. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to add them in Webflow. ## Meta tags Add these through **Page Settings > Custom Code > Head Code** for per-page control, or **Site Settings > Custom Code > Head Code** for site-wide defaults. They're all optional. ```html ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Add a ` ``` See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `

${document.querySelector('h1')?.textContent}