Open Graph Tags: Get Perfect Social Media Previews

Why Open Graph Tags Matter for Every Website

Open Graph tags are meta tags in your HTML head that control how your content appears when shared on social media platforms. Without them, Facebook, LinkedIn, Twitter, and other platforms auto-generate previews from your page content — and the results are almost always ugly, truncated, or irrelevant. According to Buffer, posts with properly optimized Open Graph images receive 2.5x more engagement than those without.

The impact goes beyond vanity. Social media drives significant referral traffic. When your content looks professional in social feeds, more people click. When it looks broken or generic, they scroll past. Open Graph tags are the difference between a compelling social preview that drives traffic and a generic box that gets ignored.

How Open Graph Tags Work

When someone shares your page on Facebook, LinkedIn, or Twitter, the platform sends a crawler to fetch your page. The crawler looks for Open Graph meta tags in your HTML head section. These tags provide structured data about your page: title, description, image, URL, and content type. The social platform then uses this data to construct the preview card.

If Open Graph tags are missing, the platform falls back to other meta tags (like title and description) or scrapes content from your page body. This fallback process is unreliable — it might grab a navigation menu item, a sidebar heading, or random text from your content.

The 7 Essential Open Graph Tags

1. og:title

The title displayed in the social media preview card. Keep it under 60 characters to prevent truncation. Include your primary keyword for discoverability. Make it compelling — this is your headline in the social feed.

Example: <meta property="og:title" content="25 Free SEO Tools Every Small Business Needs in 2026">

2. og:description

The description text shown below the title. Keep it under 160 characters. Write it as ad copy — your goal is to convince people to click. Include a clear value proposition and call to action.

Example: <meta property="og:description" content="Discover the best free SEO tools for keyword research, on-page optimization, and technical SEO. No sign-up required.">

3. og:image

The image displayed in the preview card. This is the most impactful OG tag — visual content drives engagement. Use 1200x630 pixels for optimal display across all platforms. Keep file sizes under 1MB for fast loading.

Best practices: Use JPG for photographs, PNG for graphics with text. Include your brand logo or post title as text overlay. Ensure the image works on both light and dark backgrounds.

4. og:url

The canonical URL of your page. Always use the full, absolute URL including https://. This tag helps social platforms deduplicate content and attribute engagement to the correct URL.

5. og:type

Specifies the content type. Use "article" for blog posts, "website" for homepages, "product" for product pages, and "video" for video content. The type determines which additional properties social platforms expect.

6. og:site_name

Your website or brand name. This appears below the preview card on some platforms. Keep it consistent across all pages.

7. og:locale

Specifies the language and region. Use "en_US" for American English, "en_GB" for British English. This helps platforms serve your content to the right audience.

Twitter Card Tags (X Tags)

Twitter (now X) uses its own meta tags in addition to Open Graph tags. Twitter falls back to OG tags if its own tags are missing, but dedicated Twitter tags give you more control:

• twitter:card: Use "summary_large_image" for the best visual presentation (shows large image). Use "summary" for small image cards.
• twitter:site: Your brand's Twitter handle (e.g., @kwordseo)
• twitter:creator: The author's Twitter handle
• twitter:title: Overrides og:title for Twitter specifically
• twitter:description: Overrides og:description for Twitter
• twitter:image: Overrides og:image for Twitter

Platform-Specific Requirements

Facebook and Instagram

Facebook recommends 1200x630px images. Maximum file size: 8MB. Supported formats: JPG, PNG. Title: 60 characters max. Description: 125 characters max ( truncates after). Facebook caches OG data for 24 hours — use the Sharing Debugger to force a refresh after changes.

LinkedIn

LinkedIn recommends 1200x627px images. Maximum file size: 5MB. Title: 70 characters max. Description: 150 characters max. LinkedIn is more lenient with image dimensions than Facebook.

Twitter/X

Twitter recommends 1200x630px images for large summary cards. Maximum file size: 5MB. Title: 70 characters max. Description: 200 characters max. Twitter supports animated GIFs for cards.

Pinterest

Pinterest recommends vertical images (1000x1500px) but also accepts landscape (1200x630px). Maximum file size: 10MB. Pinterest auto-pulls OG data for Pins.

Common Open Graph Mistakes

Mistake 1: Missing og:image. This is the most damaging oversight. Without an image, social previews look empty and unprofessional. Every page should have a unique, optimized OG image.

Mistake 2: Using the same og:image on every page. Each page should have a unique image that represents its specific content. Reusing the same image makes all your social previews look identical.

Mistake 3: Image dimensions wrong. Images that are too small get stretched or cropped awkwardly. Always use 1200x630px.

Mistake 4: Duplicate og:title across pages. Each page needs a unique title that accurately represents its content.

Mistake 5: Not testing before publishing. Always validate your tags using platform debugging tools before going live.

How to Generate Open Graph Tags

Our free OG Tag Generator creates complete Open Graph and Twitter Card meta tags instantly. Enter your page title, description, URL, and image URL. The tool generates copy-paste ready HTML that you can add to your page head section.

Testing Your Open Graph Tags

Facebook Sharing Debugger: Enter your URL at developers.facebook.com/tools/debug/ to see exactly how Facebook will preview your page. The debugger also shows any errors or warnings.

Twitter Card Validator: Enter your URL at cards-dev.twitter.com/validator to preview your Twitter card. This shows whether your large image card renders correctly.

LinkedIn Post Inspector: Enter your URL at linkedin.com/post-inspector/ to see LinkedIn's preview. LinkedIn caches aggressively — use the inspector to force a re-crawl after changes.

Sources

• Open Graph Protocol — Official Open Graph meta tag specification
• Facebook: Sharing Debugger Documentation — Facebook Open Graph implementation guide
• Twitter: Cards Documentation — Twitter Card meta tag specifications