WordPress自动给图片添加alt标签和title的方法

本文最后更新于 2024.04.22 20:14 因文章时效性，若有错误或相关图文已失效，请在下方留言。

在百度站长工具提供的网站seo诊断功能中，就有一项图片属性是否加上alt描述的检测。而且各大搜索引擎都有专门图片搜索，图片搜索结果展示也是根据抓取图片alt标签来分类的。从SEO的策略角度看，需要将图片上加上ALT和TITLE，来提高搜素引擎的体验度。一般的WordPress是没有这个功能，需要我们额外添加。
在WordPress中自动给图片添加 alt 标签和 title 可以通过使用插件或者添加一些自定义代码来实现。下面是2种常用的方法：

方法一：使用插件

1.SEO 插件：许多 SEO 插件，如 Yoast SEO、All in One SEO 等，会提供自动为图片添加 alt 标签和 title 的功能。你可以安装并配置这些插件，然后启用相应的功能。
2.Auto Image Alt Attributes 插件：这是一个专门用于自动添加图片 alt 标签的插件。你可以在 WordPress 插件目录中搜索并安装这个插件。

方法二：添加自定义代码

对于每一张图片，都应该认真填写其对应的描述信息。 但有时候发一篇文章，动辄十多张图片，每一张图片逐一添加，工作量很是巨大。但是不填又不利于SEO，所以就有了退而求其次的方案，即对于无alt信息的图片，自动添加当前的标题至图片的alt信息。
如果你更喜欢通过添加一些自定义代码来实现这个功能，你可以尝试以下方法：
原理：通过自定义过滤器，筛选出文章中所有<img />标签，对没有alt信息的img标签加入alt="文章标题"标签，输出增加标签之后文章。
通过 functions.php 文件添加代码：你可以通过编辑你的主题的 functions.php 文件来添加以下代码，在尾部添加完毕后，保存上传即可。这样在上传图片的时候就可以自动添加alt信息了。

1.毛坯版

// 自动给图片链接加上title和alt标签
function imagesalt($content) {
       global $post;
       $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<img$1src=$2$3.$4$5 alt="'.$post->post_title.'" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}
add_filter('the_content', 'imagesalt');
function aimagesalt($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 alt="'.$post->post_title.'" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}
add_filter('the_content', 'aimagesalt');

2.精装版

// 自动给图片链接加上title和alt标签
function add_alt_tags_to_images($content) {
    global $post;
    $pattern = '/<img (.*?)\/>/i';
    preg_match_all($pattern, $content, $matches);
    
    if (!empty($matches[0])) {
        foreach ($matches[0] as $img) {
            if (strpos($img, 'alt=') === false) {
                $alt = get_the_title($post->ID);
                $new_img = str_replace('<img', '<img alt="' . $alt . '"', $img);
                $content = str_replace($img, $new_img, $content);
            }
        }
    }
    
    return $content;
}
add_filter('the_content', 'add_alt_tags_to_images');

这段代码将会自动为文章内容中的图片添加 alt 标签，如果图片已经有 alt 标签，则不会重复添加。

3.开关按钮
可以在后台装个开关，以便使用的时候更方便，打开主题，依次找到inc/codestar-framework/options/admin-options.php，将装开关位置定位到admin-options.php自己想要的地方，复制以下代码

//自动添加alt和title属性开关
        array(
                'id'      => 'if_imagealttag_add_labels',
                'type'    => 'switcher',
                'title'   => '自动添加alt和title属性',
                'label'   => '启用后可自动为文章图片添加alt和title属性',
                'default' => false,
        ),

保存后刷新在该位置即可看到效果。