Why add an open graph to a website?

Documentation
3 min
Published on Mar 20, 2023
Updated on
What is an open graph? With preview in Webflow
Use AI to summarize this article
Key points

Also known as "twitter card" or "Open Graph (Facebook),"  open graph tags are the information that appears when you share a link from your site on LinkedIn, Twitter, Facebook (Meta), Messenger, or any other social media platform! Adding them is essential for two reasons:

  • Improve your engagement (click-through rate)
  • Enhance your SEO (Google loves og, meta & images)

What is an open graph?

An open graph consists of three tags: Title, Description, and Image. These three elements can be modified on each page of a website and are visible when you share a URL from that page.

Here’s an example in this image of a link with an open graph tag versus a link without open graph configuration.

Link with open graph vs link without open graph

The impact of open graph on my site (SEO)

The  og tag adds a custom description to your page. This description helps create more engagement when people share your URL, giving your content a better chance of being clicked!

It's also a best practice for optimizing the SEO of your site.

How to integrate an open graph tag into my site

If you are using a CMS, integrating the open graph tag is done through your CMS interface.

If you are using Webflow as your CMS, it's a very complex process. You'll need to know how to code, add plugins, and manage a lot of HTML. Or not, welcome to the no code world ☀️

Here’s how to easily integrate a title tag, meta description, and open graph image into your pages on Webflow:

  1. Open "Edit page settings"
  2. Add a - Title tag - and - Meta description - to your SEO settings
  3. Scroll down to the "Open Graph settings"
  4. Check the box "Same as SEO settings"
  5. Add an image URL in the "Open Graph Image URL" field
  6. Save and publish!

⚠️ The optimal size for an Open Graph image is 1200 x 630 pixels. This size will ensure that the image remains responsive when shared across various platforms (social media).

Prefer videos? Here’s a tutorial on integrating open graphs on Webflow in French. 

Conclusion on open graph

Adding an open graph to your pages will enhance their appearance when your links are shared on social networks. This enhanced appearance can increase traffic to your site, which, in turn, will help you achieve a better ranking in search engines. Yes, because the more users there are on your site... the more Google will think you have interesting things to share!

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Participants networking during flowConf 2026 in Belgrade, a European conference focused on the future of web, Webflow, and AI, inside a modern industrial venue featuring “Future of Web Unpacked” banners.
Events

The 2026 edition of flowConf perfectly reflects the turning point of the European Web(flow) ecosystem.

The 2026 edition of flowConf perfectly reflects the turning point of the European Web(flow) ecosystem.
Minimalist abstract illustration inspired by Webflow, featuring blue and white geometric shapes on a black background representing Webflow’s 2026 pricing evolution and enterprise AI-driven strategy.
News
Webflow

Webflow Pricing update in May 2026

Webflow Pricing update in May 2026
Live thumbnail featuring Lucas Clairet and Florian Bodelot in the center, with Webflow (blue background) and Claude (orange background) logos behind them, a “LIVE” badge in the top-left, and the text “Webflow + Claude” at the bottom.
Documentation
AI

Webflow x Claude: Full Recap of our Live

Webflow x Claude: Full Recap of our Live

Want to turn your website into your most valuable asset?

Contact us today