用图像替换标题文本

Posted 2023-03-04

【中文标题】用图像替换标题文本

【英文标题】：Replacing header text with an image

【发布时间】：2010-09-24 02:08:43

【问题描述】：

我正在建立一个基于 Drupal 的网站，并希望将标题中的网站标题替换为图像文件。我偶然发现了这篇文章："Revised Image Replacement" 总结了几种技术来做到这一点。

我想知道目前在 SEO 和浏览器兼容性方面的最佳做法是什么？

【参考方案1】：

我曾经认为 Leahy/Langridge 方法是最好的，但是随着我越来越多地使用它，我发现 Phark 方法更易于实施，同样有效且更有用，因为您可以拥有链接在标题中也是如此（我以前从未做过的事情）。

这两个都不需要额外的标记，我不认为 (if Google's Matt Cutts is to be believed) 对 SEO 有太多（如果有的话）不良影响（即只要不隐藏文本，Google 就不会惩罚您）出现垃圾邮件）。

在 IE5 中两者都不工作，或者需要额外的工作才能工作，但我不知道有谁支持它了。

所以我会推荐 Phark（或 Phark Revisited，效果最好）方法。

【参考方案2】：

使用 CSS 并覆盖任何包含“文本”的元素，如下所示：（Phark 方法）

html：

<h1>Header</h1>

CSS：

h1 text-indent: -9999px;background: url('image.png') no-repeat top left;

【参考方案3】：

这些技术都没有真正解决的唯一问题是，如果有人关闭了图像，尽管现在这是一个边缘情况。

我通常发现 Phark 方法很容易实现，并且几乎总是有效，但您也可以查看 javascript 方法 - 很容易编写自己的方法。

【讨论】：

如果人们关闭了 JavaScript 会怎样？