Huevsite·Explore all our tools
All articles
Social SEO7 min read

Open Graph Tags: The Complete Guide to Social SEO

Everything you need to know about Open Graph meta tags. Learn how to control how your content appears on Facebook, LinkedIn, X, and messaging apps.

Open Graph (OG) tags are meta tags that control how your URLs appear when shared on social media platforms. Originally created by Facebook in 2010, the Open Graph protocol has become the universal standard for link previews across Facebook, LinkedIn, X (Twitter), Discord, Slack, WhatsApp, Telegram, and virtually every platform that generates link previews.

Why Open Graph Tags Matter

Think about the last time you shared a link on social media. If it showed a big, eye-catching image with a compelling title and description, you probably didn't think twice. But if it showed a blank card or a random image pulled from the page, it looked broken and unprofessional.

That's the difference OG tags make. They transform your shared links from bare URLs into rich, clickable preview cards. And since social referral traffic is a significant source of visitors for most websites, getting this right directly impacts your traffic.

Essential Open Graph Tags

Every page should have these four core OG tags:

og:title — The title displayed in the share card. Can differ from your SEO title tag. Optimize it for social context (more conversational, curiosity-driven) rather than search keywords.

og:description — The description shown below the title in share previews. Keep it under 200 characters. Focus on the value the reader gets.

og:image — The preview image. This is the most visually impactful element. Use 1200x630 pixels for universal compatibility. The image should work standalone — someone scrolling their feed should understand what the content is about just from the image.

og:url — The canonical URL. This tells platforms which URL to use as the permanent link, preventing duplicate share counts across URL variations.

The Perfect OG Image

Your og:image makes or breaks your social previews. Here's what works:

Size: 1200x630px is the sweet spot. It works perfectly on Facebook, LinkedIn, and X's summary_large_image card. Smaller images may get cropped or shown as tiny thumbnails.

Format: Use JPEG for photos, PNG for graphics with text. Keep file size under 1MB for fast loading.

Content: Include readable text on the image (your headline or key message). Many people scroll social feeds quickly — text on the image grabs attention even without reading the card title.

Branding: Add your logo subtly. It builds recognition without being distracting.

Contrast: Use high-contrast colors. Social feeds are visually noisy — your image needs to stand out.

Open Graph Tags for Different Content Types

For articles and blog posts, add these additional tags: - og:type = 'article' - article:published_time — When the article was published - article:author — Author name or URL - article:section — The content category

For products: - og:type = 'product' - product:price:amount and product:price:currency

For videos: - og:type = 'video' - og:video — URL to the video file - og:video:width and og:video:height

Testing Your Open Graph Tags

After implementing OG tags, test them before sharing. Seoggestion analyzes all your Open Graph tags and shows you exactly what your share preview will look like across platforms.

You can also use Facebook's Sharing Debugger to see how Facebook reads your OG tags and clear its cache. For X/Twitter, use the Card Validator.

Pro tip: Social platforms cache OG data aggressively. If you update your tags, you may need to use each platform's debug/validation tool to force a cache refresh before the new preview appears.

open graph tagsog tagssocial media meta tagsopen graph protocolog image size

Ready to check your site?

Run a free analysis and get your SEO score with actionable seoggestions.

Analyze Now — Free