Social Image Sharing with Lovable Apps & Cloudflare Workers

The Problem Serving Social Images on WhatsApp, LinkedIn, X, with a Lovable Product

Lovable doesn't natively support dynamic Open Graph (OG) images per page, or Social Sharing Images. So, here is the architected solution using Cloudflare Workers.

1. The Migration: Moving to Cloudflare

To use Cloudflare’s Worker features, you'll first have to move your domain’s DNS management to Cloudflare.

Quick lesson: What is a Cloudflare Proxy?

Think of a Proxy as a security man that stands between the internet and your website’s actual server. Instead of traffic going straight to your site, it passes through Cloudflare first. This allows Cloudflare to shield you from attacks, speed up loading times, and run code on the request, before it lands on your site (the Lovable solve).

The Migration to Cloudflare Checklist

Moving your domain should take about 15 minutes, but double-check certain things.

• Review your A-Records before the switch: When Cloudflare imports your domain records, Cloudflare usually only pulls in "apex" records (the main domain). It often misses subdomains or specific A records.

• Manual Entry: So before you switch your Name Servers to Cloudflare, manually add any missing A records into the Cloudflare dashboard.

• Don't Worry: Making these edits to these records in Cloudflare does nothing to the running of the domain, UNTIL you change the Name Servers. So nothing changes until you flip the switch on the Name Servers.

  
  

Once your records match in Cloudflare's DNS with your current Records, change the Name Servers at your registrar to point to Cloudflare. Propagation usually takes a few minutes.

Your domain is now on Cloudflare - if anything you can now benefit from their faster load-times!

2. Now for the Trickiness: The Lovable Conflict

Here is where it gets technical. Lovable applications do not work with Cloudflare Proxies on the published domain.

• If you turn on the "Orange Cloud" (Proxy enabled) in your Cloudflare DNS dash, for your main Lovable domain, the connection will fail. And you won't have a published Lovable app on your domain (it will still work on Lovable's domain).

• The Rule: ALL domains pointing directly to Lovable must be set to "DNS Only" (Grey Cloud) in the Cloudflare dashboard. This bypasses Cloudflare’s features and treats them like a standard phonebook directory. And your Lovable apps run as per usual, no problemo.

  
  

• But, if we turn off the Proxy, we can't run the script (or Worker) needed to change the WhatsApp image.

3. The Solution: The "Middleman" Subdomain

To get around this, create a separate, proxied (i.e it runs through Cloudflare) subdomain — call it anything, such as share.yourdomain.com.

Why do we need a Worker?

Social platforms like WhatsApp, LinkedIn, and Twitter use "bots" to crawl a link when you paste it. These bots look for <meta> tags (Open Graph tags) to generate the preview Social Image card.

Lovable sends the same tags for every page. You need something to intercept that bot, say "Stop my guy, this image is for Client X, and this is the page descriptor", so it swaps the image, and then lets the traffic through to your Lovable site. That is a Cloudflare Worker working.

The Architecture

1. The User Link: Send or share a link using the proxied (think Cloudflare = Proxy) subdomain (e.g., share.yourdomain.com/estimate/123).

2. The Intercept: The request hits Cloudflare. Because this specific subdomain is Proxied (Orange Cloud), it triggers the Worker, which delivers the specific image, and descriptor.

3. The Worker's Job: The Worker checks the URL, fetches the specific data and descriptor, and generates the correct Social Image and Title.

4. The Handover: The Worker serves the personalized preview to WhatsApp - BEAUTIFUL! If a human clicks the link, the Cloudflare Worker quietly redirects them (instantly) to the actual Lovable app, so no-one knows a thing that all this is happening between the link-press, the Worker working, and the Lovable domain being reached.

Remember the Setup

• Lovable Domains: No Worker, No Proxy (DNS Only).

• Your created, Proxied Subdomains: Can link to Worker = Proxied (Orange Cloud) = Can route them to the Lovable domain!

4. Big Things to Do Immediately on Name Server Change to Cloudflare = Reconnect Lovable Apps

When you change your Name Servers to Cloudflare, your Lovable projects connected to that domain will effectively disconnect. They no longer know where to point.

How to Fix It:

1. Go to your Lovable Project Settings.

2. Find the domain section.

3. Hit "Recover" on the previous custom domain.

4. Lovable (via their provider, Entri) will verify the new DNS settings.

5. Stay Calm as a Cucumber: It takes roughly 20 minutes for the SSL certificates and connections to propagate and stabilise, then the apps are back. And remember, don't Proxy the Lovable domains!!

The Result

It sounds chaotic, changing the domain DNS records, proxies, and Workers, but the result is worth it.

• Your Domain: Now hosted on Cloudflare (free tier), gaining security and extra-speed.

• Your App: Still running smoothly on Lovable.

• The Customer's Granular Experience: When you share a link via WhatsApp, LinkedIn, X, your audience sees a specific Social Image card: A custom image, and a professional description. How nice is that!!

We now have a granular UI component that feels specific, and not generic, delivered by a world-class enterprise infrastructure called Cloudflare!