如何查找并修复网站上损坏的图像——快速指南

虽然这不是一个关键的 SEO 问题，也不会导致严重的排名下降，但损坏的图像会破坏用户体验，并可能阻止访问者完成他们想要的操作。

本指南总结了图像损坏的不同原因——问题可能比乍一看更复杂。此外，您还会找到一些提示和工具来帮助您快速处理损坏的图片。

如果您更喜欢视觉学习，这里有一个简短的视频指南，介绍如何查找网站上所有损坏的图像。

为什么破损的图片不利于 SEO？

网站上的损坏图像需要修复，原因如下：

1. 损坏的图像会影响用户体验，并可能导致跳出率增加——访问者可能会离开网站而没有做他们想要做的事情。

2. 丢失图像可能会干扰网站的抓取和索引。如果搜索机器人遇到损坏的图片，则网站的抓取预算就会被浪费。如果存在大量损坏的图像，搜索机器人可能会开始减少访问该网站的频率，一些关键内容甚至可能会被排除在搜索索引之外。

此外，某些类型的视觉内容非常吸引眼球，例如高质量的信息图表或引人注目的照片报告。因此，查找并修复损坏的图像应该是专注于此类内容的网站的首要任务。

为什么网站上可能会出现损坏的图像？

网站上出现破损图像的原因有很多，问题可能出在网站方面，也可能出在访问者方面。简而言之，出现损坏的图像可能是因为：

• 图片被错误移动或删除
• URL路径错误
• 图像文件已损坏
• 图像缓存已损坏
• 浏览器不执行渲染图像的 JavaScript 代码
• 数据传输缓慢或有限
• 浏览器设置不允许使用图像
• 图片被用户电脑上的防病毒软件或某些外部应用程序禁止

如何查找和检查网站上损坏的图像？

让我们考虑几种检测网站上损坏图像的方法，从最简单的方法开始。

1. 手动检查网页上的损坏图像

如果您发现网页上的图像损坏，可以通过检查源代码来手动检查。

右键单击图片并选择检查图片 URL。您必须检查 标记中写入的内容。我们网站上的图像代码如下所示：

您可以将图像位置 URL 复制到记事本，然后在文件管理器中查找它，将实际路径与网页正在使用的路径进行比较。

当您只看到一次损坏的图像时，上述方法有效。但是如何检查网站上是否还有丢失的图片呢？为此，您可以使用自动检测网站上损坏图像的 SEO 工具，例如WebSite Auditor。

2. 使用 WebSite Auditor 查找网站上损坏的图像

要查找您的网站上是否存在任何损坏的图像，请启动 WebSite Auditor 并输入您网站的 URL 以创建项目。继续进行基本设置，让爬虫扫描您的页面。检查完成后，转到“站点结构”>“站点审核”并检查“图像”>“损坏的图像”部分。

在这里，站点审核员将显示损坏资源所在页面的 URL 以及图像的 URL。此外，它还显示图像的 HTTP 状态代码和替代文本（如果有）。

在 URL 列表下方，您将看到 SEO 因素的简要说明，以及在某些情况下如何处理它。

提示

如果您在网站上发现损坏的图片，替代文本可能会提示您这张或那张损坏的图片上描绘的内容。通常，它将显示在损坏的图像图标旁边。

替代文本增强了视觉障碍人士的网站可访问性，使他们更容易通过屏幕阅读器理解图片中描绘的内容。同样，搜索引擎使用替代文本来理解图像内容，因此替代文本也需要优化。

3. 使用 Google Chrome 查找网页上损坏的图像

您还可以使用 Google Chrome 中的开发人员工具检查网页上的所有图像，看看是否有任何图像损坏。当您需要现场检查仅一页上的损坏图像时，它非常方便。

因此，要查明网页上是否存在损坏的图像链接，请转到 Google Chrome 的“更多工具”>“开发人员工具”，然后切换到“控制台”选项卡（请记住您可以使用 F12 或 Ctrl+Shift+I 热键）。

在这里，复制下面的代码并将其粘贴到控制台窗口中。执行后，代码将返回带有损坏的图像链接的结果以及有关它们的所有信息。

// 检查图像是否损坏的函数

函数 isImageBroken(图像) {

返回 image.naturalWidth === 0 || image.naturalHeight === 0 || image.complete === false；

}

// 获取页面上所有的图片元素

const images = document.querySelectorAll('img');

常量破碎的ImageUrls = [];

// 遍历图像元素并检查损坏的图像，不包括延迟加载的图像

图片.forEach((img) => {

if (!img.hasAttribute('loading') || img.getAttribute('loading') !== 'lazy') {

if (isImageBroken(img) && img.getAttribute('src')) {

brokenImageUrls.push(img.getAttribute('src'));

}

}

});

// 在控制台中显示损坏的图像 URL 数组

console.log('损坏的图像 URL:',brokenImageUrls);

这是你得到的：

您还可以使用另一个代码来提取有关网页上所有图像的信息 - 包括损坏的图像和工作正常的图像。粘贴下面的代码并将页面向下滚动到底部 - 一旦浏览器处理完所有图像，代码将在结果中返回有关它们的所有信息。

// 获取页面上所有的图片元素

const images = document.querySelectorAll('img');

常量 imageUrls = [];

// 遍历图像元素并收集它们的源 URL

图片.forEach((img) => {

如果 (img.src) {

imageUrls.push(img.src);

}

});

