Dynamic OG images trong Next.js là gì? Cách tạo?

Dynamic OG images là ảnh preview được generate tự động cho mỗi trang — thay vì 1 ảnh chung cho cả website. Dùng @vercel/og (Satori) hoặc Next.js convention file app/blog/[slug]/opengraph-image.tsx. Cơ chế: viết JSX/HTML → Satori convert sang SVG → convert sang PNG. Có thể fetch data (title, author, date) rồi render lên ảnh.

Ví dụ: blog post share trên Facebook hiển thị ảnh có title bài viết, author avatar, ngày đăng — professional hơn nhiều so với generic image. Performance: generate tại build time (SSG) hoặc on-demand (ISR), cache kết quả. CTR impact: trang có OG image đẹp và unique có CTR cao hơn 2-3x khi share trên social media.

Dynamic OG images are auto-generated preview images unique to each page — rather than one generic image for the entire site. Use @vercel/og (powered by Satori) or the Next.js file convention app/blog/[slug]/opengraph-image.tsx.

How it works: write JSX/HTML → Satori converts it to SVG → converts to PNG. You can fetch data (title, author, date) and render it on the image.

Example: sharing a blog post on Facebook shows an image with the post title, author avatar, and publish date — far more professional than a generic placeholder. Performance: generated at build time (SSG) or on-demand (ISR), with results cached. CTR impact: pages with unique, compelling OG images can see 2-3x higher CTR when shared on social media.