为 SEO 准备基于图像的网页设计的最佳技术 - noscript？ [关闭]

Question

好的，所以我知道这确实令人不悦，而且这是我通常不会做的事情。事实上，我从来没有推出过这样的网站。但似乎没有太多选择。

我正在使用一个客户端进行网页设计，该客户端本质上只是一个整页滑块。最初的设计看起来可以移植到 Flash。我计划使用 jQuery，因此至少它不依赖于插件，但内容文本经过复杂设计并合并到幻灯片图像中。

据我所见，我实际上可以放置在页面上而不嵌入图像中的唯一文本是导航，并且可能是网站标题的一部分。

幻灯片图像中有很多内容——对于在 标签上放置 alt="" 属性来说太多了。我知道 HTML5 不推荐使用 longdesc="" 属性，并且无论如何都不能很好地支持它，所以它已经过时了。我想从图像中复制文本并将其放置在隐藏的

标记或 标记中，或将其偏移以使其不可见，以及其他隐藏内容的方法动态的、基于 JavaScript 的网站。但是，我也知道像 Google 这样的搜索引擎开发人员不喜欢这种事情，这可能会损害我的 SEO 排名。

元素将是一个很好的解决方案，但据我了解，如果元素的内容与文档中其他地方存在的内容重复并且是动态控制的，则您只能合法地实施它。也许我误解了？

你还能想到其他解决方案吗？

Answer 1

object元素

您可以使用object 代替img。 object element 的内容将用作后备（分别作为屏幕阅读器用户或搜索引擎机器人的替代品）：

<object data="your-image.png" type="image/png">
  <!-- the alternative/fallback content -->
</object>

longdesc属性

或者您可以为img 元素使用longdesc 属性，该属性在单独的规范中定义：http://www.w3.org/TR/html-longdesc/（工作草案）：

本规范定义了一个longdesc 属性，以将扩展描述与基于 HTML5 的内容中的图像链接起来。

meta-description

此外，您可以在description-meta element 中包含文本（或开头或摘要）：

<meta name="description" content"…">

但这只有在每张图片都有单独的 URL 时才有效（这可以通过 History API 来实现）

Answer 2

您应该创建一个 place-holder div，其中包含基于文本的内容。比创建一个 JavaScript 函数 (onload) 来用图像替换 place-holder 的 innerHTML 属性！