SEO & Discovery

Open Graph & Social Media Meta Tags

Control how your content appears when shared on social media. Learn Open Graph, Twitter Cards, and other social meta tags for beautiful, engaging social shares.

Why Social Meta Tags Matter

When someone shares your link on Facebook, Twitter, LinkedIn, or other platforms, social meta tags control the title, description, image, and other display elements.

ðŸ“ˆ Higher CTR

Rich previews get 3-5x more clicks

ðŸŽ¨ Brand Control

Control how your brand appears

ðŸ”— More Shares

Attractive previews encourage sharing

ðŸ“Š Better Tracking

Track social media traffic sources

Open Graph Protocol (Facebook, LinkedIn)

Open Graph was created by Facebook and is now used by most social platforms including LinkedIn, Pinterest, and Slack.

Basic Open Graph Tags

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Essential Open Graph tags --&gt;
    <meta property="og:title" content="Free Image Compressor - Reduce JPG, PNG Size">
    <meta property="og:description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality. Fast, secure, no registration.">
    <meta property="og:image" content="https://www.filefusion.app/images/og-image-compressor.jpg">
    <meta property="og:url" content="https://www.filefusion.app/tools/image-compressor">
    <meta property="og:type" content="website">
    
    <!-- Optional but recommended --&gt;
    <meta property="og:site_name" content="FileFusion">
    <meta property="og:locale" content="en_US">
</head>
<body>
    <!-- Content --&gt;
</body>
</html>

Open Graph Tag Reference

Tag	Description	Required
`og:title`	Title of your content (60-90 chars)	âœ… Yes
`og:description`	Description (155-200 chars)	âœ… Yes
`og:image`	Image URL (1200x630px optimal)	âœ… Yes
`og:url`	Canonical URL of page	âœ… Yes
`og:type`	Content type (website, article, etc.)	âœ… Yes
`og:site_name`	Name of website	Recommended
`og:locale`	Language/locale (en_US, es_ES)	Optional

Open Graph Image Best Practices

HTML

<!-- Optimal image specifications --&gt;
<meta property="og:image" content="https://www.filefusion.app/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FileFusion - Free Online File Tools">
<meta property="og:image:type" content="image/jpeg">

<!-- Multiple images (platforms pick best) --&gt;
<meta property="og:image" content="https://www.filefusion.app/images/og-large.jpg">
<meta property="og:image" content="https://www.filefusion.app/images/og-square.jpg">

Image Requirements:

ðŸ“ Size: 1200x630px (1.91:1 ratio) recommended
ðŸ“ Minimum: 600x315px
ðŸ“¦ File size: Less than 8MB
ðŸŽ¨ Format: JPG or PNG (no transparency on Facebook)
ðŸ“± Safe zone: Keep important elements in center 1:1 square
ðŸ“ Text: Minimal text (20% rule no longer enforced but recommended)
ðŸ”’ HTTPS: Must be served over HTTPS

Twitter Cards

Twitter uses its own meta tags but falls back to Open Graph if Twitter tags aren't present.

Summary Card with Large Image

HTML

<head>
    <!-- Twitter Card tags --&gt;
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@filefusion">
    <meta name="twitter:creator" content="@johndoe">
    <meta name="twitter:title" content="Free Image Compressor - Reduce JPG, PNG Size">
    <meta name="twitter:description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality.">
    <meta name="twitter:image" content="https://www.filefusion.app/images/twitter-card.jpg">
    <meta name="twitter:image:alt" content="Image compression comparison showing before and after">
    
    <!-- Open Graph (Twitter uses as fallback) --&gt;
    <meta property="og:title" content="Free Image Compressor - Reduce JPG, PNG Size">
    <meta property="og:description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality.">
    <meta property="og:image" content="https://www.filefusion.app/images/og-image.jpg">
    <meta property="og:url" content="https://www.filefusion.app/tools/image-compressor">
</head>

Twitter Card Types

summary: Small image (1:1 ratio, 144x144px min)
summary_large_image: Large image (2:1 ratio, 300x157px min, 4096x4096px max)
app: Mobile app download
player: Video/audio player

