How to fix og url mismatch on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. In your head-rendering component (e.g. Next.js: app/layout.tsx or pages/_app.tsx using next/head; Nuxt.js: nuxt.config.ts useHead or app.vue; Astro: src/layouts/Base.astro), locate where og:url is set.
2. Replace any static/hardcoded URL with the current page's canonical URL derived from the request context — e.g. in Next.js: use `useRouter().asPath` combined with your base URL, or pass the canonical URL as a prop from getStaticProps/getServerSideProps.
3. Ensure the value is absolute (includes https:// and domain), matches the <link rel='canonical'> output exactly, and does not include query strings or fragment identifiers unless they are part of the canonical.
4. For static site generators (Hugo, Jekyll, Eleventy), use the built-in page URL variable (Hugo: {{ .Permalink }}, Jekyll: {{ page.url | absolute_url }}, Eleventy: {{ page.url | absoluteUrl(site.url) }}) in your base layout.
5. Build and deploy, then use 'View Source' on multiple page types to verify uniqueness.
6. Optionally add an automated test to your CI pipeline that checks og:url === canonical for a set of representative URLs.

What is og url mismatch?

The `og:url` tag is a small piece of HTML in your page's `<head>` that tells social networks, messaging apps, and AI systems the "true" address of a page when someone shares it. When this tag is missing or set to a site-wide default (for example, always pointing to your homepage), every single page on your site tells the world it lives at the wrong address. A correct `og:url` should always equal the canonical URL of the exact page it appears on — never a template value, never your homepage, never an alternate URL.

When `og:url` mismatches the canonical URL, shares on Facebook, LinkedIn, Slack, WhatsApp, and other platforms create links that point to the wrong page — sending potential customers somewhere they didn't expect, or even to a 404. AI tools that cite your content (ChatGPT, Perplexity, Bing Copilot) read Open Graph data to form citations; a wrong `og:url` means citations and backlinks generated from shared content point to the incorrect URL, splitting your link equity and diluting your rankings. For ecommerce specifically, a product link shared by a happy customer that resolves to the homepage instead of that product costs you direct conversions. Search engines also use Open Graph data as a consistency signal; persistent mismatches can reduce crawl trust in your canonical declarations.

See the complete Og url mismatch guide for every platform and the full background.