How to Create Open Graph Meta Tags
When you share a link on social media, the preview card — title, image, description — is controlled by Open Graph meta tags. Without them, platforms guess what to show, often with poor results. This guide explains how to set them up correctly.
When You Need OG Tags
- Launching a website or blog and wanting control over social previews
- Sharing content on Facebook, Twitter, LinkedIn, or Slack
- Marketing campaigns where link appearance matters
- Fixing broken or missing social share previews
- E-commerce product pages that need rich link previews
The Essential OG Tags
Step 1: Add the Required Tags
Every page should have at minimum these four OG tags in the <head>:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/page" />Step 2: Add Twitter Card Tags
For Twitter/X, add a twitter:card tag to control the preview layout. Use summary_large_image for a large banner or summary for a smaller square thumbnail.
Step 3: Set the Right Image
Use a 1200×630px image for best results. The image URL must be an absolute URL (not relative). Test that the image loads quickly — slow images may not appear in previews.
Step 4: Generate and Preview
Use our Open Graph Generator to fill in your details and see Facebook and Twitter previews instantly. Copy the generated HTML and paste it into your page's <head>.
Tips
- Keep titles under 60 characters and descriptions under 155 characters to avoid truncation
- After deploying OG tags, use the OG Meta Previewer to verify they're working on your live URL
- Facebook caches OG data aggressively — use their Sharing Debugger to force a re-scrape after updates
- Combine OG tags with a proper robots.txt and heading structure for complete SEO coverage
FAQ
What are Open Graph meta tags?
Open Graph meta tags are HTML meta elements that control how your page appears when shared on social media. They define the title, description, image, and URL shown in link previews on Facebook, LinkedIn, Slack, Discord, and other platforms.
What is the difference between OG tags and Twitter Card tags?
Open Graph tags (og:title, og:description, etc.) were created by Facebook and are used by most platforms. Twitter Card tags (twitter:card, twitter:title) are Twitter-specific. Twitter falls back to OG tags when its own tags are missing, but having both ensures the best display everywhere.
What size should my OG image be?
The recommended size is 1200×630 pixels with an aspect ratio of 1.91:1. This works well on Facebook, LinkedIn, and Twitter (summary_large_image). Keep important content centered — some platforms crop the edges.
Do OG tags affect SEO?
OG tags don't directly affect search rankings, but they significantly impact click-through rates from social media. A compelling title, description, and image in link previews drive more traffic, which indirectly benefits SEO.
Try It Now
Ready to create your OG tags? Open the Open Graph Generator — it works entirely in your browser with no sign-up required.