When you share a url like a news article on Twitter or send it on Slack, iMessage etc, you get a small preview widget showing you the headline and a photo from the story.

The way this is generated is Twitter/iMessage scrapes the HTML of the url you are sharing and looks for <meta name="og:image" content="https://imgur/adfstdd"> and displays whatever image is in the content field. Similarly the widget title is populated from <meta name="og:title" content="About Us">

In a static html site there is only one index.html so all routes have the same meta tags unless you overwrite the index.html file using an edge worker.

> In a static html site there is only one index.html so all routes have the same meta tags unless you overwrite the index.html file using an edge worker.

I guess this is specifically for SPA static sites? I would expect a static html site to have different html files for each page, like blog/2020-09-09-title.html and that could then have its own metatags, so no need for this dynamic rewriting, unless I'm missing something.

Correct. This is only for SPAs that use client side routing like react-router. React SPAs are quite common with startups in my experience.

Crawlers like Google's run JavaScript now though, so your example is outdated.

This isn't only for googlebot but Twitterbot, slackbot, facebookbot and [fill-in-blank]bot that fetch your page to generate a url preview in their app when links from your domain are shared.

If that's your concern it probably makes more sense to just be server-rendering at that point

My main concern is cost. Cloudflare workers are free.

So is Vercel