Developer Tools March 26, 2026 9 min read

Open Graph Tags Guide: Perfect Social Media Previews

When someone shares your page on Facebook, LinkedIn, Twitter, or Slack, what they see is determined entirely by your Open Graph tags. Without them, social platforms guess - and usually guess wrong. This guide explains every OG tag you need and how to implement them correctly.

By Usman Khan

DevOps & Cybersecurity Engineer · MS Cybersecurity, MS CS · CEH · AWS Certified · 10+ years securing enterprise infrastructure. Editorial standards

The Problem with Missing OG Tags

Share a page without Open Graph tags and the social platform's crawler will try to construct a preview by scraping your HTML. It might use your page title, grab a random image from the page, or show a blank preview with just the URL. The result is a low-quality share that drives fewer clicks.

Pages with properly configured OG tags show:

A custom title tailored for social sharing (separate from your SEO title)
A compelling description up to 300 characters
A specific high-quality image sized for social cards (1200×630px)
The canonical URL you want associated with the page

Studies consistently show that social posts with large images get 2–3x more clicks than those without. OG tags are the mechanism that controls this.

The Four Required Open Graph Tags

These four tags are required for a valid OG object. Every page should have all four:

<!-- Required OG tags -->
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A compelling 1-2 sentence description of this page for social sharing.">
<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:url" content="https://example.com/your-page/">

A few critical rules:

og:url must be an absolute URL, not a relative path
og:image must be an absolute URL. Relative paths like /images/card.jpg will not work
Tags go inside <head>, not <body>
Use property= not name= for OG tags (unlike standard meta tags)

The og:type Tag

The og:type tag tells social platforms what kind of content the page represents. The most common values:

<!-- For regular web pages and homepages -->
<meta property="og:type" content="website">

<!-- For blog posts and news articles -->
<meta property="og:type" content="article">

<!-- For product pages -->
<meta property="og:type" content="product">

<!-- For video pages -->
<meta property="og:type" content="video.other">

Use article for blog posts and news. This unlocks additional tags like article:published_time, article:author, and article:section. Use website for everything else.

OG Image Specifications

The OG image is the most impactful element of a social share. Getting the dimensions wrong results in cropped or blurry images across platforms.

<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text for the image">
<meta property="og:image:type" content="image/jpeg">

Image guidelines by platform:

Facebook / Meta: 1200×630px recommended. Minimum 600×315px. Under 1MB. JPEG or PNG.
Twitter (X): 1200×630px for summary_large_image. 800×800px for square summary card. Under 5MB.
LinkedIn: 1200×628px (very similar to Facebook). PNG preferred for text-heavy images.
Slack: Uses OG image as-is. 1200×630px works well. Slack caches aggressively - see below for cache clearing.

Use a 1200×630px image and you will be safe on every platform. Keep important content (text, logos) in the center 60% to avoid cropping on platforms that display a centered crop for smaller card formats.

Twitter Card Tags

Twitter has its own meta tags in addition to OG tags. Twitter will fall back to OG tags if its own tags are missing, but you should include both for the best results:

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description optimized for Twitter (max 200 chars)">
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg">
<meta name="twitter:image:alt" content="Alt text for the image">

Twitter card types:

summary_large_image - Large image above the title/description. Best for articles and product pages.
summary - Small square thumbnail to the left. Use for general pages.
player - Embedded video player. Requires Twitter approval.
app - For mobile app download pages.

Complete OG Implementation for a Blog Post

<!-- Core OG -->
<meta property="og:type" content="article">
<meta property="og:title" content="Open Graph Tags Guide: Perfect Social Media Previews">
<meta property="og:description" content="Learn how to implement Open Graph tags to control exactly how your pages look when shared on Facebook, LinkedIn, Twitter, and Slack.">
<meta property="og:url" content="https://example.com/blog/open-graph-guide/">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:image" content="https://example.com/images/og-guide-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph tags guide illustration">
<meta property="og:locale" content="en_US">

<!-- Article-specific -->
<meta property="article:published_time" content="2026-03-26T00:00:00Z">
<meta property="article:modified_time" content="2026-03-26T00:00:00Z">
<meta property="article:author" content="https://example.com/about/">
<meta property="article:section" content="Developer Guides">
<meta property="article:tag" content="open graph">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="meta tags">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yoursite">
<meta name="twitter:title" content="Open Graph Tags Guide: Perfect Social Media Previews">
<meta name="twitter:description" content="Control exactly how your pages look when shared on every social platform.">
<meta name="twitter:image" content="https://example.com/images/og-guide-card.jpg">

