All domain and content management systems carry degrees of risk when migrating from one platform to another. Some industries benefit a lot more from image search results, which is why it is important to consider what happens when assets move.

We’ve been supporting a client who moved to Next.js, addressing post-migration concerns and investigating the significant drop in visibility within image search.

Next.js is a framework with a lot of thought that has gone into being search engine friendly and optimised for web performance, thanks to a lot of built-in features. One of those features is the Image Component, which provides resizing and quality compression to deliver fast imagery.

The problem

The Next.js Image Component offers automatic image optimisation, including “Size Optimization”. When utilising the component, the SRC attribute of the IMG tag is rewritten, and the SRCSET attribute introduces optimised images of various sizes.

Instead of having a simple image like this:

<img alt="..." src="https://media.example.com/test/hello-world.jpg">

The image optimisation would effortlessly output an optimised image that is suitable for a variety of screen sizes:

<img
    alt="..."
    fetchpriority="..."
    loading="..."
    width="..."
    height="..."
    decoding="..."
    data-nimg=".."
    class="..."
    sizes="..."
    srcset="/_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=320&amp;q=75 320w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=384&amp;q=75 384w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=768&amp;q=75 768w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=1200&amp;q=75 1200w"
    src="/_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=1200&amp;q=75"
>

While these alterations are useful for optimising image sizes, they may not be entirely search-friendly, especially if maintaining the legacy URL structure for images is crucial for the business.

The transformation of image SRC attribute URLs prompts search engines to recrawl the seemingly “new” images, initiating the indexing process and potentially leading to a drop in ranking. Additionally, this adds a new layer of complexity or additional workarounds when it comes to creating image sitemaps or, for instance, adding images to the product’s structured data schema.

Our Proposal

To address this issue, our proposal is simple: keep the original SRC attribute while exclusively using the newly optimised URLs in the SRCSET attribute.

This proposal comes with a few advantages:

  • Major search engines rely on the IMG tag’s SRC attribute as the main reference for images. By keeping the original SRC attribute, we ensure that search engines continue to reference the original images, preventing a complete recrawl of “new” images and mitigating potential drops in ranking.
  • Modern browsers can efficiently use the new, optimised SRCSET attribute URLs to download the most suitable image for users. This optimises user experience without compromising search engine visibility.

Implementing this change results in a modified output, maintaining the original SRC attribute and using the newly optimised URLs exclusively in the SRCSET attribute. The updated structure ensures search engine compatibility while still reaping the benefits of size-optimised images for users.

<img
    alt="..."
    fetchpriority="..."
    loading="..."
    width="..."
    height="..."
    decoding="..."
    data-nimg=".."
    class="..."
    sizes="..."
    srcset="/_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=320&amp;q=75 320w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=384&amp;q=75 384w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=768&amp;q=75 768w,
        /_next/image?url=https://media.example.com/test/hello-world.jpg&amp;w=1200&amp;q=75 1200w"
    src="https://media.example.com/test/hello-world.jpg"
>

Compatibility and Impact

Recognising the potential impact of altering default outputs, we suggested introducing an option within the Next.js Image component that would allow developers to keep the original SRC attribute, enhancing the search friendliness of the component. The documentation should guide users in implementing this effectively, choosing the best option for them.

Link to the GitHub discussion: https://github.com/vercel/next.js/discussions/60888

Avatar photo
Giacomo Zecchini