Article-Specific Tags

For Blog Posts and Tutorials

HTML

<head>
    <!-- Article type --&gt;
    <meta property="og:type" content="article">
    
    <!-- Article metadata --&gt;
    <meta property="article:published_time" content="2024-01-15T08:00:00+00:00">
    <meta property="article:modified_time" content="2024-01-20T10:30:00+00:00">
    <meta property="article:author" content="https://www.filefusion.app/authors/jane-smith">
    <meta property="article:section" content="Tutorials">
    <meta property="article:tag" content="Image Compression">
    <meta property="article:tag" content="Web Performance">
    <meta property="article:tag" content="SEO">
    
    <!-- Publisher info --&gt;
    <meta property="og:site_name" content="FileFusion">
    
    <!-- Author social profiles --&gt;
    <meta name="twitter:creator" content="@janesmith">
</head>

Video Meta Tags

HTML

<head>
    <!-- Video type --&gt;
    <meta property="og:type" content="video.other">
    
    <!-- Video URL --&gt;
    <meta property="og:video" content="https://www.filefusion.app/videos/tutorial.mp4">
    <meta property="og:video:secure_url" content="https://www.filefusion.app/videos/tutorial.mp4">
    <meta property="og:video:type" content="video/mp4">
    <meta property="og:video:width" content="1920">
    <meta property="og:video:height" content="1080">
    
    <!-- Video thumbnail --&gt;
    <meta property="og:image" content="https://www.filefusion.app/videos/thumbnail.jpg">
    
    <!-- Twitter player card --&gt;
    <meta name="twitter:card" content="player">
    <meta name="twitter:player" content="https://www.filefusion.app/videos/player.html">
    <meta name="twitter:player:width" content="1280">
    <meta name="twitter:player:height" content="720">
</head>

Complete Social Media Template

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Basic SEO --&gt;
    <title>Free Image Compressor - Reduce JPG, PNG Size | FileFusion</title>
    <meta name="description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality. Fast, secure, no registration.">
    <link rel="canonical" href="https://www.filefusion.app/tools/image-compressor">
    
    <!-- Open Graph / Facebook --&gt;
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.filefusion.app/tools/image-compressor">
    <meta property="og:title" content="Free Image Compressor - Reduce JPG, PNG Size">
    <meta property="og:description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality. Fast, secure, no registration.">
    <meta property="og:image" content="https://www.filefusion.app/images/og-compressor.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="FileFusion Image Compressor Tool">
    <meta property="og:site_name" content="FileFusion">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter --&gt;
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@filefusion">
    <meta name="twitter:creator" content="@filefusion">
    <meta name="twitter:title" content="Free Image Compressor - Reduce JPG, PNG Size">
    <meta name="twitter:description" content="Compress images online for free. Reduce file sizes by up to 80% without losing quality.">
    <meta name="twitter:image" content="https://www.filefusion.app/images/twitter-compressor.jpg">
    <meta name="twitter:image:alt" content="Image compression tool interface">
    
    <!-- Additional platforms --&gt;
    <meta property="fb:app_id" content="your-facebook-app-id">
    <meta name="pinterest-rich-pin" content="true">
    
    <!-- Favicon --&gt;
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
    <!-- Content --&gt;
</body>
</html>

Platform-Specific Considerations

Facebook

ðŸ“ Image: 1200x630px optimal
ðŸ”„ Cache: Facebook caches for 7 days (use Sharing Debugger to refresh)
ðŸ“± App ID: Add fb:app_id for Facebook Insights
âœ‚ï¸ Text: Keep title under 60 characters, description under 200

Twitter

ðŸ“ Large image: 2:1 ratio (800x418px min)
ðŸ“ Summary: 1:1 ratio (144x144px min)
ðŸ·ï¸ Username: Use @username format
âœ‚ï¸ Text: Title 70 chars max, description 200 chars max

ðŸ“ Image: 1200x627px optimal
ðŸ“ Uses Open Graph tags
âœ‚ï¸ Title: 150 characters max
âœ‚ï¸ Description: 256 characters max

