Skip to content
Every tutorial here is 100% free — and always will be
LSLovableStudent

How do I add Open Graph metadata?

Last checked 31 Aug 2026

Short answer

Ask Lovable to add Open Graph tags (og:title, og:description, og:image, og:url) to your page head — these control how your links look when shared on social platforms and in some chat apps.

What Open Graph metadata controls

Open Graph (OG) tags are read by Facebook, LinkedIn, Slack, WhatsApp and similar platforms to build a preview card when your link is shared: a title, description, image and canonical URL.

Core tags to include

<meta property="og:title" content="Acme Studio — Custom Furniture" />
<meta property="og:description" content="Handmade furniture, built to order in Melbourne." />
<meta property="og:image" content="https://yourdomain.com/social-image.png" />
<meta property="og:url" content="https://yourdomain.com/" />
<meta property="og:type" content="website" />

Add Twitter's equivalent card tags too if you want a specifically-optimised preview on X:

<meta name="twitter:card" content="summary_large_image" />

Asking Lovable to set it up

Add Open Graph and Twitter card meta tags to every main page — title, description, image and URL — using the page's actual content, not just the homepage's.

Image requirements

Use an absolute https:// URL for og:image, sized around 1200x630px — see how do I change the social sharing image for details.

What usually goes wrong

  • Only the homepage has OG tags, so every internal page shares with a generic or missing preview.
  • og:image uses a relative path, which most crawlers can't resolve.
  • Old previews persist after you change the tags — social platforms cache scraped previews; use each platform's debugger tool (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.

Sources

Was this answer helpful?

Related questions

Website made, maintained and hosted by PromptSites.com

PromptSites logo