// 返回图像 URL 数组

图片网址；

4. 使用您自己的损坏图像检查器

最后，您甚至可以拥有自己的小型损坏图像检查器 - 只需将此代码添加到 Google Chrome 中的书签即可。

打开书签管理器，单击右上角的三个点，然后选择添加新书签。

为新书签指定一个有意义的名称，例如 Broken Image Checker，然后添加这段代码。

javascript:(函数() {

const images = document.querySelectorAll('img');

常量破碎的ImageUrls = [];

函数 isImageBroken(图像) {

返回 image.naturalWidth === 0 || image.naturalHeight === 0 || image.complete === false；

}

图片.forEach((img) => {

if (!img.hasAttribute('loading') || img.getAttribute('loading') !== 'lazy') {

if (isImageBroken(img) && img.getAttribute('src')) {

brokenImageUrls.push(img.getAttribute('src'));

}

}

});

if (brokenImageUrls.length > 0) {

alert('损坏的图片 URL:\n' +brokenImageUrls.join('\n'));

} 别的 {

alert('本页未发现损坏的图像。');

}

})();

当您访问要检查的页面时，选择书签，它会立即执行代码，检查页面上是否有损坏的图像链接。

修复网站上损坏的图像

无论是什么原因导致损坏的图像错误，您都需要完全删除损坏的图片或更新它们以指示正确的路径、文件名、文件类型等。不幸的是，如果错误发生在客户端，您无能为力 – 由用户来修复它。

要修复网站上损坏的图像，请考虑解决以下潜在问题：

1.镜像文件被误移动或删除

虽然这是一个相当愚蠢的错误，但它是非常典型的，尤其是在拥有许多编辑器的大型旧网站上，他们不可避免地会弄乱服务器上的所有文件夹。

解决此问题所需要做的就是将图像放置在正确的文件夹中，并确保文件路径和名称与 URL 中的相对应。

2. URL路径指向本地PC上的文件位置

当编辑者错误地指示图像的本地路径（即图像在 PC 上的存储方式）时，就会出现此问题。在这种情况下，URL 路径可能包含“我的文档”、“桌面”或反斜杠 \（而不是正斜杠 /）等单词。要解决此问题，请使用域服务器或 CDN 上存储的映像的路径。

3. 文件名或文件扩展名错误

重新加载的图像可能会因轻微的拼写错误而损坏，从而出现此类错误。很多时候，内容编辑者会将连字符“-”与下划线“_”混淆。请注意，图像可能会因图像扩展名错误而损坏，例如使用jpg而不是jpeg ，或将JPEG大写。URL 中的页面、文件或目录名称是区分大小写的，这可能会让人感到惊讶。

如果您发现渲染的图像与文件管理系统应有的图像之间存在任何差异，请重命名该文件并相应地更新图像源代码。

4.使用相对URL代替绝对URL

出现图像损坏的另一个原因是使用相对 URL 而不是绝对 URL。绝对 URL 是包含域名的完整 URL。相对URL仅包含路径，不包含域名。

换句话说，相对 URL 显示文件相对于当前 HTML/根域的位置。如果 URL 被复制并添加为来自另一个域的链接，则图像链接将被破坏。

提示

另外，说到图像 URL 地址，请确保使用正确的协议提供图像：尽管整个网站已迁移到 HTTPS，但当继续通过 HTTP 提供图像时，可能会出现混合内容问题。

这不会出现图像损坏问题，但它违反了最佳实践。您可以在网站审核器的网站审核 > 编码和技术因素部分找到有关混合内容问题的警告。在“不安全资源”下，单击每个页面旁边的汉堡菜单以查看确切的 URL。

5. 盗链

热链接是指链接到其他人网站上托管的文件。在这种情况下，链接网站不使用自己的服务器，而是窃取其链接到的其他网站的带宽。链接网站的编辑可能会删除该图像 - 在这种情况下，热门图像链接就会损坏。

热链接被认为是一种不好的做法，最好避免它。

6.限制文件权限

文件权限分为三种类型：读取、写入和执行，并且可以将权限授予文件所有者和用户组。例如，您可能希望仅允许一组用户访问网站上的某些目录和/或文件。

这是一种罕见的情况，因为通常文件权限会自动设置为正确的值。但意外的是，可能会出现损坏的图像错误，因为您更改了某些访问设置，并且接下来上传的新图像具有受限的权限。

这个问题并不容易解决。它可能需要更改文件权限并重新上传图像。在某些情况下，您可以使用插件来检查和修复损坏的图像链接。

7. 访问者浏览器设置不允许使用的图像

默认情况下，浏览器允许网页的所有基本功能正确呈现内容。但是，如果您发现网站上的图像损坏，请重新检查浏览器中的设置。您还可以比较带有损坏图像的网页在不同浏览器中的外观。

因此，如果您使用 Google Chrome，以下是解决此问题的方法。在浏览器设置中，检查隐私和安全 > 站点设置并查看内容部分。在这里，确保它显示“站点可以显示图像”并且“站点可以使用 Javascript”（因为某些网站可能会使用 JS 代码来延迟加载图像以优化页面速度）。

这是一个包装

通过遵循本指南中提供的步骤，您将修复网站上损坏的图像，这必将有助于更好的 SEO 和用户体验。检测损坏的图像只是技术 SEO 的一小部分。如果您有兴趣了解更多有用的内容，请跳至此综合技术 SEO 指南。