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:imageuses 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.
Related
Sources
Was this answer helpful?
Related questions
- AnswerHow do I connect Google Search Console?Use Lovable's Google Search Console integration to verify your domain and manage search data directly from chat, or verify manually by adding the DNS/HTML verification record Google provides.
- AnswerHow do I add schema markup?Ask Lovable to add JSON-LD structured data (schema.org markup) relevant to your page type — e.g. Organization, Product, Article or FAQ — inserted as a script tag in the page head.
- AnswerDoes Lovable automatically create a sitemap?No — a sitemap.xml isn't generated automatically for a typical project. You need to ask Lovable to add one, or it may be included as part of a dedicated SEO setup/review feature on newer projects.
- AnswerHow do I stop a Lovable page being indexed?Ask Lovable to add a noindex meta tag to that specific page, and optionally disallow it in robots.txt — don't block the whole domain by mistake.
You might also need
- GuideHow to Set Up SEO for a Lovable ProjectTitles, descriptions, canonical URLs, Open Graph and structured data — the technical SEO baseline every project needs.
- GuideHow to Generate a Dynamic SitemapServe an XML sitemap that updates itself as you publish new content, instead of a static file that goes stale.