NextJS 不给图片标签添加宽高属性

Question

我正在改进我在 Nextjs 中制作的应用程序，我开始进行 SEO 优化，PageSpeed 建议为图像标签添加显式宽度和高度属性。当我使用来自“next/Image”的组件图像时，它 returns 我如下：

<span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
    <img alt="my-img" sizes="100vw" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" />
</span>

在 NextJS 中它会是这样的：

<Image
  alt="my-img"
  loading="eager"
  layout="fill"
  objectFit="contain"
  src={myImg}
/>

好吧，我没有将宽度和高度属性添加到图像组件，因为我需要响应图像。但是，如果我添加宽度和高度属性，它们不会反映在“img”标签中。有没有办法显示这些属性来稍微改进 SEO？

Answer 1

没有。 Pagespeed 不知道您使用响应式图像的意图。他们给出的是一般性建议，但不是规则或法律。

人们通常不能也不应该遵循他们的建议。这可能使获得最高分变得不可能，但他们同时要求不可能。

忽略它。

NextJS 不给图片标签添加宽高属性

NextJS not add the width and height properties to image tags

seo

next.js

nextjs-image