Content overview
How to Add Open Graph title, description, and image on Webflow
Open Graph tags are the meta tags that control how your content appears when shared on social platforms — the title, description, and image that show up in a LinkedIn post, a Slack message, or a Facebook share. Without them, platforms either generate a preview from whatever content they find first or display nothing at all.
From an SEO perspective, Open Graph tags don't directly affect Google rankings. But they affect click-through rates on social shares, which affects traffic, which affects the engagement signals Google does pay attention to. A compelling OG image and title can double the click rate on a shared link compared to a broken or missing preview.
The three fields that matter: the OG title, OG description, and OG image. The title should match or closely align with your page title — it doesn't need to be identical, but it should set accurate expectations for what the visitor will find. The description should be 150-200 characters and give a concrete reason to click. The image should be 1200x630 pixels, and it should actually look good — a dark screenshot or a cropped logo is worse than no image.
In Webflow, Open Graph settings are in the Page Settings panel for each page. Open the Pages panel, click into the page settings, and scroll to the Open Graph section. Fill in the OG title, OG description, and upload an OG image. For CMS pages, you can bind these fields to collection item fields — create OG Title and OG Description fields in your collection schema, and bind them in the page template. This lets you set custom OG data per CMS item without template editing.
A common mistake is setting the OG image once globally and using it for every page. A generic site thumbnail as the OG image for every blog post makes every share look the same and gives users no reason to click one over another. Where possible, create a simple OG image template (a branded design with the post title overlaid) and apply it per page or per CMS item.
Check your OG tags periodically using Facebook's Sharing Debugger or LinkedIn's Post Inspector. Both tools show exactly what a shared link will look like and flag any missing or malformed tags. This takes five minutes and should be part of your standard pre-publish checklist for new pages.
How to do it on Webflow
On Webflow, Open Graph (OG) is relatively straightforward.
And here is how you get the link for the OG image and paste it to your page.
To go further and optimize how to share your website on Twitter, feel free to have a look at the CSS trick article https://css-tricks.com/essential-meta-tags-social-media/#aa-final-markup