seo/og-absolute-url

Why

Link previews in chat apps and social networks are built by crawlers that read only these tags. A relative image path is not resolved, so the shared link appears without an image or with a broken one.

Fix

Build the URL from the site's configured origin: new URL('/img/share.png', site).href. Use a 1200 × 630 image or larger, add og:image:alt, and keep these tags in the server-rendered HTML, not added by client script.

Examples

<!-- bad -->
<meta property="og:image" content="/img/share.png">
<!-- good -->
<meta property="og:image" content="https://example.com/img/share.png">
<meta property="og:image:alt" content="Acme dashboard showing the weekly report">

Sources

• Frontend Skills research notes, SEO (social metadata, read 2026-11-11)
• MDN, URL resolution of relative references

Read it in the terminal

npx github:dawidolko/frontend-skills explain seo/og-absolute-url