Open Graph Protocol: Why Your Content Looks Broken on Social Media
Quick answer: Open Graph tags tell Facebook, X, LinkedIn and other platforms what title, description and image to show when someone shares your link. Missing or wrong tags produce blank, ugly or outdated previews.
You finish a great blog post, share the link on LinkedIn or X, and the preview looks terrible: no image, a truncated title, or the wrong description. That problem almost always comes from missing or incorrect Open Graph tags. This guide explains what the Open Graph protocol is, which tags matter most, and how to generate correct ones in seconds with our free tool.
What is the Open Graph protocol?
Open Graph is a set of meta tags originally created by Facebook. They live in the <head> of your HTML and tell social platforms (and many messaging apps) exactly how to display your page when it is shared. Without them, platforms guess from the page title, the first paragraph, or a random image — and the result is often ugly or irrelevant.
The three tags that matter most
- og:title — The title shown in the preview. Keep it clear and under roughly 60–70 characters.
- og:description — The short summary under the title. Aim for 100–160 characters that encourage a click.
- og:image — The image that appears with the post. Recommended size is at least 1200 × 630 pixels. Use an absolute URL (https://…).
Two extra tags that help: og:url (the canonical page address) and og:type (usually “website” or “article”).
Why broken previews hurt you
A weak or missing preview reduces clicks. People scroll past posts that look unfinished. Over time that lower engagement can also limit how far the platform shows your content. Clean previews look professional and increase the chance someone will click through to your site.
How to fix Open Graph tags in minutes
- Open our free Meta Tag Generator.
- Enter your page title, description, full URL and (optional) image URL.
- Copy the generated HTML — it includes the correct Open Graph tags.
- Paste the code into the <head> section of your page.
- Clear the platform cache with Facebook Sharing Debugger, LinkedIn Post Inspector or X Card Validator so the new tags are used immediately.
Common mistakes
- Using a relative image path instead of a full https:// URL.
- Forgetting to update the tags when the page title or description changes.
- Relying only on the regular <title> and meta description — social platforms prefer the og: versions when they exist.
- Choosing an image that is too small or has important text near the edges (platforms often crop).
Frequently asked questions
What is the Open Graph protocol?
A set of meta tags that tell social platforms how to display your page when it is shared. The most important are og:title, og:description and og:image.
Do Open Graph tags affect Google rankings?
Not directly. They mainly control social previews. Good previews can still increase traffic and engagement, which support overall performance.
How do I test my Open Graph tags?
Use Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, or X’s Card Validator after you update the tags.
Conclusion
Open Graph tags are a small piece of HTML that make a big difference in how your content appears across the social web. Generate correct tags with our Meta Tag Generator, add them to every important page, and test the previews. Clean shares look more professional and earn more clicks. For related reading, see our guide on meta description length.