OG Images Done Right — How I Made Every Shared Link Work Harder

One thing I learned building TalkWith.chat: No matter how good your product is, if sharing a link on KakaoTalk or Slack shows no image — nobody clicks. A single OG image determines your click-through rate. So I decided to do it properly. Everyone Knows What OG Images Are The image specified in <meta property="og:image"> that appears as a preview when sharing links. Works on Twitter, Slack, KakaoTalk, Discord — everywhere. The problem with static images is that every page shows the same thumbnail. On a debate platform where a new topic drops every day, having every topic page share the same image is pointless. "What if the topic title was baked into the OG image?" That was the starting point. Dynamic OG Images in Next.js: opengraph-image.tsx Since Next.js 13 App Router, placing an opengraph-image.tsx file in a folder automatically registers it as that page's OG image. Inside that file, you use ImageResponse to generate an image from JSX. // app/[locale]/topic/[date]/opengraph-image.tsx