If your app has public profiles, listings, portfolios or posts, every one of those pages is a link someone will paste into WhatsApp, LinkedIn or Slack. The card that appears is built from text and images your users typed in. That's the point of the feature, and it's also where things get uncomfortable: a display name that says "Official Support", a profile image swapped after it was approved, a private account whose old card keeps circulating, a username that changes hands.

Most link preview advice assumes the person writing the tags is the site owner. On a user-generated page, you're writing the rules and your users are writing the content. This post is the setup I use in Next.js (App Router) to keep those cards useful without letting them become a liability.

What actually goes wrong

When I review a platform with user pages, the same handful of problems come up:

Raw user URLs in og:image . The profile stores an image URL from anywhere, and the page puts it straight into the share tag.…