【发布时间】：2021-10-20 08:55:50
【问题描述】：
我在h1 中有一个打字机动画，我不希望搜索引擎扫描它，因为大多数时候，由于动画，内容不完整。
相反，我为搜索引擎提供了一个视觉隐藏的h1 来完成他们的工作。
如何“隐藏”动画h1，让搜索引擎不会扫描它？
【问题讨论】：
【发布时间】：2021-10-20 08:55:50
【问题描述】：
使用渐进增强。
不要从静态的空（无意义）内容开始，也不要逐渐用 JavaScript 填充它，这不仅从 SEO 角度来看是危险的，而且对可访问性和性能也不利。
从包含所有有意义且仅更改变换、不透明度和可见性的静态内容开始，而不是 display。并尊重prefers-reduced-motion。
现在无法从搜索引擎中隐藏页面内容片段，而且过去也不可靠。使用视觉上隐藏的h1 "for SEO" 甚至可能触发欺骗性内容检测并给您带来惩罚。
【讨论】：
-
实际上，我可以通过使用
div作为打字机的容器而不是h1来解决这个问题。这就是我说打字机时的意思：mwskwong.com. -
当然，将其描述为“打字机动画”很好地传达了总体思路。我的建议是从一开始就将您想要在 HTML 源代码中编入索引的真实内容——这样即使没有 JS并使用预先计算的 CSS 动画延迟或逐渐交换每个角色的视觉外观。同样，最好不要使用
display: none或visibility: hidden（transform scale(0); position: absolute应该没问题）并尊重prefers-reduced-motion。