SplideJS滑块文本无法选中致SEO问题，需实现价格文本谷歌收录

• 两个站点均采用SplideJS滑块实现功能：因存在两个分支机构，主页需同时展示两类对应数据，选中某一分支（如荷兰）时整页切换为该分支内容。此前使用「滑块+标签页」方案存在同步问题，已改为整页滑块实现。
• 当前核心问题：价格板块内的文本无法被谷歌收录，SEO专员反馈该文本被识别为图片，且滑块内文本无法选中。

pricingSplide = new Splide('#pricingsplide', {
  speed: 400,
  type: 'loop',
  padding: '0rem',
  rewind: false,
  drag:true
});

1. 调整Splide配置，优化爬虫可访问性 #

修改配置，确保非活跃滑块内容不会被display: none隐藏（爬虫无法识别此类隐藏内容），同时开启无障碍支持：

pricingSplide = new Splide('#pricingsplide', {
  speed: 400,
  type: 'loop',
  padding: '0rem',
  rewind: false,
  drag: true,
  accessibility: true, // 开启无障碍支持，辅助爬虫识别内容结构
  hidePageList: false, // 保留分页列表DOM节点，帮助爬虫理解滑块逻辑
  preventDefault: false, // 禁用阻止文本选中的默认行为
  visibility: 'hidden' // 非活跃滑块仅视觉隐藏，保留DOM可访问性
});

2. 恢复文本选中功能（CSS调整） #

Splide默认可能限制文本选中，添加以下CSS解除限制：

.splide__slide {
  user-select: auto;
  -webkit-user-select: auto;
}

3. 增强SEO：添加结构化数据 #

为价格文本添加Schema.org结构化数据，帮助谷歌明确识别内容类型，示例：

<div itemscope itemtype="https://schema.org/Product">
  <div itemprop="name">服务名称</div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">€99</span>
    <meta itemprop="priceCurrency" content="EUR">
  </div>
</div>

4. 排查文本转图片问题 #

• 确认滑块内所有价格文本均为真实HTML文本节点，无将文本转换为图片的设置。
• 检查自定义JS/CSS是否存在文本视觉替换为图片的逻辑，如有则移除。

内容的提问来源于stack exchange，提问作者Hazarcan Doğa Bakan