Open Graph

Open Graph is a set of meta tags placed in the head of a web page that tells other platforms how to represent the page when someone shares it. Facebook introduced the protocol in 2010 so any web page could become a rich object in its social graph. It has since become a de facto standard: LinkedIn, Slack, WhatsApp, iMessage, Discord and many other apps read Open Graph tags to build link previews. X uses its own card tags but falls back to Open Graph values for the title, description and image when those are missing.

The core properties are:

• og:title: the headline shown in the preview, which can differ from the page's title tag.
• og:description: a short summary, often similar to the meta description but written for a social audience.
• og:image: the preview image. A size of 1200 by 630 pixels is a widely used recommendation that displays well across major platforms.
• og:url: the canonical URL of the page, which helps platforms consolidate shares of the same content.
• og:type: the kind of object, such as website or article.
• og:site_name and og:locale: optional properties for the brand name and language.

Why Open Graph Matters

1. Shared links become marketing assets. Every time a customer, employee or partner shares a page, the preview works like a small ad for your brand.
2. You control the message. Without tags, platforms guess, often pulling an irrelevant image or a truncated sentence.
3. Consistency builds recognition. Branded preview images reinforce your brand identity across feeds and chats.
4. Better previews invite clicks. A clear title and a relevant image give people a reason to open the link.

Real-World Example of Open Graph

A fintech company publishes a new industry report and shares it on LinkedIn. The preview shows the site logo cropped awkwardly and a description that reads like a cookie notice, because the page has no Open Graph tags. The team adds an og:title that states the report's key question, an og:description summarizing its value and a custom 1200 by 630 image with the report title. After refreshing the cached preview in LinkedIn's Post Inspector, the post shows a clean, branded card. The same tags now produce consistent previews when the report is shared in Slack or WhatsApp.

How to Set Up Open Graph

Add Open Graph tags to every important page template, not only the homepage. For a blog or resource library, generate them dynamically from content fields so each article gets its own title, description and image. In Webflow, Open Graph settings are available for every page, and CMS template pages can pull their values from collection fields.

Design preview images with text that stays legible at small sizes, and keep important content away from the edges, since platforms crop images differently. Use absolute URLs for image paths. After publishing, test pages with Facebook's Sharing Debugger and LinkedIn's Post Inspector, which also let you refresh cached previews after changes.

Open Graph is not a direct Google ranking factor. It belongs alongside structured data as metadata that helps machines understand and present your content, and it is usually managed together with on-page SEO elements, because the same page templates control them.

Conclusion

Open Graph turns every shared link into a deliberate brand moment. A few well-written tags and a consistent image template make your content look credible wherever it travels.

Need Help With Open Graph?

Artifact configures Open Graph tags, dynamic CMS fields and branded preview image templates as part of our website builds, so every shared page looks intentional. Tell us about your project.