5

I would like to know how I can get clean image url's with next/image component in Next.js.

Current URL Example below:

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

Is it possible to change the above URL every time like the URL below:

https://www.example.com/_next/image/Dog-image-1.jpg

or like this:

https://www.example.com/_next/image/images/home/Dog-image-1.jpg

How to get clean URLs using next/image component for images.

Thank You for your participation.

Adam Hill
  • 315
  • 3
  • 8
  • There's no way to control the URL generated by `next/image` default loader, if that's what you're asking. – juliomalves Dec 29 '21 at 20:08
  • Yes, that's my exact question. That's what I suspected. My question is from an SEO point of view. How does that effect my SEO, now that every image URL will be different depending on browser and screen size right? Do you think an image sitemap should help in this regard ? – Adam Hill Dec 30 '21 at 10:42
  • @juliomalves It's quite the opposite. according to Google guidelines, the URL structure of an image (and its name) helps the search engine to better understand your image's content. refer to https://developers.google.com/search/docs/advanced/guidelines/google-images – Ammar Oker Jun 01 '22 at 07:13

2 Answers2

1

I used the unoptimized property.

Since Next.js 12.3.0, this prop can be assigned to all images by updating next.config.js with the following configuration:

module.exports = {
  images: {
    unoptimized: true,
  },
}

And as a result I have regular image URL https://www.example.com/images/home/Dog-image-1.jpg

Slight
  • 1,541
  • 3
  • 19
  • 38
Serhii
  • 51
  • 4
0

Image resources may be directly accessed via URL by typing their /name.format if they reside in the public folder on the root of your Next.js app.

Example:

  • If I wish to access Dog-image-1.jpg that is found in the root of the public folder (no sub-directories) — I'll need to type https://www.example.com/Dog-image-1.jpg

  • If I wish to access this same image through https://www.example.com/image/Dog-image-1.jpg then I need to create an image sub-folder in the public directory.

The image may be nested as much as possible, one just needs to create the appropriate sub-folders.

Is this what you are looking for?

This might interest you otherwise.

Y H R
  • 595
  • 5
  • 15
  • Thanks. Because the next/image component scrambles the URLs and changes the width numerical in the URL according to the users browser screen size which makes it very unfriendly for SEO. and makes multiple URLs. Another question that arises is which URL the google bot is crawling ? I wanted to ask if their is anyway we can rewrite the URLs to make them SEO friendly. Can an image sitemap help make it easier for google bot ? – Adam Hill Dec 30 '21 at 10:51
  • I am sorry for the delayed reply, I didn't get notified of you comment. I wouldn't know about that unfortunately – Y H R Dec 31 '21 at 14:53
  • The noscript tag has the same next/image generated URL in the img src, if I can get the location URL https://www.example.com/image/Dog-image-1.jpg in this tag the images will get indexed for sure. Any suggestion on how to do that. – Adam Hill Mar 13 '22 at 12:55
  • 1
    This isn't what the original question is asking. Next.js caches image on the server side and while the image component takes a `src={[remote_url]|` props, the component conversts this to a request such that this URL is sent as query parameters: `[host]/next/_image/url?...` -- the problem he sees for SEO is that the URL is ALWAYS the same (because query parameters are not considered) so ALL image links will looks like `/next/_image`. Also a problem for any lib which doesn't treat query params for caching purposes - really need to be able to force next to use different URL for each image. – ortonomy May 07 '22 at 15:59