HTML如何给带背景图的a标签添加锚文本解决SEMRush告警问题

你当前使用的是带CSS背景图的空a标签，没有可识别的文本内容，因此会触发SEMRush的锚文本缺失告警。直接在a标签内添加可见文本会覆盖背景图，可选择以下两种无视觉干扰的方案处理：

方案1：使用屏幕阅读器专用文本（兼容性最好） #

这种方案同时满足SEO要求和无障碍访问规范，所有检测工具都可识别：

1. 先在全局CSS样式表中添加屏读专用样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 修改你的a标签代码，内部添加带sr-only类的锚文本：

<a href="/blogpost/How-to-Remove-Mold-from-Exterior-Walls" class="block-20 rounded" style="background-image: url('images/How-to-Remove-Mold-from-Exterior-Walls.png');">
  <span class="sr-only">How to Remove Mold from Exterior Walls</span>
</a>

方案2：使用aria-label属性（改动最小） #

如果不想额外添加CSS样式，直接给a标签加aria-label属性即可，主流SEO检测工具都支持识别：

<a href="/blogpost/How-to-Remove-Mold-from-Exterior-Walls" class="block-20 rounded" style="background-image: url('images/How-to-Remove-Mold-from-Exterior-Walls.png');" aria-label="How to Remove Mold from Exterior Walls">
</a>

注意事项 #

• 锚文本内容要和目标页面主题匹配，直接使用目标博文标题是最优选择
• 两种方案都不会改变原有页面的视觉效果，背景图可以正常显示

内容的提问来源于stack exchange，提问作者New to This