如何让带动画的h1标签不被搜索引擎抓取

以下是经过主流搜索引擎验证的有效方案，可按需选择：

• 首选方案：添加data-nosnippet属性
  这是谷歌、百度等主流搜索引擎官方支持的标记，直接添加到你带动画的h1标签上，搜索引擎会直接跳过抓取该标签的内容，不会影响动画的正常渲染和用户可见性，代码示例：

  <h1 data-nosnippet class="typing-animation">你的动画展示文字</h1>
  

• 次选方案：添加aria-hidden="true"属性
  该属性原本用于告知屏幕阅读器跳过该装饰性元素，绝大多数搜索引擎也会遵循该规则，不会抓取对应内容，适配无障碍场景的同时满足搜索隐藏需求，代码示例：

  <h1 aria-hidden="true" class="typing-animation">你的动画展示文字</h1>
  

  由于你已经设置了专供搜索引擎和无障碍识别的视觉隐藏h1，该属性带来的屏幕阅读器隐藏效果不会产生负面影响。
• 兼容老旧搜索引擎方案：JS动态注入动画内容
  页面初始加载时带动画的h1为空，页面加载完成后再通过JS注入动画内容触发打字机效果，大部分搜索引擎爬虫对这类动态注入的展示类内容抓取优先级极低，配合你已有的静态隐藏h1可以完全避免内容冲突，代码示例：

  <!-- 专供搜索引擎/无障碍识别的视觉隐藏h1 -->
  <h1 class="visually-hidden">页面完整标题内容</h1>
  <!-- 带动画的展示用h1，初始为空 -->
  <h1 id="typing-header"></h1>
  
  <script>
    window.addEventListener('load', () => {
      const typingEl = document.getElementById('typing-header');
      // 注入动画内容，后续执行你的打字机动画逻辑
      typingEl.textContent = '你的动画展示文字';
      // initTypingAnimation(typingEl);
    })
  </script>
  

注意：不要使用display: none、visibility: hidden这类CSS属性处理带动画的h1，会直接影响用户侧的视觉展示效果。你当前的「一个静态隐藏h1供搜索识别+一个展示用动画h1」的架构是符合语义规范的，无需额外调整结构。

内容的提问来源于stack exchange，提问作者Matthew Kwong