2 years ago

If you spend any amount of time on Twitter, you'll notice that most links have some sort of image attached to them. For example, here's one of Netlify's tweets: Look at that beautiful, on-brand image that stands out in everyone's Twitter feed!

There are times though when you want to attach many different OG images to the same link.

function populateTemplate(content, data) { for (const [key, value] of Object.entries(data)) { content = content.replace(new RegExp(`{{ ${key}}}`, 'g'), value)} return content; }

And your edge function could simply swap out hardcoded images: export default async (request, context) => { const url = new URL(request.url) const response = await context.next() const page = await response.text() const search = '/images/og/vacation.png' const replace = url.searchParams.has('image')?