Cannot set Canonical or og image URL for Production

[royal steppe]

I'm following the documentation https://docs.astro.build/en/reference/api-reference/#astrourl
Where it shows you can use Astro.url + new URL() to construct a URL using your current domain.

From Docs:

---
// Example: Construct a URL for SEO meta tags using your current domain
const socialImageURL = new URL('/images/preview.png', Astro.url);
---
<meta property="og:image" content={socialImageURL} />

I've added the same method. It works locally as its resolving to localhost:3000, but I noticed on production, its still localhost:3000, not the current domain as mentioned in the docs.

I have not added Astro.site yet, because its not mentioned as mandatory to do so. Since I'm uploading to vercel, there are multiple URLs, so I want them to be based on the current domain.

Please help.

[brittle herald]

Hi @royal steppe — you do need Astro.site to be set to build a canonical URL.

There might be a simpler way, but here’s what I have for one project running on Vercel:

  site:
    process.env.VERCEL_ENV === 'production'
      ? 'https://astro.badg.es/'
      : process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/`
      : 'https://localhost:3000/',

The first URL there is the production domain name, then a URL built from Vercel’s environment variable for a staging deployment, and finally falling back to localhost locally.

[royal steppe]

nice, so Astro.url won’t work right? not sure why it says for current domain in the example.

[brittle herald]

I think it should!

The difference is that Astro.site is just your origin whereas Astro.url is the full URL for the current page

[royal steppe]

but astro URL is still localhost on production!

[brittle herald]

Oh, that sounds wrong! Can you create a minimal reproduction? Might be worth opening an issue.

!issue

[unreal gulch]

Open a New Issue
https://github.com/withastro/astro/issues/new/choose

[royal steppe]

will do

[royal steppe]

made a minimal repo here: https://stackblitz.com/edit/github-edxsa5?file=src%2Flayouts%2FLayout.astro

just wanted to double check before submitting an issue. We are expected to see the current loaded URL here right? Its still showing localhost.

[brittle herald]

Thanks @royal steppe — sorry I missed this! Is this the correct reproduction? This shows an image and is titled “Astro Image preload Bug”.

[royal steppe]

its the same, just forked one existing so forgot to change the name 😀

[brittle herald]

Ah, right!

We are expected to see the current loaded URL here right?
Where should I be looking?