Next/Image keeping the original image SRC for better SEO #60888
Closed
giacomozecchini
started this conversation in
Ideas
Replies: 3 comments 3 replies
-
CC @styfle |
Beta Was this translation helpful? Give feedback.
0 replies
-
I like the opt-in solution 👍 Do you have a suggestion for the new prop name? Maybe Inputimport img from '../images/selfies/IMG123.jpg'
<Image
src={img}
seoSrc="/images/me"
/> Output<img
width="256"
height="256"
loading="lazy"
decoding="async"
srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fme.97e00142.jpg&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fme.97e00142.jpg&w=640&q=75 2x"
src="/images/me"> |
Beta Was this translation helpful? Give feedback.
3 replies
-
Any update on this ? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Goals
Background
As elaborated in this Merj blog article, the current implementation of the Next.js Image component provides developers with automatic image optimization, including “Size Optimization”. The current implementation involves rewriting the SRC attribute of the IMG tag and adding the SRCSET attribute with optimised images of different sizes for various screen sizes and resolutions.
When using the Next.js Image component with [URL] as the original image path, the output looks similar to this:
Major search engines primarily use the IMG tag's SRC attribute as the primary reference for images.
Legacy websites that migrate to Next.js may have images on content delivery networks that have been ranking well on search engines. The alteration of the image URLs prompts search engines to recrawl the "new" images, leading to the indexing process and often resulting in a drop in ranking. For businesses heavily reliant on image traffic, this can be a significant challenge.
Proposal
To address the issue of instability, we propose allowing the developer to set a custom SRC attribute and use the image optimised URLs exclusively in the SRCSET attribute. This would have the following benefits:
By implementing this change, the desired output should be:
Compatibility and Impact
While, in an ideal world, this change should be the default output of the Image Component, altering the default output without specifying an option could affect websites that already use the image component.
Therefore, it is suggested to introduce an option/parameter to override the existing SRC attribute functionality, enhancing the search friendliness of the component, and to document this option for developers.
Beta Was this translation helpful? Give feedback.
All reactions