Next.js图片处于<noscript>标签中是否可爬及优化方法咨询

Is the Current Setup Good for Crawlers? #

• Modern JavaScript-enabled crawlers (like Googlebot) will execute your site's JS and load the real image eventually, so they'll index the correct content.
• Non-JS crawlers will find the real image URL inside the <noscript> tag. Most reputable crawlers (including Googlebot's non-JS fallback) parse <noscript> content, so this isn't a critical issue.
• However, some less sophisticated crawlers might ignore <noscript> blocks, making your images harder to index. Also, the initial HTML only shows a placeholder data URL, which isn't useful for crawlers looking for actual image content at first glance.

How to Improve Image Crawlability #

Option 1: Disable Image Optimization (Unoptimized Prop) #

Use the unoptimized prop on the Next.js Image component. This renders the real image URL directly in the main <img> tag instead of wrapping it in <noscript>, while retaining the blur placeholder functionality.

Modified Code:

<Image
  blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
  placeholder="blur"
  src={fileObj.wsThumUrl}
  width={120}
  height={194}
  alt={
    breadCrumb.length > 1
      ? `${grade}  ${subject} worksheet: ${breadCrumb[0]} - ${breadCrumb[1]}`
      : `${grade}  ${subject} worksheet: ${breadCrumb[0]}`
  }
  unoptimized
/>

Tradeoff: You lose Next.js's automatic image optimization features (resizing, format conversion, CDN caching, etc.). Use this if crawler compatibility takes priority over performance optimizations.

Option 2: Verify JS Crawler Indexing #

If you want to keep image optimization, confirm JS-enabled crawlers can see the real image:

• Submit your site to Google Search Console and use the URL Inspection Tool to check how Googlebot renders the page. This will show if the real image is detected.
• Ensure your ISR setup is correctly configured so page content (including image data) is pre-rendered properly.

内容的提问来源于stack exchange，提问作者Ritik Joshi