search

tyaga001 / devtoolsacademy

everything about awesome developer tools
https://www.devtoolsacademy.com/
Creative Commons Zero v1.0 Universal
38 stars 10 forks source link

Implement dynamic social media cards and openGraph metadata #28

Open tyaga001 opened 6 days ago

tyaga001 commented 6 days ago

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

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

2. Dynamic Generation

3. Blog Post Integration

4. Testing & Validation

Technical Requirements

Image Specifications

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

Testing Tools

Resources

Priority: High