What Are Open Graph Tags? A Beginner's Guide to Social Sharing
Aug 15, 2025
Have you ever shared a link on Facebook, X (Twitter), or LinkedIn and noticed a nice preview with an image, title, and description? That’s made possible by Open Graph tags. They’re small pieces of code added to your website that tell social platforms what to display when someone shares your link.
Without them, your link might look plain or even show the wrong image. With them, you’re in control of how your content appears on social media.
What exactly are Open Graph tags?
Open Graph tags (often written as OG tags) are a type of meta tag you place in the <head> section of your web page’s HTML. They follow the Open Graph Protocol, which was introduced by Facebook in 2010 but is now used across many platforms.
Each tag has a specific role. For example:
og:title→ the headline shown in the previewog:description→ the short text below the headlineog:image→ the image that appears next to the linkog:url→ the exact link being shared
Together, they form a “social card” for your content.
Why are Open Graph tags important?
There are a few reasons why these tags matter:
- Better first impression – A clean preview with the right image makes your content more attractive.
- Higher engagement – People are more likely to click on a link with a strong visual and clear description.
- Brand consistency – You can make sure every link shared reflects your design and message.
- SEO benefits (indirectly) – While OG tags don’t directly boost rankings, they can improve click-through rates on social platforms, which often drives more traffic.
Example of Open Graph tags in action
Here’s what the code might look like for a blog post:
<meta property="og:title" content="What Are Open Graph Tags? A Beginner’s Guide" />
<meta property="og:description" content="Learn what Open Graph tags are, how they work, and why they matter for your social media presence." />
<meta property="og:image" content="https://example.com/images/og-tags-guide.jpg" />
<meta property="og:url" content="https://example.com/what-are-open-graph-tags" />When someone shares this link, platforms like Facebook or LinkedIn will use these tags to generate the preview.
What happens if you don’t use them?
If you don’t include Open Graph tags, social media platforms will try to guess what to show. That can lead to:
- A random or stretched image being used
- No image at all
- The wrong page title or description
This usually makes your link less appealing and can hurt clicks.
How do you add Open Graph tags?
Adding OG tags is fairly simple. You have a few options:
- Manually – Add them directly into the section of your HTML.
- With a CMS plugin – If you use WordPress, tools like All in One SEO or Yoast SEO can handle OG tags for you.
- With frameworks – If you’re building with something like Next.js or Astro, you can set them dynamically per page.
If you want to check whether your tags are working, you can use tools like the Facebook Open Graph Debugger or an Open Graph Checker. These will show you how your content looks when shared.
Open Graph tags give you control over how your links appear on social media. They’re easy to add and make a big difference in how professional and clickable your content looks.
If you’re just starting out, begin with the basics: og:title, og:description, og:image, and og:url. Once you’re comfortable, you can explore more advanced tags for videos, articles, and products.
Now that you know what Open Graph tags are, check out our guide on How to Add Open Graph Meta Tags to Your Website for a step-by-step tutorial. Or, if you’re curious about visuals, dive into our Open Graph Images Guide to learn about sizes and formats.