Open Graph Tag Generator

Generate Open Graph (OG) and Twitter Card meta tags to control exactly how your content appears when shared on Facebook, Twitter/X, LinkedIn, Pinterest, and other social platforms. Copy-paste ready HTML code.

Recommended size: 1200x630 pixels (minimum 600x315)
Open Graph + Twitter Card Tags

      

What Are Open Graph Tags?

Open Graph (OG) tags are a protocol originally created by Facebook that allows web pages to control how their content appears when shared on social media. When you share a link on Facebook, LinkedIn, or other platforms, the platform reads the OG tags to determine what title, description, image, and URL to display in the share card.

Without Open Graph tags, social platforms try to guess which image and text to show — often resulting in broken previews, wrong images, or truncated descriptions. With proper OG tags, you have full control over how your content is presented to every person who sees it shared.

Complete Guide to Open Graph Tags

og:title

The title displayed in the social share card. This can be different from your HTML <title> tag. Best practices:

  • Keep it under 60 characters to avoid truncation.
  • Make it compelling and clickable — it's the first thing people see.
  • Don't include your brand name unless it adds value (the og:site_name tag handles branding).

og:description

The description shown below the title in the share card. Keep it between 100–200 characters. Write it as a hook that makes people want to click through. Unlike meta descriptions, OG descriptions have more flexibility since they're optimized for social engagement rather than search engines.

og:image

The image is the most impactful element of a social share card — it takes up the most visual space and drives the most clicks. Guidelines:

  • Recommended size: 1200×630 pixels (1.91:1 aspect ratio).
  • Minimum size: 600×315 pixels.
  • Format: JPEG or PNG. Keep file size under 8MB.
  • Text on images: If your image has text, keep it within the center 80% — edges may be cropped on different platforms.
  • Use eye-catching, high-quality images. Generic stock photos perform poorly compared to custom graphics.

og:url

The canonical URL of the shared content. This should be the clean, canonical version of the URL (no tracking parameters, no www, no trailing slash). When multiple shares of the same content use different URLs, the og:url consolidates social signals to one URL.

og:type

Tells platforms what kind of content is being shared. Common types:

  • website — Default for homepages and general pages.
  • article — Blog posts, news articles, and editorial content.
  • product — E-commerce product pages.
  • video.other — Video content pages.

og:site_name

The name of your website or brand. Displayed alongside the URL in share previews. Keep it short and recognizable — your brand name, not a tagline.

Twitter Card Tags

Twitter/X uses its own card system that works alongside Open Graph tags. When Twitter Card tags are present, they take priority over OG tags. When they're absent, Twitter falls back to OG tags.

twitter:card

Two main card types:

  • summary — Small square image with title and description. Good for articles, tools, and general pages.
  • summary_large_image — Large image banner above the title. Significantly higher engagement and click-through rate. Recommended for most content.

twitter:site

Your Twitter/X handle (e.g., @costzap). This attributes the card to your account and can help drive followers.

Platform-Specific OG Image Requirements

  • Facebook: 1200×630px, minimum 200×200px. Images under 600px wide show as small thumbnails.
  • Twitter/X: 1200×628px for summary_large_image, 144×144px minimum for summary.
  • LinkedIn: 1200×627px recommended, minimum 200×200px.
  • Pinterest: 1000×1500px (2:3 ratio, vertical) for best results.
  • WhatsApp: Uses OG image, renders at approximately 300×200px.

How to Debug Open Graph Tags

After adding OG tags, use these official tools to verify they work correctly:

  • Facebook Sharing Debugger — Shows exactly how Facebook renders your URL, and lets you clear cached previews.
  • Twitter Card Validator — Preview how your Twitter card will look before sharing.
  • LinkedIn Post Inspector — Debug LinkedIn share previews and refresh cached OG data.

Social platforms cache OG data aggressively. After updating your tags, use these debugger tools to force a cache refresh — otherwise the old preview may display for days.

Common Open Graph Mistakes

  • Missing og:image — The single biggest mistake. Without an image, share cards look empty and get minimal engagement.
  • Image too small — Images under 600×315px render as tiny thumbnails instead of large previews on Facebook.
  • Using HTTP image URLs — Some platforms reject images served over HTTP. Always use HTTPS.
  • Not testing across platforms — An image that looks great on Facebook may be cropped badly on LinkedIn or Twitter.
  • Duplicate tags — Having multiple og:title or og:image tags confuses platforms. Use only one of each.

Related SEO Tools

Meta Tag Generator — HTML meta tags for SEO | Robots.txt Generator — Crawler control | Keyword Density Checker — Content optimization

Frequently Asked Questions

What are Open Graph tags used for?

Open Graph tags control how your web pages appear when shared on social media. They define the title, image, description, and URL shown in share previews on Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, Discord, and other platforms that support the Open Graph protocol.

What is the best image size for Open Graph?

The recommended OG image size is 1200×630 pixels (1.91:1 aspect ratio). This works well across all major platforms. Minimum size is 600×315px for Facebook large image previews. Always use high-quality JPEG or PNG under 8MB.

Do Open Graph tags affect SEO rankings?

Open Graph tags do not directly affect Google search rankings. However, they indirectly improve SEO by increasing social sharing, driving referral traffic, improving brand visibility, and generating social signals. A well-crafted OG image and title can dramatically increase share rates and clicks.

What's the difference between Open Graph and Twitter Cards?

Open Graph is a protocol by Facebook used by most social platforms. Twitter Cards are Twitter's own system. When both are present, Twitter prioritizes its own tags. When Twitter Card tags are absent, Twitter falls back to Open Graph tags. For maximum compatibility, include both sets.

How do I test my Open Graph tags?

Use Facebook's Sharing Debugger tool to see how Facebook renders your URL. Use Twitter's Card Validator for Twitter previews. Use LinkedIn's Post Inspector for LinkedIn shares. These tools also let you force a cache refresh after updating your tags.

Can I use different titles for SEO and social sharing?

Yes. Your HTML <title> tag is for search engines, while og:title is for social sharing. They can be completely different. This lets you write keyword-optimized titles for Google and more engaging, curiosity-driven titles for social platforms.