ReviseAlgo Logo

SEO

Open Graph

Learn Open Graph metadata in Next.js, including static images, dynamic OG images, and social sharing previews.

1. Learning Objectives

By the end of this lesson, you will be able to configure Open Graph metadata, add route-specific OG images, generate dynamic images, and debug social preview issues.

Difficulty: Beginner.

2. Prerequisites

  • Metadata API.
  • Static assets.
  • Dynamic route params.

    • 3. Overview

    Open Graph metadata controls how pages appear when shared on social platforms and chat apps. Next.js supports Open Graph through metadata fields and special files like opengraph-image.jpg or opengraph-image.tsx.

    4. Why This Topic Matters

    A link preview is often the first impression of a page. Strong title, description, and image metadata can improve click-through and brand consistency.

    5. Real-World Analogy

    Open Graph is the poster for your page. The article is the event, but the poster decides whether people notice it in a crowded feed.

    6. Core Concepts

    ConceptMeaning
    openGraphMetadata object for social previews.
    OG imagePreview image used by platforms.
    Static OG imageFile-based image in route folder.
    Dynamic OG imageGenerated image with ImageResponse.
    Twitter cardPlatform-specific preview metadata.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Each blog post can have a generated OG image based on its own title.

    10. Interactive Playground

    Try this:

  • Add static opengraph-image.png to a route.
  • Add openGraph metadata fields.
  • Test a URL with a social preview debugger.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Using tiny imagesAny image seems enough.Use platform-friendly dimensions such as 1200x630.
    Forgetting absolute production URLsLocal URLs work in dev.Use canonical public URLs for shared pages.
    Reusing one generic image everywhereFaster to set globally.Add route-specific images for key pages.

    12. Best Practices

  • Provide clear title, description, URL, and images.
  • Use route-specific OG images for important content.
  • Keep text readable at preview size.
  • Test with social card validators.
  • Use generated images for high-volume dynamic content.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    OG meta tagsConsumed by platformsNot visible in normal page UI.
    Static OG imagePublic assetMust be crawlable.
    Dynamic OG imageServer generatedUse supported CSS/layout constraints.

    14. Interview Questions

    Easy: What is Open Graph used for?

    Answer: Rich previews when links are shared on social and messaging platforms.

    Medium: How can Next.js add a static OG image?

    Answer: Place an opengraph-image file in the route folder.

    Hard: When use generated OG images?

    Answer: For dynamic pages like blog posts, products, or profiles where each URL needs a unique share image.

    15. Debugging Exercise

    Bug report: "Slack still shows our old image."

    Solution

    Social platforms cache previews. Verify tags are correct, use an absolute image URL, then refresh the cache with the platform debugger if available.

    16. Practice Exercises

  • Easy: Add openGraph.title and description.
  • Medium: Add a static route-level OG image.
  • Hard: Generate dynamic OG images for blog posts.

    • 17. Scenario-Based Challenge

    A job board has thousands of job detail pages. How should previews be handled?

    Walkthrough

    Use generateMetadata for title and description, and generated OG images that include company, role, and location.

    18. Quick Quiz

    1. What metadata object handles social previews? Answer: openGraph. 2. Common OG image size? Answer: 1200x630. 3. Can OG images be dynamic? Answer: Yes. 4. What class creates generated images? Answer: ImageResponse. 5. Do social platforms cache previews? Answer: Yes.

    19. Summary & Key Takeaways

  • Open Graph controls shared link previews.
  • Next.js supports metadata fields and special image files.
  • Static OG images work for stable pages.
  • Dynamic OG images fit dynamic content.
  • Always test real production URLs.

    • 20. Cheat Sheet

    NeedTool
    Social titleopenGraph.title
    Social summaryopenGraph.description
    Preview URLopenGraph.url
    Static imageopengraph-image.png
    Dynamic imageopengraph-image.tsx

    21. Further Reading

  • Next.js Docs: Metadata and OG images.
  • Next.js Docs: Open Graph Image.
  • Open Graph protocol.

    • 22. Next Lesson Preview

    Chapter 6 is complete. Next, you will optimize performance, starting with images.