Open Graph và Twitter Cards là gì? Cách implement trong Next.js?

Open Graph và Twitter Cards kiểm soát preview khi share link trên social media — share preview đẹp → nhiều click → nhiều traffic → nhiều backlinks → ranking tăng gián tiếp.

Open Graph (OG): meta tags chuẩn Facebook để kiểm soát preview trên Facebook, LinkedIn, Zalo, Telegram. Tags quan trọng: og:title, og:description, og:image (1200x630px recommended), og:url, og:type.

Twitter Cards: tương tự OG nhưng cho Twitter/X — twitter:card ('summary_large_image' phổ biến nhất), twitter:title, twitter:description, twitter:image.

Trong Next.js App Router: dùng metadata export hoặc generateMetadata() — Next.js tự generate OG và Twitter meta tags. Dynamic OG images: dùng opengraph-image.tsx (hoặc @vercel/og) để generate image động chứa title, author, date.