Generate Meta Tags Instantly

Fill in your page details and our free Meta Tag Generator outputs the complete OG, Twitter Card, and SEO meta tags to copy-paste into your HTML. No guesswork, no mistakes.

Open Meta Tag Generator →

OG Tags for Different Page Types

Homepage

<meta property="og:type" content="website">
<meta property="og:title" content="Your Brand - Tagline Here">
<meta property="og:description" content="One-sentence summary of what you do and who it is for.">
<meta property="og:image" content="https://example.com/images/homepage-og.jpg">
<meta property="og:url" content="https://example.com/">

Product Page

<meta property="og:type" content="product">
<meta property="og:title" content="Product Name - $49">
<meta property="og:description" content="Product's key benefit and main features. Include the price if sharing to a buying audience.">
<meta property="og:image" content="https://example.com/products/widget-og.jpg">
<meta property="product:price:amount" content="49.00">
<meta property="product:price:currency" content="USD">

Clearing Social Media Caches

Social platforms cache OG data aggressively. After updating OG tags, the old preview may persist for hours or days unless you manually clear the cache:

Facebook / Meta: Use the Facebook Sharing Debugger. Paste your URL and click "Scrape Again".
Twitter (X): Use the Twitter Card Validator.
LinkedIn: Use the LinkedIn Post Inspector.
Slack: No official tool. Either wait 30 minutes or share with ?v=2 appended to the URL to force re-fetch.

Step-by-Step: Adding OG Tags to an Existing Page

Identify the canonical URL for the page. This is the URL you want associated with shares - no query strings, no fragments.
Write a social-specific title - 60–90 characters. It can differ from your SEO <title> tag. Make it compelling for a social feed.
Write a social description - 120–200 characters. Summarize the page's value proposition clearly. Avoid trailing ellipsis.
Prepare a 1200×630px image. Use a tool like Canva or Figma. Export as JPEG at 80% quality (keeps size under 300KB). Host it on your CDN or same domain.
Add the tags inside <head> before the closing </head> tag.
Validate with Facebook Debugger - paste the URL and confirm the preview looks correct.
Test on Twitter with the Card Validator.
Share a test post to LinkedIn in a private update to confirm the card renders as expected.

Frequently Asked Questions

What is the difference between og:title and the HTML title tag?

The HTML <title> tag is what appears in browser tabs and is the primary signal for Google search ranking. og:title controls the title shown in social media card previews. They can be different - and often should be. Your SEO title might be "Open Graph Tags Guide | SecureBin.ai" while your OG title is "Open Graph Tags Guide: Perfect Social Media Previews" (more engaging for a social audience, no brand suffix). If og:title is absent, platforms fall back to the <title> tag.

My og:image is not showing on Facebook. What is wrong?

The most common causes: (1) The image URL is relative, not absolute. Must start with https://. (2) The image is blocked by a robots.txt rule or requires authentication. Facebook's crawler must be able to fetch it anonymously. (3) The image is too large (>8MB) or in an unsupported format. (4) The page returns a non-200 HTTP status for the crawler. Use the Facebook Sharing Debugger to see exactly what error Facebook encountered.

Do I need both OG tags and Twitter Card tags?

Twitter reads OG tags as a fallback, so technically you only need OG tags. However, including twitter:card explicitly is recommended because it lets you control the card type (summary_large_image vs summary). Without it, Twitter defaults to summary (small thumbnail), even if you have a large OG image. Always include at least <meta name="twitter:card" content="summary_large_image"> alongside your OG tags.

How often does Facebook re-scrape my OG tags?

Facebook's scraper revisits pages periodically, but with variable frequency based on how often URLs are shared. For popular pages, re-scraping can happen within 24 hours. For rarely-shared pages, it may be days or weeks. If you need to update a preview immediately after changing OG tags, use the Facebook Sharing Debugger's "Scrape Again" button to force an immediate re-fetch and cache invalidation.

Should og:url match the canonical URL?

Yes. og:url should be identical to your <link rel="canonical"> URL. This is the URL Facebook uses to deduplicate social engagement counts - likes and shares from all variants of a URL (with and without query strings, www vs non-www) are aggregated under the og:url. If your canonical is https://example.com/page/, set og:url to the same value.

Use our free tool here → Meta Tag Generator to generate complete OG, Twitter Card, and SEO meta tags for any page in seconds.

Written by Usman Khan

DevOps Engineer | MSc Cybersecurity | CEH | AWS Solutions Architect

Usman has 10+ years of experience securing enterprise infrastructure, managing high-traffic servers, and building zero-knowledge security tools. Read more about the author.