Open Graph & Twitter Cards

Open Graph and Twitter Card tags control how your content appears when shared on social media. A well-crafted social preview can significantly increase click-through rates.

Open Graph Metadata

Open Graph tags control how your content appears on Facebook, LinkedIn, and other platforms.

export const metadata: Metadata = {
  openGraph: {
    title: 'SEO Mastery for Next.js Developers',
    description: 'The complete guide to search engine optimization in Next.js',
    url: 'https://example.com/courses/seo-nextjs',
    siteName: 'My Learning Platform',
    images: [
      {
        url: 'https://example.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'SEO Mastery Course Cover',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

Open Graph Types

Different content types have specific Open Graph properties:

Website (default)

openGraph: {
  type: 'website',
  // Basic properties
}

Article

openGraph: {
  type: 'article',
  publishedTime: '2024-01-15T00:00:00.000Z',
  modifiedTime: '2024-01-20T00:00:00.000Z',
  authors: ['John Doe'],
  tags: ['SEO', 'Next.js', 'Web Development'],
}

Profile

openGraph: {
  type: 'profile',
  firstName: 'John',
  lastName: 'Doe',
  username: 'johndoe',
}

Open Graph Images

The OG image is crucial for social sharing. Create images that are:

• 1200x630 pixels (recommended size)
• Visually compelling with clear text
• Representative of your content

// Single image
openGraph: {
  images: [
    {
      url: 'https://example.com/og-large.png',
      width: 1200,
      height: 630,
      alt: 'Course cover image',
    },
  ],
}

// Multiple images (platforms choose the best fit)
openGraph: {
  images: [
    {
      url: 'https://example.com/og-large.png',
      width: 1200,
      height: 630,
      alt: 'Course cover image',
    },
    {
      url: 'https://example.com/og-square.png',
      width: 600,
      height: 600,
      alt: 'Course cover image (square)',
    },
  ],
}

Twitter Card Metadata

Twitter (X) uses its own meta tags, though it falls back to Open Graph if Twitter-specific tags aren't present.

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'SEO Mastery for Next.js Developers',
    description: 'The complete guide to SEO in Next.js',
    images: ['https://example.com/twitter-image.png'],
    creator: '@yourusername',
    site: '@yoursite',
  },
}

Twitter Card Types

Type	Description	Image Size
summary	Small square image with title and description	144x144 to 4096x4096
summary_large_image	Large rectangular image (recommended)	300x157 to 4096x4096
player	For video/audio content	Varies
app	For mobile app promotion	Varies

Complete Social Metadata Example

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

type Props = {
  params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  const canonicalUrl = `https://example.com/blog/${slug}`

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: canonicalUrl,
      siteName: 'My Blog',
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      locale: 'en_US',
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author.name],
      tags: post.tags,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      creator: '@authorhandle',
    },
    alternates: {
      canonical: canonicalUrl,
    },
  }
}

Testing Your Social Metadata

Facebook Sharing Debugger

Test how your page appears on Facebook: https://developers.facebook.com/tools/debug

• Enter your URL
• See the preview
• Clear cache if needed

Twitter Card Validator

Test your Twitter Cards: https://cards-dev.twitter.com/validator

LinkedIn Post Inspector

Test LinkedIn previews: https://www.linkedin.com/post-inspector

Browser DevTools

View the rendered HTML to verify meta tags:

<head>
  <title>Your Page Title | Site Name</title>
  <meta name="description" content="Your description here">
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Your description">
  <meta property="og:image" content="https://example.com/og-image.png">
  <meta name="twitter:card" content="summary_large_image">
  <!-- ... -->
</head>

Common Issues and Solutions

Image Not Appearing

• Ensure the image URL is absolute (not relative)
• Check image dimensions meet requirements
• Verify the image is publicly accessible

Old Preview Showing

• Social platforms cache previews
• Use the debugging tools to clear cache
• Wait for cache to expire (varies by platform)

Wrong Title/Description

• Check for conflicting metadata
• Ensure OG tags override defaults appropriately
• Verify template inheritance

Summary

In this lesson, you learned:

• Open Graph metadata for social sharing
• Different OG types (website, article, profile)
• Creating effective OG images
• Twitter Card configuration
• Complete social metadata implementation
• Testing tools for social previews

In the next module, we'll explore structured data (JSON-LD) to help search engines understand your content at a deeper level.