CSS 背景图像/按钮 - 替代文本 SEO？答案

【问题标题】：CSS Background Images / Buttons - Alt Text SEO?CSS 背景图像/按钮 - 替代文本 SEO？
【发布时间】：2012-06-06 18:35:49
【问题描述】：

我正在努力改进一个糟糕的开发人员编写的旧网站上的 SEO。它由许多通过 CSS background: 显示的图像以及按钮组成。我想知道是否有任何包含“alt / title”文本或其他 SEO 选项来保存此站点——无需整个重建。

【问题讨论】：

标签： html css seo

【解决方案1】：

你也可以使用这个：

a {
    background: url('image.png') no-repeat center center transparent;
    display: block;
    text-indent: -9999em;
    overflow: hidden;
}

把 HTML 写成：

<a href="/">Welcome</a>

由于您将“欢迎”放在<a> 标签中，因此您可以对 SEO 友好。

【讨论】：

或者如果文本仍然显示在文本/按钮之外，那么您可以将文本添加到 a/button 内的 span 或 div 中，并将显示设置为无。（这会有所帮助吗？）
@Playmaker，不需要，因为我给出了negative text indent 和overflow: hidden。那两个注意不显示文字！ :) 将内容放入 span 对 SEO 来说变得更加复杂。
没注意到。我的错。谢谢！

【解决方案2】：

如果图像未显示，则不能使用图像标签上的传统“alt/title”。

但是你可以给正在设置样式的 div 添加一个 'title' 属性。我不确定它会承载多少 SEO 权重。

【讨论】：

【解决方案3】：

查看您的元标记、描述和标题属性。让他们更富有

为每个重要的图像添加 alt，为每个 <a> 添加标题，并尽可能多地添加文本。如果它是 100% 由图像组成的，则很难保存。

【讨论】：

【解决方案4】：

您最好使用真正的 img 标签，而不是依赖 CSS background-image 属性。既然我确定你已经知道了，这里有一些其他的建议！

图像 alt 标签对 SEO 有好处，但仅作为更大策略的一部分。您将通过创建有价值的内容获得更大的 SEO 提升：博客、在相关论坛和博客上发布链接、更新您的网站副本。

定期更新的博客对您的 SEO 的作用远大于重建整个网站以向图像添加 alt 和标题标签。

您也可以考虑将图像重命名为对 SEO 更友好的名称。例如，像“flapjack.png”这样的东西比“image_01.png”更好。这不会花费太多时间。

【讨论】：