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

    // 替换原来的&amp;lt;img&amp;gt;标签为新的&amp;lt;img&amp;gt;标签
    $content = str_replace($img_tag, '&amp;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属性

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