Open Graph Meta Tags: The Complete Guide for Social Media
What Are Open Graph Meta Tags?
Open Graph (OG) meta tags are HTML tags placed in the <head> of your webpage that control how your content appears when shared on social media platforms. Originally created by Facebook in 2010, Open Graph meta tags are now used by LinkedIn, Pinterest, Discord, Slack, WhatsApp, and many other platforms that display link previews.
Without Open Graph tags, social platforms attempt to generate a preview automatically by scraping your page title, description, and the first image they find. The results are often wrong: a cropped logo instead of a featured image, a truncated title, or a generic description pulled from boilerplate text.
With properly configured Open Graph meta tags, you control the exact title, description, image, and URL that appear in every link preview, making your shared content more clickable and professional.
Essential Open Graph Tags
og:title
The title displayed in the link preview. It does not need to match your <title> tag. Optimize it for social engagement:
<meta property="og:title" content="10 CSS Tips That Will Save You Hours">Best practices:
- Keep it under 60 characters to avoid truncation.
- Front-load important words.
- Make it compelling and click-worthy without being clickbait.
og:description
A brief description shown below the title in the preview:
<meta property="og:description" content="Practical CSS techniques for layout, animations, and responsive design that experienced developers swear by.">Best practices:
- Keep it under 155 characters.
- Summarize the value the reader will get.
- Do not duplicate the title.
og:image
The preview image. This is the single most impactful Open Graph tag because images dominate the visual space of social previews:
<meta property="og:image" content="https://example.com/images/css-tips-og.jpg">Best practices:
- Use 1200 x 630 pixels for optimal display across platforms.
- Always use an absolute URL (full
https://path). - Ensure the image file is under 5MB (under 1MB preferred).
- Use a 1.91:1 aspect ratio.
- Include readable text or a compelling visual, not just your logo.
- Test how the image looks when cropped to a square (Twitter/X) and landscape (Facebook/LinkedIn).
og:url
The canonical URL of the page. This consolidates share counts when the same page is shared with different URL parameters:
<meta property="og:url" content="https://example.com/blog/css-tips">og:type
Defines the type of content. The most common value is website for homepage and article for blog posts:
<meta property="og:type" content="article">Other valid types include product, video.other, music.song, and profile.
og:site_name
The name of your website:
<meta property="og:site_name" content="seokit.tools">This appears as secondary text in some platform previews.
Article-Specific Tags
For blog posts and articles, additional Open Graph tags provide richer context:
<meta property="article:published_time" content="2026-04-05T00:00:00Z">
<meta property="article:modified_time" content="2026-04-05T00:00:00Z">
<meta property="article:author" content="https://example.com/about">
<meta property="article:section" content="Web Development">
<meta property="article:tag" content="CSS">
<meta property="article:tag" content="Frontend">These tags help platforms categorize your content and can influence how it appears in news feeds.
Twitter/X Card Tags
Twitter (now X) uses its own card markup in addition to Open Graph. If Twitter-specific tags are not present, Twitter falls back to Open Graph tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="10 CSS Tips That Will Save You Hours">
<meta name="twitter:description" content="Practical CSS techniques that experienced developers swear by.">
<meta name="twitter:image" content="https://example.com/images/css-tips-og.jpg">The twitter:card value determines the preview format:
summary— Small image thumbnail with title and description.summary_large_image— Large image above the title and description. This is the most visually impactful format and recommended for most content.
Complete Open Graph Template
Here is a complete template you can use for any page:
<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description under 155 characters.">
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page-path">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A compelling description.">
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg">Use the seokit meta tag generator to generate this markup with correct formatting for any page.
Debugging Open Graph Previews
After implementing your Open Graph tags, you need to verify they work correctly. Social platforms aggressively cache link previews, so testing is essential.
Facebook Sharing Debugger
Visit the Facebook Sharing Debugger and paste your URL. It shows the exact title, description, and image Facebook has cached. Click “Scrape Again” to force Facebook to re-fetch your tags after making changes.
Common issues the debugger reveals:
- Image too small (minimum 200 x 200 pixels, recommended 1200 x 630).
- Missing required tags.
- Incorrect image URL (relative instead of absolute).
Twitter/X Card Validator
Twitter’s Card Validator has been deprecated but sharing a link in a draft tweet still shows the preview. Verify that your twitter:card type is correct and the image displays as expected.
LinkedIn Post Inspector
LinkedIn’s Post Inspector tool scrapes your URL and shows the cached preview. Use it to clear LinkedIn’s cache after updating your Open Graph tags.
seokit OG Preview Tool
The seokit OG preview tool lets you enter any URL and instantly see how the Open Graph tags will render across Facebook, Twitter/X, and LinkedIn, without needing to log in to each platform’s debugging tool.
Common Open Graph Mistakes
Relative Image URLs
<!-- Wrong -->
<meta property="og:image" content="/images/og-image.jpg">
<!-- Correct -->
<meta property="og:image" content="https://example.com/images/og-image.jpg">Social platforms fetch images from external servers. They cannot resolve relative paths.
Missing og:image
Without an og:image, platforms either show no image or pick a random image from your page (often a tiny icon or tracking pixel). Always specify an image.
Forgetting to Clear Cache
After updating Open Graph tags, the old preview may persist for days or weeks. Always use each platform’s debugging/scraping tool to force a cache refresh.
Duplicate Tags
Including Open Graph tags both manually and through a CMS plugin (like Yoast SEO) results in duplicate tags. Search for duplicate meta properties in your HTML source.
Wrong Image Dimensions
An image that is too narrow will be cropped awkwardly. An image that is too tall will lose its sides. Stick to 1200 x 630 for consistent results across platforms.
Open Graph for E-Commerce
Product pages benefit from additional Open Graph tags:
<meta property="og:type" content="product">
<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="USD">These tags can enhance how product links appear in some platforms, though support varies.
Conclusion
Open Graph meta tags take minutes to implement but dramatically improve how your content appears across every platform where links are shared. A compelling image with a well-crafted title and description can significantly increase click-through rates from social shares.
Use the seokit OG preview tool to test your current Open Graph implementation, the meta tag generator to create the correct markup, and the schema generator to add structured data alongside your social tags for maximum visibility.