Open Graph Tags in a React + Vite SPA: Why Crawlers See Your App Shell, and Three Ways to Fix It

Good catch, Tarun, and you're right. As written, a 404 from the API falls through to return res, so crawlers get a 200 and the default card for a post that's gone. That's a soft 404, and it isn't great for search engines or for previews.

I'd split it by the API's status:

const apiRes = await fetch(`api.acme.com/posts/$%7Bmatch[1]}`);
if (apiRes.status === 404) {
  return new Response(res.body, { status: 404, headers: res.headers });
}
if (!apiRes.ok) return res; // 5xx or timeout: fall back to the shell
const post = await apiRes.json();

Users still get the SPA's own "not found" view, since it's the same shell, but crawlers now see a real 404, and most platforms won't build a card from it. For 5xx errors and timeouts I'd keep the generic card, so a temporary API problem doesn't wipe out previews. Adding <meta name="robots" content="noindex"> on the 404 path is a nice extra. Thanks for reading closely!