The Ultimate Guide to Open Graph Tags

Have you ever pasted a link into Slack, Discord, or Twitter, and instead of a beautiful rich preview with a stunning image and a catchy title, you get a boring grey box or just the plain URL? 🤮

That happens because the webpage is missing Open Graph (OG) tags. In 2024, if you want people to click your links on social media, OG tags aren't optional—they're mandatory.

What is Open Graph? 🤔

The Open Graph protocol was originally created by Facebook in 2010. Their goal was simple: make it easier for web developers to tell Facebook exactly how a webpage should look when shared on their platform.

Fast forward to today, and everyone uses Open Graph. Twitter, LinkedIn, Discord, Slack, iMessage, WhatsApp—they all look for OG tags when scraping a URL to generate a preview card.

If your <head> tag doesn't contain Open Graph meta tags, social platforms will just guess what image and title to use. And trust me, they usually guess wrong.

The 4 Must-Have OG Tags 🛠️

While there are dozens of Open Graph tags available, you really only need these four to get a perfect social media preview every single time.

1. og:title

The title of your article or page. Keep it punchy and under 60 characters so it doesn't get truncated.

<meta property="og:title" content="The Ultimate Guide to Open Graph Tags" />

2. og:type

What kind of content are you sharing? For most webpages, it'll be website. For blog posts, use article.

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

3. og:image

This is the big one! The URL to the image that will appear in the rich preview card. Always use an absolute URL (including the https://).

<meta property="og:image" content="https://seo-tag-kit.vercel.app/assets/og-image.jpg" />

4. og:url

The canonical URL of the page you're sharing. This ensures all the likes and shares get attributed to a single unified URL.

<meta property="og:url" content="https://seo-tag-kit.vercel.app/blog/open-graph-guide/" />

The Golden Ratio: Image Dimensions 🖼️

If you've ever had your preview image awkwardly cropped or stretched, it's because you didn't use the optimal dimensions.

Design your OG images at exactly 1200x630px. This 1.91:1 ratio is perfectly supported by Facebook, Twitter, LinkedIn, and almost every other platform out there.