OG Images for YouTube Channels: Make Your Video Links Pop When Shared

YouTube's own OG tags

YouTube itself generates OG tags for every video and channel page. When someone shares a YouTube link on Twitter, Discord, or Slack, the platform shows the video thumbnail, title, and description automatically.

This guide covers the adjacent use cases where you control the OG tags:

• Your own website/blog that embeds or links to your videos
• A custom video landing page you're building
• A content aggregator or portfolio that references YouTube videos
• A course platform hosting YouTube videos

Using YouTube thumbnails as OG images

YouTube exposes public thumbnail URLs for every video. Use them as your OG images on pages that feature a specific video:

// YouTube thumbnail URL formats:
// Default (120×90): https://img.youtube.com/vi/{VIDEO_ID}/default.jpg
// Medium (320×180): https://img.youtube.com/vi/{VIDEO_ID}/mqdefault.jpg
// High (480×360):   https://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg
// SD (640×480):     https://img.youtube.com/vi/{VIDEO_ID}/sddefault.jpg
// Max resolution:   https://img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg

// Use maxresdefault for OG images when available (1280×720)
const videoId = "dQw4w9WgXcQ";
const ogImageUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

// In your metadata:
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: ogImageUrl,
        width: 1280,
        height: 720,
        alt: "Video thumbnail: Getting Started with Next.js",
      },
    ],
  },
};

Note: maxresdefault.jpg may return a 404 if the creator hasn't uploaded a custom thumbnail. Fall back to hqdefault.jpg.

og:video for video pages

For pages that feature a video as the primary content, add og:videoto enable rich video previews on Facebook and some other platforms:

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://www.youtube.com/embed/VIDEO_ID" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:image" content="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" />

<!-- Twitter player card (shows an embedded player on Twitter) -->
<meta name="twitter:card" content="player" />
<meta name="twitter:player" content="https://www.youtube.com/embed/VIDEO_ID" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />

Custom OG images for video content pages

If you want more control than a raw YouTube thumbnail, generate a composite OG image that includes your branding:

// app/api/og/route.tsx — composite OG with video thumbnail
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") || "Watch Now";
  const videoId = searchParams.get("vid") || "";
  
  const thumbnailUrl = videoId
    ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
    : null;

  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          background: "#0f172a",
          width: "100%",
          height: "100%",
          position: "relative",
        }}
      >
        {/* Background thumbnail (blurred) */}
        {thumbnailUrl && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={thumbnailUrl}
            style={{
              position: "absolute",
              width: "100%",
              height: "100%",
              objectFit: "cover",
              opacity: 0.2,
            }}
            alt=""
          />
        )}
        
        {/* Content overlay */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            position: "absolute",
            bottom: 60,
            left: 80,
            right: 80,
          }}
        >
          <div style={{ fontSize: 20, color: "#f87171", fontWeight: 700, marginBottom: 12 }}>
            ▶ VIDEO
          </div>
          <div style={{ fontSize: 52, fontWeight: 900, color: "#fff", lineHeight: 1.2 }}>
            {title}
          </div>
          <div style={{ fontSize: 22, color: "#94a3b8", marginTop: 16 }}>
            Your Channel Name
          </div>
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Platform-specific notes

• Twitter/X: Use summary_large_image for still-image cards. player card requires Twitter approval for new domains.
• Discord: Discord shows video previews for YouTube links natively. For your own domain, use og:image + og:video.
• Slack: Slack unfurls og:image and title. Video embeds are not shown.
• LinkedIn: Uses og:image, ignores og:video for preview generation.