Open Graph Tags Complete Guide: Make Your Pages Look Great on Social Media

On This Page

You just published a massive, 3,000-word masterpiece on your blog. You are excited to share it with the world, so you paste the link into a new Facebook post or drop it into a Slack channel.

Instead of a beautiful, clickable preview card with a stunning cover image and a catchy headline, the platform generates a broken link preview. There is no image, the title is cut off, and the description is just your website’s navigation menu text.

Nobody is going to click on that.

To control exactly how your website looks when it is shared on social media or messaging apps, you need to use Open Graph (OG) Tags. In this complete guide, we will break down what they are, why they are secretly vital for your SEO, and which tags you absolutely must include on your pages.


What Are Open Graph Tags?

Originally created by Facebook in 2010, the Open Graph protocol allows any webpage to become a “rich object” in a social graph. Simply put, OG tags are snippets of HTML code hidden in the <head> section of your webpage.

When you paste a link into Facebook, LinkedIn, Discord, or iMessage, these platforms send a mini-crawler to your URL. They specifically look for your Open Graph tags to understand what the title, description, and preview image should be.

If you don’t provide these tags, the social platform will just guess—usually by scraping the first random image and text block it finds.


Do Open Graph Tags Impact SEO?

This is a common question among webmasters. Directly? No. Google has stated that Open Graph tags are not a direct ranking factor in their search algorithm (Google uses your standard <title> and <meta name="description"> tags for that).

Indirectly? Absolutely.
The performance of your content heavily relies on traffic and engagement. If your Open Graph tags are highly optimized, your social media link previews will be incredibly attractive. This leads to:

  • Massive Increases in Click-Through Rate (CTR): A great image and compelling title make people want to click.
  • More Backlinks: If your content looks professional and gets shared widely on social media, there is a much higher chance that other bloggers and journalists will see it and link to it from their own websites. Backlinks are a massive direct ranking factor.

The 5 Essential Open Graph Tags You Need

You don’t need to use every single tag in the Open Graph protocol. To get a perfect link preview, you only need these five:

1. og:title

This dictates the bold headline of your social preview card. Make it catchy and engaging.

  • Best Practice: Keep it under 60 characters so it doesn’t get truncated on mobile devices.
  • Code: <meta property="og:title" content="The Ultimate Guide to Open Graph Tags" />

2. og:description

A brief summary of your content. Unlike standard SEO meta descriptions, this does not need to be stuffed with keywords—focus purely on hooking the reader’s curiosity.

  • Best Practice: Keep it between 65 and 100 characters.
  • Code: <meta property="og:description" content="Stop letting Facebook ruin your links. Learn how to optimize your OG tags today." />

3. og:image (The Most Important Tag)

This is the visual centerpiece of your link preview. If you only implement one tag, make it this one. Content with an image gets significantly more engagement than text alone.

  • Best Practice: Use a high-quality image with a resolution of 1200 x 630 pixels (a 1.91:1 aspect ratio). Keep important elements in the center so they don’t get cropped.
  • Code: <meta property="og:image" content="https://example.com/images/og-cover.jpg" />

4. og:url

This should be the canonical (master) URL of your webpage. It ensures that all likes and shares are consolidated to one specific URL, rather than being split between different tracking parameters.

  • Code: <meta property="og:url" content="https://example.com/blog/open-graph-guide" />

5. og:type

This tells the platform what kind of object you are sharing. For most websites, you will only ever use two types: website (for your homepage) or article (for blog posts).

  • Code: <meta property="og:type" content="article" />

How to Audit Your Open Graph Tags Instantly

Are your blog posts missing their og:image tags? Is your CMS generating duplicate or broken Open Graph descriptions? You cannot afford to lose social media traffic to broken code.

Instead of manually inspecting the HTML of every page, you can automate this check using FunSEO.

Our free, instant SEO scanner includes a dedicated Social Tag auditing engine. In just seconds, with zero login required, FunSEO will:

  • Detect if your page is missing critical Open Graph tags (og:title, og:description, og:image).
  • Extract exactly what text and image URLs are being broadcasted to social networks.
  • Ensure your basic SEO metadata is aligned with your social sharing data.

Stop crossing your fingers every time you share a link. Run a free scan on FunSEO today, fix your Open Graph tags, and start maximizing your social media traffic.