What Is Open Graph? A Complete Guide for Bloggers
Open Graph is the protocol that decides what your link looks like when someone shares it. When a URL appears on Facebook, LinkedIn, Slack, or in an iMessage thread with a title, a summary, and a preview image, that card was assembled from Open Graph meta tags in the page's HTML. Get them right and every share is a small, branded advertisement. Get them wrong and your post shows up as a bare blue link.
Where Open Graph came from
Facebook introduced the Open Graph protocol in 2010 to let any web page become a rich object in a social feed. The idea stuck, and the tags became a cross-platform standard: today LinkedIn, Discord, Slack, WhatsApp, iMessage, and X all read them (X layers its own twitter: tags on top). One vocabulary, read almost everywhere.
What the tags actually look like
Open Graph tags live in the <head> of your HTML as <meta> elements with a property attribute:
<meta property="og:title" content="Why I Write Every Day" />
<meta property="og:description" content="A short, honest case for a daily writing habit." />
<meta property="og:image" content="https://example.com/cards/daily-writing.jpg" />
<meta property="og:url" content="https://example.com/daily-writing" />
<meta property="og:type" content="article" />
The five that carry almost all the weight:
og:title— the headline of the card. Keep it under ~60 characters so X and Facebook don't truncate it.og:description— the one-line summary. 110–160 characters is the comfortable range.og:image— the preview image. Must be an absolute HTTPS URL. See the image-size cheat sheet for exact dimensions.og:url— the canonical URL of the page, stripped of tracking parameters.og:type— usuallyarticlefor a blog post orwebsitefor a homepage.
Why the preview image matters more than you think
The image is the part of the card the eye lands on first, and the data backs up the instinct that it drives engagement.
A custom, on-brand card does two jobs at once: it earns the click in a crowded feed, and it makes your link look like it came from a real publication rather than a placeholder. That is why blogs that auto-generate a branded card per post tend to see materially higher click-through from social.
Does Open Graph help SEO?
Not directly — and it's worth being precise here, because the myth is everywhere. Open Graph tags are not a Google ranking factor. What they do is shape the share, which drives clicks and referral traffic, and that engagement is the indirect benefit. Treat Open Graph as conversion optimization for your links, not as a ranking lever.
How to set it up
How you add the tags depends on your stack:
- Ghost outputs Open Graph tags from your post metadata automatically; you can enhance the image per post. See our Ghost integration guide.
- WordPress typically handles this through an SEO plugin such as Yoast, or via theme code. See our WordPress guide.
- Custom sites set the tags in the page
<head>— in Next.js, through the Metadata API.
The hard part is rarely the title and description — it's producing a good og:image for every single post without designing each one by hand. That's the problem Social Card Studio exists to solve: one tag, a branded card generated on the fly for every post.
The takeaway
Open Graph is a small, stable set of meta tags with an outsized effect on how your work travels. Set og:title, og:description, an absolute og:image, and og:url, verify the preview with the platform debuggers, and your links stop looking broken. If one ever does, here's how to debug it.
Frequently asked questions
What is Open Graph?
Open Graph is a protocol, created by Facebook in 2010, that uses <meta property="og:..."> tags in a page's HTML to control how the page appears when shared on social platforms — the title, description, and preview image.
Is Open Graph a Google ranking factor?
No. Open Graph tags do not directly affect Google rankings. They influence how links look when shared, which drives click-throughs and referral traffic — an indirect signal — but they are not a direct ranking input.
Do I need Twitter card tags if I have Open Graph tags?
Not strictly. X falls back to Open Graph tags when Twitter-specific tags are absent. Adding twitter:card lets you control the card type (large image vs thumbnail), but og: tags alone will produce a preview.