Open Graph

## 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 | Concept | Meaning | |---|---| | `openGraph` | Metadata object for social previews. | | OG image | Preview image used by platforms. | | Static OG image | File-based image in route folder. | | Dynamic OG image | Generated image with `ImageResponse`. | | Twitter card | Platform-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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Using tiny images | Any image seems enough. | Use platform-friendly dimensions such as 1200x630. | | Forgetting absolute production URLs | Local URLs work in dev. | Use canonical public URLs for shared pages. | | Reusing one generic image everywhere | Faster 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 | Feature | Browser Impact | Notes | |---|---|---| | OG meta tags | Consumed by platforms | Not visible in normal page UI. | | Static OG image | Public asset | Must be crawlable. | | Dynamic OG image | Server generated | Use 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 | Need | Tool | |---|---| | Social title | `openGraph.title` | | Social summary | `openGraph.description` | | Preview URL | `openGraph.url` | | Static image | `opengraph-image.png` | | Dynamic image | `opengraph-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.