ðŸ“ Image: 1000x1500px optimal (2:3 ratio)
ðŸ“Œ Vertical images perform best
ðŸ”– Add meta name="pinterest-rich-pin"

ðŸ“± Uses Open Graph tags
ðŸ“ Image: 300x300px min
ðŸ”— Shows title, description, and thumbnail

Testing Social Meta Tags

Testing Tools

Facebook Sharing Debugger:
https://developers.facebook.com/tools/debug/
Test and refresh Facebook cache
Twitter Card Validator:
https://cards-dev.twitter.com/validator
Preview Twitter cards
LinkedIn Post Inspector:
https://www.linkedin.com/post-inspector/
Test LinkedIn previews
Open Graph Checker:
https://www.opengraph.xyz/
Test multiple platforms at once

Common Mistakes

âŒ Mistake 1: Using Relative URLs

HTML

<!-- âŒ Wrong --&gt;
<meta property="og:image" content="/images/og-image.jpg">

<!-- âœ… Correct --&gt;
<meta property="og:image" content="https://www.filefusion.app/images/og-image.jpg">

âŒ Mistake 2: Wrong Image Size

HTML

<!-- âŒ Too small (will be blurry) --&gt;
<meta property="og:image" content="...logo-200x200.png">

<!-- âœ… Optimal size --&gt;
<meta property="og:image" content="...og-image-1200x630.jpg">

âŒ Mistake 3: No Image Alt Text

HTML

<!-- âŒ Missing alt --&gt;
<meta property="og:image" content="...image.jpg">

<!-- âœ… With alt text --&gt;
<meta property="og:image" content="...image.jpg">
<meta property="og:image:alt" content="Description of image">

âŒ Mistake 4: Same Tags for All Pages

HTML

<!-- âŒ Generic title for all pages --&gt;
<meta property="og:title" content="FileFusion">

<!-- âœ… Page-specific title --&gt;
<meta property="og:title" content="Image Compressor - FileFusion">

âŒ Mistake 5: Not Testing

Always test your social tags before sharing!

Best Practices Checklist

â˜‘ Use absolute URLs (not relative)
â˜‘ Optimize images (1200x630px for Facebook/LinkedIn)
â˜‘ Include Twitter Card tags
â˜‘ Add image alt text (og:image:alt)
â˜‘ Keep titles under 60 characters
â˜‘ Keep descriptions under 200 characters
â˜‘ Use HTTPS for all URLs
â˜‘ Unique tags for each page
â˜‘ Test with platform-specific tools
â˜‘ Include og:type (website, article, etc.)
â˜‘ Add fb:app_id for Facebook Insights
â˜‘ Use meaningful, descriptive text

What's Next?

Learn about HTML5 APIs like Geolocation, Web Storage, and Drag & Drop.

Next: HTML5 Geolocation API â†’

Open Graph & Social Media Meta Tags

Why Social Meta Tags Matter

ðŸ“ˆ Higher CTR

ðŸŽ¨ Brand Control

ðŸ”— More Shares

ðŸ“Š Better Tracking

Open Graph Protocol (Facebook, LinkedIn)

Basic Open Graph Tags

Open Graph Tag Reference

Open Graph Image Best Practices

Image Requirements:

Twitter Cards

Summary Card with Large Image

Twitter Card Types

Article-Specific Tags

For Blog Posts and Tutorials

Video Meta Tags

Complete Social Media Template

Platform-Specific Considerations

Facebook

Twitter

LinkedIn

Pinterest

WhatsApp

Testing Social Meta Tags

Testing Tools

Common Mistakes

âŒ Mistake 1: Using Relative URLs

âŒ Mistake 2: Wrong Image Size

âŒ Mistake 3: No Image Alt Text

âŒ Mistake 4: Same Tags for All Pages

âŒ Mistake 5: Not Testing

Best Practices Checklist

What's Next?

âŒ Mistake 1: Using Relative URLs

âŒ Mistake 2: Wrong Image Size

âŒ Mistake 3: No Image Alt Text

âŒ Mistake 4: Same Tags for All Pages

âŒ Mistake 5: Not Testing