Implement dynamic social media cards and openGraph metadata

[tyaga001]

Overview

Add proper social media card support for both the main site and blog posts to improve sharing experience across platforms (Twitter, LinkedIn, Facebook, etc.).

Current Issues

• Images not loading in social media previews
• Missing metadata for proper card display
• Inconsistent preview across platforms
• No dynamic image generation for blog posts

Technical Implementation

1. OpenGraph Metadata Setup

interface OpenGraphMetadata {
  title: string;
  description: string;
  url: string;
  siteName: string;
  images: Array<{
    url: string;
    width: number;
    height: number;
    alt: string;
  }>;
  type: 'website' | 'article';
  locale: string;
}

// Next.js Metadata Configuration
export const metadata = {
  metadataBase: new URL('https://devtoolsacademy.com'),
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://devtoolsacademy.com',
    siteName: 'DevTools Academy',
    images: [{
      url: '/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'DevTools Academy'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    site: '@devtoolsacademy',
    creator: '@devtoolsacademy'
  }
};

2. Dynamic Image Generation

interface SocialCardProps {
  title: string;
  description?: string;
  type: 'blog' | 'main' | 'comparison';
  imageUrl?: string;
}

Implementation Steps

1. Base Setup

• Configure metadata in Next.js
• Set up default OpenGraph images
• Implement Twitter card metadata
• Add Facebook metadata

2. Dynamic Generation

• Set up dynamic image generation using @vercel/og
• Create template for blog posts
• Create template for comparison posts
• Create template for main pages

3. Blog Post Integration

• Extract metadata from MDX frontmatter
• Generate unique images for each post
• Cache generated images
• Add fallback images

4. Testing & Validation

• Test across all major platforms:
  • Twitter
  • LinkedIn
  • Facebook
  • Slack
• Validate using platform tools
• Test image loading performance

Technical Requirements

Image Specifications

• Size: 1200x630px (optimal for most platforms)
• Format: .jpg/.png
• Max file size: 1MB
• Loading time: <200ms

Metadata Implementation

// Blog post metadata
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author],
      images: [{
        url: `/api/og?title=${encodeURIComponent(post.title)}`,
        width: 1200,
        height: 630,
        alt: post.title
      }]
    }
  };
}

Acceptance Criteria

• Social cards display correctly on all major platforms
• Images load quickly and reliably
• Dynamic generation works for all post types
• Proper fallbacks in place
• Caching implemented for performance
• All metadata validates in testing tools

Testing Tools

• Twitter Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector
• OpenGraph Debugger

Resources

• OpenGraph Protocol
• Twitter Card Docs
• Vercel OG Image Generation

Priority: High

[faisal004]

hi @tyaga001 can I work on this?

[tyaga001]

@faisal004 yes pls go ahead.

[faisal004]

@tyaga001 , SInce there is no og-image provided I made using a tool . You can check og-image on this url - https://www.opengraph.xyz/url/https%3A%2F%2Fdevtoolsacademy-phi.vercel.app%2F
https://devtoolsacademy-phi.vercel.app

Should I continue with this approach or do I need to change something?

[tyaga001]

@faisal004 good to go for now

[faisal004]

OK @tyaga001

[faisal004]

hi @tyaga001 I have raised the pr #56

[tyaga001]

@nirnejak pls take a look at this PR as well.