我如何用任何其他技术取代图像更好的SEO？

Question

我的网站有很多不太好的图片，因为我们里面有很多谷歌不会知道的内容。那么，通过使用CSS或JS，难道没有一个解决方案可以将这些转换成更好理解的谷歌格式吗？

Answer 1

您真正需要做的就是确保所有包含希望索引的文本的图像都与该文本具有适当的alt属性。这不仅对谷歌很重要，而且对于拥有屏幕阅读器和文本模式浏览器的人来说也很重要。

测试你的网站的最好方法是看看它在Lynx、链接或w3m这样的文本模式浏览器中的样子。您还可以尝试在线Lynx查看器和抓取作为谷歌工具。

另请参阅：

• 搜索引擎优化入门指南 (下载该网页上的PDF )
• 网站管理员指南:帮助Google查找、爬行和索引站点的最佳实践

Answer 2

不要使用图像，而是尝试使用文本和CSS。你可以做下面这样的事情。

HTML：

<a href="example.com" class="call-button">Call us now to order!</a>

CSS：

a.call-button {
  display: block;
  width: 100px;
  height: 100px;
  background-image:url('imageofphone.png');
}

因此，基本上，你创建一个图像，没有任何文本，你需要什么。然后创建与图像大小相同的锚点，并将其作为元素中的背景。

对于Google来说，这个链接只是一个干净的文本链接，你可以从上面的HTML中看到，但是对于访问者来说，他们会看到所有漂亮的图片。

唯一的缺点是，除非你在它们上使用CSS，否则文本看起来可能有点无聊。

Answer 3

如果您讨论的是包含大量文本/数据的复杂图像(如扫描纸质文档、饼图、信息图形等)，一种可能的方法是使用object元素。

示例用于扫描书面信函：

<object data="scan.png" type="image/png">
  <p>Hello John!</p>
  <p>I'm sorry for not writing to you earlier, but I …</p>
  <p>You can find the video at <a href="http://example.com/video">http://example.com/video</a>, I hope you enjoy it.</p>
  <p>…</p>
  <p>Yours sincerely …</p>
</object>

如果用户客户端能够/应该显示图像，则应该显示scan.png。如果客户端无法显示图像(文本浏览器)，或者用户禁用了图像(低带宽，屏幕读取器)，或者图像无法解析(搜索引擎)，或者图像资源不存在(404，服务器下线)，则应该显示/使用回退内容，这是object元素的内容。

对于回退内容，可以在流量含量 (包括简单的文本)和交互内容类别中使用HTML元素。

请注意，浏览器支持在过去并不是最好的，但我想今天大多数浏览器都应该没有object的问题(可能参见这个问题)，尤其是如果用于图像的话。关于搜索引擎优化:我不知道哪个搜索引擎/是否正确地处理object回退内容；找不到文档或测试。在这个问题中，它说“获取作为谷歌”工具没有显示object元素resp。回退内容(但不知道是真的还是曾经是真的)。老实说，我无法想象谷歌会忽视object元素的后遗症，因为这个元素是14年前在HTML4中指定的。不知道/不理解object的搜索引擎会将回退内容视为“真实”内容，因为它并不是在属性值中“隐藏”(比如alt)；对它们来说，回退内容只是包含在“未知”元素中的普通HTML。