Clarify how to implement social image URLs

[markoa]

📚 Subject area/topic

Runtime API

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/reference/api-reference/#astrocanonicalurl

📋 Description of content that is out-of-date or incorrect

I was implementing logic for social image URLs in astro and md layouts and couldn't fnd any example that would point me in the right direction re. building canonical URLs.

The page I mentioned recommends using Astro.url, but this will generate localhost URLs.

Another thing is, reaching for images in src/ won't work.

So not sure where exactly in docs but would love to see this clarified in a single place:

• assets should be in public/
• you must set site global property Use URL.new(asset_path, Astro.site)

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[Princesseuh]

Why can't you use images in src? Astro.url is only localhost in dev or if site is not set in your config (in SSG), it's true that it'd be good to precise it in the section of Astro.url!

[markoa]

More precisely, I was not able to construct canonical URLs for images in src referenced in Markdown frontmatter.

Let's say here I have an MDX file where I want to declare path to an image to be used in the social card:

...
image: "image.jpg"
...

If the image is in src and I pass such a path to new URL(path, Astro.site) I get basically get a naively concatenated string, not the real build path where the image actually is (within _astro/...).

In my current code I store these types of images in public/.

[Princesseuh]

Ah yes, for images in Markdown content, you'd need to use Content Collections for images to be resolved. https://docs.astro.build/en/guides/images/#images-in-content-collections

[markoa]

I haven't noticed Content Collections, will give them a try.

[sarah11918]

Will accept a PR if anyone wants to add the extra context that @Princesseuh suggested! I could see a line added underneath the existing paragraph, something like:

A URL object constructed from the current Astro.request.url URL string value. Useful for interacting with individual properties of the request URL, like pathname and origin.

Astro.url will be localhost in dev mode if site is not configured for static sites, and for on-demand rendered sites using server or hybrid output.

(Would need a check to make sure that's exactly what was intended!)