51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

WordPress中添加图像描述figcaption和alt—提升文章SEO

1、添加figcaption

在WordPress的图像插入功能中,如果你为插入的图像添加了描述或标题,该描述或标题可能会自动作为 <figcaption> 输出。在编辑文章或页面时,你可以选择使用这种方式来展示图像及其相关信息,使内容更加清晰易懂。

lincol29是自动上传本地的文章,使用 typora 编写文章时,直接使用以下代码即可

<figcaption class="wp-element-caption">httpsok官网主界面</figcaption>

WordPress中添加图像描述figcaption和alt—提升文章SEO 1 使用 figcaption 描述的图片

2、添加图像alt和title

但此描述并未编入图片中,应该对 seo 没有效果。如果想做好 seo,可以在图片 img 里面加入 alt 属性,这对于搜索引擎识别图片内容非常有帮助。

lincol29是在 wordpress 中修改图片上传的代码,将 alt 和 title 属性更改为文章的标题

如何在wordpress中自动给图片添加title和alt属性呢?

需要通过修改主题的function.php代码。达到发布文章时自动为图片添加title和alt属性的目的。

//给文章的图片添加title和alt属性,lincol29发布于2024/8/14
function add_image_alt_title_tags($content) {
    global $post;
    $post_title = $post->post_title;
    $pattern = '/<img\s+([^>]*)\/?>/i'; // 更精确的匹配<img>标签的正则表达式
    preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);

    $index = 1; // 图片序号计数器

    foreach ($matches as $match) {
        $img_tag = $match[0];
        $attributes = $match[1];

        // 检查是否已经有 alt 属性,并且值为 "img"
        if (preg_match('/\balt=["\']\s*img\s*["\']/', $attributes)) {
            // 替换 alt 和 title 属性为文章标题 + 图片序号
            $replacement = preg_replace('/\balt=["\']\s*img\s*["\']/', 'alt="' . esc_attr($post_title) . ' ' . $index . '" title="' . esc_attr($post_title) . ' ' . $index . '"', $attributes);
            $index++; // 增加图片序号
        } elseif (!preg_match('/\balt=["\']/', $attributes)) {
            // 如果没有 alt 属性,则添加文章标题 + 图片序号
            $replacement = rtrim($attributes, ' /&gt;'); // 去掉末尾可能存在的空格和斜杠
            $replacement .= ' alt="' . esc_attr($post_title) . ' ' . $index . '" title="' . esc_attr($post_title) . ' ' . $index . '" /&gt;';
            $index++; // 增加图片序号
        } else {
            // 如果有 alt 属性但不是 "img",保持原样
            $replacement = $attributes;
        }

        // 替换原来的&lt;img&gt;标签为新的&lt;img&gt;标签
        $content = str_replace($img_tag, '&lt;img ' . $replacement, $content);
    }

    return $content;




}

`add_filter('the_content', 'add_image_alt_title_tags');
`

2.1、自动上传图片后的alt和title属性

WordPress中添加图像描述figcaption和alt—提升文章SEO 2 使用 上述php代码自动上传图片后的alt和title属性

赞(1)
未经允许不得转载:工具盒子 » WordPress中添加图像描述figcaption和alt—提升文章SEO