Question

我使用以下代码验证了w3c验证错误。

<div class="media">
  <div class="pull-left">
    <img class="img-responsive" src="http://10.70.2.81/resource/images/Trustworthy-Guidance.png" >
  </div>
  <div class="media-body">
    <h4 class="media-heading text-align-left">Trustworthy Guidance</h4>
    <p class="text-align-left font-family-light">With up-to-date knowledge of various technology platforms and programming languages, we have the expertise to guide you to the right software solution for your business.</p>
  </div>
</div>

我添加了以下代码，用于使用jQuery动态地将缺失的alt应用于图像：

$(document).ready(function() {
    $('img').each(function() {
        var $img = $(this);
        var filename = $img.attr('src').replace(new RegExp("-", "g"), ' ');
        var filename1 = filename.substring(filename.lastIndexOf('/')+1);    
        var attr = $(this).attr('alt');
        var title = $(this).attr('title');    

        if (typeof attr == typeof undefined || attr == false) {
            $img.attr('alt', filename1.substring(0, filename1.indexOf('.')));
        }
    });
});

即使我在w3c验证中遇到与image must have an alt attribute相同的错误。如何使用jQuery避免该错误，否则我需要在所有页面中手动编辑。

Answer 1

您无法使用JavaScript将图片alt属性（其他任何）设置为您的文档，以成为有效的HTML输出！

w3c验证，机器人或抓取工具等服务不会执行JavaScript代码。因此，根据您的页面请求，您的HTML完全错误并且缺少这些信息。浏览器可以执行您的JavaScript代码并将正确的信息添加到DOM元素。对于使用通用浏览器的用户来说，一切似乎都很好，但对于任何自动化系统，它都没有。

因此，在页面加载后，使用JavaScript动态地执行此类操作通常是一个坏主意，因为搜索引擎无法正确收集数据。图片alt是搜索引擎的重要属性，他们无法在您的示例中阅读此信息。

如果你想拥有一个最友好的SEO页面，你应该根据要求提供正确的HTML，而不是之后操纵内容！

使用jQuery动态地将缺少的alt应用于图像，显示类似＆＃34;图像必须具有alt属性＆＃34;在w3c验证

1 个答案: