I'm using next-image, all my images are on cloudinary, and the image showing ✅. However, when I analyse my website with Screaming Frog or other SEO tools, I get a ton of 404s, since they look for those images on my domain.
For example:
next-image component
<Image
src={`/blog/${imageSlug}`} <=== relative path to image
width="800"
height="800"
/>
Next.js takes the relative path and combines it with the images path in the next.config file. So we get: https://res.cloudinary.com/jumbodonuts/image/upload/blog/donut.jpg
next.config
images: {
loader: 'cloudinary',
path: 'https://res.cloudinary.com/jumbodonuts/image/upload/',
domains: ['res.cloudinary.com']
}
My images are all showing, so it does work. However, the SEO tools / Google seem to think I have my images on the domain my website is on. They think the relative path is a relative path on my own domain: e.g. : www.jumbodonuts.com/blog/donut.jpg - this results then in a 404 and is bad for my SEO. One thing to note here is that I am using nextjs static site generation feature (next export), not sure if this makes a difference.
What can I do here? Am I not using next-image correctly?