Resolve a relative og:image against the request URL #807

Version

void 1.8.0, and main at 004624f

Problem

Social networks only read an absolute og:image, but there's no way to write one in void.config.ts, because the config doesn't know the site's origin:

// void.config.ts
export default defineConfig({
  head: {
    meta: [
      { property: 'og:image', content: '/og-image.jpg' },
      { property: 'og:image:width', content: '1200' },
      { property: 'og:image:height', content: '630' },
    ],
  },
});

resolveHead() in packages/void/src/pages/head.ts passes meta values through unchanged, so the page gets <meta property="og:image" content="/og-image.jpg">. Facebook, LinkedIn, Slack and X then show the link with no image. Hard-coding the origin breaks previews and local dev, and void.config.ts can't read env vars per deploy.

Today the tag has to go in middleware instead, apart from the other image tags:

// middleware/shared.ts
c.set('headDefaults', {
  meta: [{ property: 'og:image', content: new URL('/og-image.jpg', c.req.url).href }],
});

Proposal

When the head is resolved for a request, turn a root-relative content into an absolute URL using c.req.url, for the meta tags that must be absolute:

• og:image, og:image:url, og:image:secure_url
• og:video, og:audio and their :url and :secure_url variants
• og:url
• twitter:image

resolveHead() is called in three places in protocol.ts (lines 448, 722 and 923), all of which have c, so it could take the request URL as a fourth argument, or each caller could pass its result through a small absolutizeHead(head, c.req.url). Absolute URLs and other meta tags are left alone, so existing sites see no change, and the result goes into the page data too, so client navigations get the same values.

If you'd rather not depend on the request's host, for a site served on several domains or behind a proxy that rewrites it, a head.baseUrl config option could take priority over c.req.url. I'd start without it.

Prior art

• Next.js: metadataBase in the root layout resolves relative openGraph.images, twitter.images and alternates URLs, and falls back to the deployment URL or localhost when it isn't set.
• Nuxt SEO: site.url in nuxt.config makes ogImage and og:url absolute.