SEO Optimization

Maximize visibility and click-through rates with optimized OG images.

Why OG Images Matter for SEO

Click-Through Rate Impact

Pages with optimized OG images see:

• 40% higher CTR on Twitter
• 25% higher engagement on Facebook
• Better sharing rates across all platforms

Brand Recognition

Consistent, professional OG images:

• Build brand recognition
• Increase trust
• Differentiate from competitors

Complete Meta Tags

Essential Tags

<!-- Title and Description -->
<title>Your Page Title | Brand Name</title>
<meta name="description" content="Compelling description under 160 chars">

<!-- Canonical URL -->
<link rel="canonical" href="https://yoursite.com/page">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Compelling description">
<meta property="og:image" content="https://yoursite.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Brand">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Compelling description">
<meta name="twitter:image" content="https://yoursite.com/og/page.png">

Article-Specific Tags

<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-01-15T10:00:00Z">
<meta property="article:modified_time" content="2024-01-16T14:30:00Z">
<meta property="article:author" content="https://yoursite.com/author/name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="Web Development">

Product-Specific Tags

<meta property="og:type" content="product">
<meta property="product:price:amount" content="99.99">
<meta property="product:price:currency" content="USD">

Image SEO Best Practices

File Naming

Use descriptive, keyword-rich names:

✅ how-to-learn-javascript-og.png
✅ product-wireless-headphones-og.png
❌ og-image-1.png
❌ 123abc.png

Alt Text

While OG images don't need alt text in meta tags, ensure your site's images have proper alt attributes.

Absolute URLs

Always use absolute URLs:

✅ <meta property="og:image" content="https://yoursite.com/og/page.png">
❌ <meta property="og:image" content="/og/page.png">

Content Optimization

Title Best Practices

Do	Don't
Include primary keyword	Stuff keywords
Keep under 60 characters	Use clickbait
Make it compelling	Be vague
Match page content	Mislead users

Description Best Practices

• Include primary and secondary keywords
• Keep under 160 characters
• Include a call to action
• Make it unique for each page

Structured Data

Combine OG images with Schema.org markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "image": "https://yoursite.com/og/article.png",
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-16",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Brand",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  }
}
</script>

Testing & Validation

Tools

1. Facebook Sharing Debugger

   • URL: https://developers.facebook.com/tools/debug/
   • Tests OG tags and image caching

2. Twitter Card Validator

   • URL: https://cards-dev.twitter.com/validator
   • Tests Twitter card rendering

3. LinkedIn Post Inspector

   • URL: https://www.linkedin.com/post-inspector/
   • Tests LinkedIn share preview

4. Google Rich Results Test

   • URL: https://search.google.com/test/rich-results
   • Tests structured data

What to Check

• [ ] Image loads correctly
• [ ] Title displays properly
• [ ] Description is visible
• [ ] No broken URLs
• [ ] Correct image dimensions

Performance Impact

Loading Speed

Fast-loading OG images improve:

• Social sharing experience
• Crawler efficiency
• User perception

Optimization Tips

// Set cache headers
res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800');

// Use CDN
// Serve images from edge locations

// Compress images
// Keep file size under 300KB

Common Issues

Image Not Updating

Platforms cache OG images. Force refresh:

# Facebook
curl -X POST "https://graph.facebook.com?id=YOUR_URL&scrape=true"

Or use the Facebook Debugger's "Scrape Again" button.

Wrong Image Showing

Check for:

1. Multiple og:image tags
2. Incorrect URL
3. Cached old image
4. Image not accessible

Image Too Small

Ensure image is at least:

• 1200×630 for link shares
• 600×315 minimum

Monitoring

Track OG Image Performance

Use UTM parameters in shared URLs:

https://yoursite.com/page?utm_source=twitter&utm_medium=social

Analytics to Watch

• Click-through rate by platform
• Share counts
• Engagement metrics
• Traffic from social referrals

Checklist

• [ ] Unique OG image for each important page
• [ ] All required meta tags present
• [ ] Absolute URLs used
• [ ] Images are 1200×630 pixels
• [ ] File sizes under 300KB
• [ ] Tested on Facebook, Twitter, LinkedIn
• [ ] Structured data implemented
• [ ] Cache headers set
• [ ] Analytics tracking in place