Open Graph
What Open Graph is
Open Graph is a protocol, originally created by Facebook, that lets you control how a web page appears when it is shared on social networks and messaging apps. When someone posts your link on LinkedIn, Facebook, WhatsApp, Slack or many other platforms, those services look for Open Graph meta tags in your page's HTML to build the preview card: the title, the description, and above all the image. Without them, the platform guesses, often badly, and your link shows up with a random image or no image at all.
In practical terms, Open Graph turns a bare URL into a rich, branded preview. That preview is the first impression your content makes in a social feed, and it has a direct effect on whether people click. Getting it right is a small technical task with an outsized impact on how shareable and professional your links look.
How Open Graph works
Open Graph tags live in the <head> of your page and follow a simple pattern: a property attribute starting with og: and a content value. The four essential tags are og:title (the headline of the preview), og:description (the supporting text), og:image (the preview picture) and og:url (the canonical link). You can add more, such as og:type (article, website, product) and og:site_name, to give platforms extra context.
- og:title defines the bold headline shown on the card.
- og:description gives the short text beneath the title.
- og:image sets the preview image, ideally 1200x630 pixels.
- og:url declares the canonical URL for the shared content.
When a link is pasted, the platform's crawler fetches the page, reads these tags and caches a preview. Because the result is cached, updating your tags may require the platform's debugging tool to refresh what it has stored.
Open Graph and Twitter Cards
You will often see Open Graph mentioned alongside Twitter Cards, X's own equivalent using twitter: tags. The good news is that X falls back to Open Graph tags when Twitter-specific ones are absent, so a solid set of og: tags covers most platforms at once. Many sites add a few twitter:card and twitter:image tags on top to fine-tune the appearance on X, but Open Graph remains the shared foundation that the majority of networks read.
Why Open Graph matters
Open Graph does not directly affect your search rankings, it is not an SEO ranking factor, but it strongly affects behaviour once your content reaches social channels. A clear title, a compelling description and a crisp, correctly sized image make a link look trustworthy and clickable, which lifts click-through and sharing. A missing or broken preview does the opposite: it looks amateurish and suppresses engagement. For any brand that distributes content on social media, or whose pages get shared by users, Open Graph is part of a complete meta description and metadata strategy, sitting next to your SEO tags rather than replacing them.
It also protects consistency. By setting the image and copy explicitly, you decide how your brand shows up in every feed, instead of leaving it to a platform's best guess. That control matters most for key pages: your homepage, landing pages, and cornerstone articles that you actively promote.
Common mistakes
The most common Open Graph problem is a missing or wrongly sized og:image: too small, wrong aspect ratio, or a file the crawler cannot reach, which leaves an ugly or empty card. Others include forgetting the tags entirely on new templates, using relative instead of absolute image URLs, and duplicating or conflicting tags. A subtle one is stale caching: after you fix a tag, the platform may still show the old preview until you force a refresh in its sharing debugger. Testing each important page in a platform's preview tool before you promote it is the simplest way to avoid an embarrassing first impression.
Open Graph at BeBranded
At BeBranded we set up Open Graph as part of building any site, so that every page, and especially those meant to be shared, produces a clean, on-brand preview. On Webflow we define the title, description and a correctly sized image for key templates, add Twitter Card tags where useful, and validate the result in the platforms' debugging tools before launch. It is a small detail that quietly shapes how professional a brand looks the moment its links start circulating, and it is exactly the kind of finishing touch that separates a polished site from an unfinished one.
FAQ
What is Open Graph used for?
What are the essential Open Graph tags?
What image size should og:image be?
Does Open Graph affect SEO?
What is the difference between Open Graph and Twitter Cards?
Why is my link preview not updating?
Linked tools
