How Do I Add Social Sharing Previews to My App?

You built something with Claude, ChatGPT, Bolt, or Lovable and when someone shares a link to it on Twitter, LinkedIn, or WhatsApp, it just shows a plain URL with no preview. No image, no title, no description. Meanwhile other links shared on social media show a rich card with an image, the page title, and a summary. The difference between a boring link and a rich preview comes down to a few lines of code called Open Graph tags. Here is exactly how to add them.

What Open Graph Tags Are

When you share a link on social media, platforms like Twitter, LinkedIn, Facebook, and WhatsApp do not just show the URL. They visit the page, read special hidden tags in the HTML, and use them to generate a preview card.

These tags are called Open Graph tags. They are HTML meta tags that live in the head section of your page and tell social platforms what image, title, and description to use for the preview.

A one-sentence definition: Open Graph tags are hidden HTML tags that tell social media platforms what to show when someone shares a link to your page.

The most important ones are:

html

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A description of your page." />
<meta property="og:image" content="https://yourapp.com/preview-image.png" />
<meta property="og:url" content="https://yourapp.com/this-page" />

When these tags are present, sharing your link on Twitter shows the image, title, and description in a card. Without them, the platform either shows nothing or makes its best guess, which is usually wrong.

What Image to Use

The preview image, set by og:image, is the most visually impactful part. A few requirements:

The image should be at least 1200 x 630 pixels for optimal display
Use a JPG or PNG file
The image URL must be absolute (starting with https://), not relative

If you do not have a custom image for every page, a single branded image for your whole app works well as a fallback. Something with your app’s name and a short tagline on a clean background.

Twitter-Specific Tags

Twitter has its own set of tags called Twitter Card tags. They work alongside Open Graph tags.

html

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A description of your page." />
<meta name="twitter:image" content="https://yourapp.com/preview-image.png" />

If both Open Graph and Twitter Card tags are present, Twitter uses its own tags. If only Open Graph tags are present, Twitter falls back to those. Adding both ensures maximum compatibility.

How to Add Open Graph Tags to Your App

Ask your AI: “Can you add Open Graph and Twitter Card meta tags to my app so links shared on social media show a rich preview? I want the title to be [your app name], the description to be [your tagline or description], and the image to be at my URL [if you have one]. Add these to the head section of every page.”

For apps with multiple pages that have different content, ask: “Can you make the Open Graph tags dynamic so they show the specific title, description, and image for each page or piece of content?”

Testing Your Preview

Before sharing, test what your preview looks like:

Twitter: use cards-dev.twitter.com/validator (you need a Twitter account)
Facebook/LinkedIn: use developers.facebook.com/tools/debug
WhatsApp: paste your URL into a WhatsApp message and wait a moment

These tools show you exactly how your link will appear when shared and flag any missing or incorrect tags.

The One Thing to Remember

Open Graph tags are a few lines of HTML that tell social media platforms what image, title, and description to show when someone shares your link. Without them, shared links show nothing useful. With them, every shared link becomes a polished preview card. Ask your AI to add them, then test with Twitter’s Card Validator before sharing widely.

Want your app running reliably while you focus on growing it? → Snapdock

New here? These might help: How do I get my app to show up in Google search? → What is a URL? And how does my app get its own? →