Free Tool

OG Image Previewer

Preview how your Lovable app looks when shared on Facebook, LinkedIn, Twitter, and other platforms. Test your Open Graph tags and Twitter cards — get a prompt to fix missing tags.

Lovable Guide

How to Add Social Preview Cards to Your Lovable App

When someone shares your Lovable app link on social media, the platform shows a preview card with an image, title, and description. These come from Open Graph (OG) tags and Twitter card tags in your page's HTML. Without them, shared links look bare — just a URL with no context. With them, every share becomes a mini-advertisement for your app.

Preview your current cards

Enter your URL above and click Preview. The tool shows exactly how your link will look on Facebook, Twitter, and LinkedIn. If you see 'No OG image' or missing titles, those are the tags you need to add.

Check the tag status

The six key tags are: og:image, og:title, og:description, twitter:card, twitter:image, and canonical. Green means present, amber means duplicate (common in SPA apps), and 'Missing' means the tag doesn't exist.

Create your OG image

The og:image is the most impactful tag — it's the large image shown in preview cards. Use a 1200×630px image with your app's name, logo, and a short tagline. Tools like Canva or Figma can help you create one quickly.

Copy the prompt and add all tags

Click 'Copy Prompt' to get a Lovable-ready prompt with all the missing tags. Paste it into your Lovable project — it will add the meta tags to your page's head section automatically.

Example prompt to paste into Lovable:

Add social media preview tags to my app:

- Add <meta property="og:title" content="My App — The best way to do X">
- Add <meta property="og:description" content="A short, compelling description of what my app does.">
- Add <meta property="og:image" content="https://myapp.com/og-image.png">
- Add <meta property="og:type" content="website">
- Add <meta property="og:site_name" content="My App">
- Add <meta name="twitter:card" content="summary_large_image">
- Add <meta name="twitter:title" content="My App — The best way to do X">
- Add <meta name="twitter:description" content="A short, compelling description.">
- Add <meta name="twitter:image" content="https://myapp.com/og-image.png">

Make sure each tag appears exactly once inside <head>.

Social preview cards are one of the highest-ROI SEO improvements you can make. Every time someone shares your link — on Slack, Twitter, LinkedIn, or in a text message — they're sharing your brand. A polished preview card with a custom image dramatically increases click-through rates compared to a bare URL.

More Free SEO Tools

Continue auditing your site with these companion tools.

Launch Checklist

Score your app across 35 launch-readiness checks

Meta Tag Audit

Audit title, OG, Twitter cards & more

SEO & AI Crawler Audit

Full technical SEO and AI visibility audit

Crawler Simulator

Test how 20+ search and AI bots see your site

Robots.txt Analyzer

Check which crawlers are allowed or blocked

Security Headers

Scan for missing security headers with A-F grades

Social cards bring visitors. Bugwarden makes sure your app works when they click.

This tool fixes your social previews. Bugwarden catches every runtime error in your Lovable app and gives you a prompt to fix it — automatically. Set up in 30 seconds.