我想要在页面加载后淡入的图像。
我已将该图像的 css 设置为不透明度为零。
然后我使用 js 将图像淡入（将不透明度增加到 1）。这会在页面加载后大约一秒钟内发生。
我可以想象不透明度为零的元素不会为 SEO 增加价值。不过我知道谷歌爬虫在一定程度上可以读取JS。这是否意味着它会在一秒钟后理解它是可见的并像任何常规图像一样对其进行索引？
如果我在页面加载时将不透明度替换为“display:none”并在一秒钟后用 JS 替换为“display:block”，那么 SEO 会受到怎样的影响？
任何见解都将不胜感激，干杯！
【问题讨论】：
标签： javascript css seo opacity
SEO 是一门黑暗的艺术。能准确回答这个问题的只有谷歌的工程师，他们不会回答。有很多“SEO 专家”会虚张声势说他们知道答案，但事实是他们都在做出有根据的猜测。
我对这个问题的回答如下，但请记住以上内容——我只是做出有根据的猜测。
像这样的东西是极端情况；如果你的页面写得很好并且语义化，那么即使这样的细节确实有影响，它也会被实际内容的权重更大的影响所淹没。
无论如何，如今将不透明度和可见性与动态内容结合使用非常普遍，因此 Google 必须意识到这一点，并将其纳入其算法。因此，我认为这不会影响您。但重申一下，这是一个有根据的猜测。
【讨论】：
用显示样式替换不透明度不应影响您的 SEO；但我确实推荐 display:none, display:block 选项而不是 opacity 以获得更多的浏览器兼容性。
我不确定 Crawler 可以读取什么，但使用 opacity 不会损害您的形象。如果您想为其添加更多 SEO，请在您的图像周围添加 <figure> 和或 <figurecaption>。并且不要忘记 alt 和 title 属性（如果您使用的是 figcaption，请不要忘记标题）。
【讨论】：
我很确定这适用于 seo：
<span style="text-indent: -9999px">
This will not be visible on screen but readable by a crawler
</span>
这也应该有效
<div style="position: relative; left: -9999px">
This will not be visible on screen but readable by a crawler
</div>
但我明白这两种技术可能不适用于您的具体情况。
【讨论】：