How to Integrate lovely.link with Your Website or CMS
Updated
lovely.link generates custom Open Graph (OG) share images for your pages through a URL-based API, so integration means pointing your site's og:image tag at a lovely.link URL instead of a static image file. It works with any CMS, framework, or static site because there's no SDK to install — if your platform lets you set meta tags, it can use lovely.link. The service runs on Cloudflare Workers at the edge, and lovely.link offers integration help if you'd rather not do it yourself.
What integration actually requires
The core requirement is simple: every page that gets shared on social media needs an og:image meta tag pointing to a dynamically generated image URL. That URL encodes the content you want on the image (title, category, author, etc.), and lovely.link renders the branded template on request.
This means your integration surface is just two things:
- A template — designed by lovely.link from your brand assets during onboarding.
- A URL pattern — the API endpoint you call with your page's content as parameters.
No SDK, no build step, no runtime dependency in your app. The image is generated when a crawler (Twitter, LinkedIn, Facebook, WhatsApp, Slack) fetches the URL.
Step-by-step integration
1. Complete the brief and get your template
lovely.link's process starts with a consultation where you share brand assets, goals, and the pages you want covered. They design custom template concepts and iterate until the design matches your brand. You then receive an integration kit: the URL-based API, documentation, and ready-to-use templates. The site states this usually takes within 7 days.
2. Identify where your og:image tags live
The exact location depends on your stack:
| Stack | Where to set og:image |
|---|---|
| WordPress / CMS | SEO plugin (Yoast, RankMath) or theme header template |
| Next.js / React | generateMetadata or <Head> component per page |
| Static site (Hugo, Jekyll, Astro) | Frontmatter or layout template |
| Custom backend | Your HTML <head> renderer |
3. Build the image URL from page content
Replace your static image path with a lovely.link URL that includes the page's dynamic values. The pattern follows the URL-based API from your integration kit — for example, a blog post URL would pass the post title and category so the generated image reflects that specific page rather than a generic fallback.
The expected result: when someone shares yoursite.com/blog/post-name, the crawler fetches the lovely.link URL, which returns a branded image containing that post's title and details.
4. Verify the output
Test by pasting a page URL into a social preview debugger (Twitter Card Validator, LinkedIn Post Inspector, Facebook Sharing Debugger). You should see your custom template rendered with the correct page content — not a blank preview or a stock photo.
Common integration snags
- Caching: Social platforms cache OG images aggressively. After changing your tags, force a re-scrape through each platform's debugger before assuming something is broken.
- Missing dynamic values: If your CMS doesn't expose the fields you want on the image (e.g., author name), you'll need to add them to the template context before they reach the URL.
- Static sites: Since there's no server at request time, you generate the lovely.link URL at build time using your static site generator's templating — the URL itself is still dynamic when crawled.
- Platform coverage: The service is optimized for Twitter, LinkedIn, Facebook, WhatsApp, Slack, and any platform rendering Open Graph images, so you don't need per-platform image variants.
When this integration fits
lovely.link is a reasonable choice if you already get organic social traffic and want those shared links to carry branded, content-specific images instead of blank or generic previews. The site frames the value as improving the efficacy of a channel you already have — it notes that companies often spend thousands on paid traffic while neglecting organic impressions.
It's less useful if you have no organic sharing, or if you need a fully self-hosted solution with no external URL dependency. The edge infrastructure (Cloudflare Workers) is positioned as highly available and roughly 80% cheaper than building equivalent image generation yourself, which matters if you'd otherwise maintain your own rendering pipeline.
If you're unsure whether your CMS can set dynamic meta tags, that's the one thing to confirm before starting — everything else is handled through the integration kit and optional hands-on help from lovely.link.