如何使用PHP自动添加图像的“alt”属性，如果缺失，则使用图像文件名？

Question

我需要为数百张图片添加图像 alt 标签。问题在于这将会非常耗时，而且似乎有更简单的解决方案。

我已经使用 JavaScript 实现了部分功能，如下所示：

<script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
    if (typeof attr == typeof undefined || attr == false) {
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    }  
  });  
 });  
 //]]>  
</script>

这个的作用正好是我想要的，举个例子，如果我有这张图片：

<img src="http://mywebsite.com/images/the-image1.jpg" />

然后 JavaScript 将自动添加 alt，就像这样：

<img src="http://mywebsite.com/images/the-image1.jpg" alt="the-image1" />

这段话的意思是：“好吧，这很好，但现在我想用PHP来做，因为问题在于这只是将标签添加到前端，这意味着它在页面源代码中不可见（仅在检查元素中），这意味着搜索引擎无法看到alt标签，这意味着唯一的方法是使用php将其直接放入页面。那么我该如何使用php实现上述javascript解决方案呢？”

- agvr3

---

最简单的解决方案是将其添加到PHP中...但我在这里没有看到。 - Scott

我在代码中没有看到任何attr变量，但是你在if语句中使用了它。 - akinuri

@Scott 我不确定你的意思是什么。 - agvr3

@akinuri，您能否详细说明您所指的问题？上面的JavaScript确实可以工作。 - agvr3

图像是通过基本的HTML在PHP网页中输出的，即在网页中手动输入<img src="" />，例如WordPress博客文章。 - agvr3

Answer 1

文件名是否始终提供有意义的slug？如果不是，最好只使用空的alt标签。网络爬虫已经获取了图像文件名，因此仅在其实际描述图像时添加最后一位才会有所帮助。（这也不是100％的真实情况，它不会通过JS进行索引，一些机器人（尤其是Google）确实会在某种程度上解析JavaScript。）

如果文件名不具有描述性，它可能会对SEO和屏幕阅读器产生更多的负面影响。我假设如果您打算继续使用此方案，则会提供具有描述性的文件名。

我假设这些图像并没有以某种方式进行内容管理，您可以从标题或描述中提取alt（和/或longdesc）属性吗？

如果这是一次性修复，再次取决于命名的质量，这可能是可以接受的。几百张图片可能不需要太长时间，而且总是有[广告已删除] ：）

替代文本有多个作用：

• 屏幕阅读器会阅读替代文本以取代图片，使得那些视觉或认知障碍的人可以访问图片的内容和功能。
• 如果浏览器未能加载图片文件或用户选择不查看图片，则替代文本将在浏览器中显示。
• 替代文本为图片提供了语义含义和描述，这可以被搜索引擎读取，或者仅通过页面上下文确定图片的内容。

http://webaim.org/techniques/alttext/

- ldg

---

是的，实际上我网站上的所有图片都有有意义的名称，因为我总是将文件名命名为适当的描述性名称，因此使用文件名作为alt标签实际上非常有用和描述性。添加alt标签的原因是因为搜索引擎明确告诉我需要添加缺失的alt标签，并告诉我缺失的alt标签正在损害我的排名。 - agvr3

Answer 2

你没有说明如何输出你的HTML内容，更具体地说是关于图片标签。

但根据你的问题，我猜测你有一个包含许多img标签的HTML文件，并且你想在缺少alt属性的情况下添加它，而不必手动完成这项工作。

如果是这种情况，可以使用PHP解析你的HTML文件，并将结果保存到一个新的HTML文件中，其中包含所有包含所需alt标记的img标记。

你可以使用PHP方法file_get_contents()读取HTML文件内容。

然后使用preg_replace()解析检测缺少alt属性的img标签，并添加它们。

最后，使用file_put_contents()保存已解析的内容回到一个HTML文件中，以备后用。

一个PHP的实现可能是：

// Retrieve the HTML content to be parsed
$html = file_get_contents( "path_to_html_file" );

// This regexp select all img tags not already containing an alt attribute
$pattern = '#<img(?!.*alt=")(.+src="(([^"]+/)?(.+)\..+)"[^ /]*)( ?\/?)>#i';

// Add alt attribute to img tags lacking it
// put the filename without extension as a value to the alt attribute
$parsed_html = preg_replace( $pattern, '<img$1 alt="$4"$5>', $html );

// Save the parsed content to a new file
file_put_contents( "path_to_parsed_html_file", $parsed_html );

- Matt Musia

---

图片是通过HTML输出的，例如在博客文章中。没有PHP添加图片。它是在WordPress中，所以我不确定您的解决方案是否可行。请告诉我。 - agvr3

你不应该使用正则表达式来解析HTML文件。最好使用DOM解析器，如果图像具有类、数据属性、宽度、高度等，那该怎么办呢？ - DarkBee

不行，这样做不起作用。 我建议的是一次性处理，最终你会得到一个新的HTML代码，可以用来更新你在WordPress中的代码。 - Matt Musia

@DarkBee，任何alt属性都将阻止正则表达式匹配包含它的img标记。无论其在标记内的位置如何。 - Matt Musia

你说得对。它不能与在同一目录中的图像一起使用。我已经编辑过它，使路径可选。这里是更新后的版本正则表达式测试器（检查preg_replace选项卡以查看结果） - Matt Musia

Answer 3

这样就搞定了

jQuery(document).ready(function () {
  jQuery("img").each(function () {
    var img_src = jQuery(this).attr('src');
    if (typeof img_src !== typeof undefined && img_src !== false) {
      var img_alt = jQuery(this).attr('alt');
      var str = img_src
      var pieces = str.split('/');
      var imgName = pieces[pieces.length - 1];
      var imgnameArray = imgName.split('.');
      var alt = imgnameArray[0];
      if (img_alt == '' || typeof img_alt === typeof undefined || img_alt === false) {
        jQuery(this).attr('alt', alt);
      }
    }
  });
});

- Dhaval Verma

Answer 4

我使用这个函数来替换$content中所有没有或空alt属性的图片为文件名：

 $content = preg_replace_callback('~<img(.*?)>~', function ($matches) { //Search for all images
        if (!preg_match('~alt="\S+"~', $matches[1])) { // if alt with any characters not exists
            $img = preg_replace('~alt="\S*"~', '', $matches[0]); // remove empty alt
            preg_match('~src="(?:(?:[^"]+/)?(.+)\..+)"~', $img, $src); // get filename from src
            $alt = preg_replace('~-|_~', ' ', $src[1]); //replace '-' and '_' symbols with space symbol
            return preg_replace('~<img~', '<img alt="' . $alt . '"', $img); // put new alt into tag
        } else {
            return $matches[0];
        }
    }, $content);

- Movs