Nuxt3实现SEO友好折叠文本功能

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《Nuxt3实现可SEO的折叠文本功能》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

本文介绍一种兼顾 Googlebot 索引完整性与用户体验的纯前端文本折叠方案：使用 CSS `line-clamp` 控制行数，通过 JS 切换 class 实现“显示更多/更少”，确保搜索引擎可完整抓取原始内容。

在 Nuxt 3 项目中实现“三行截断 + 展开按钮”功能时，关键目标是：对用户友好（视觉上折叠）、对 SEO 友好（HTML 中保留全部文本，不依赖 v-if 或动态渲染隐藏内容）。这意味着不能用 v-show="false"、v-if="showAll" 或 display: none 隐藏文字——这些方式可能导致 Googlebot 无法索引被隐藏的内容。

✅ 正确做法是：所有文本始终存在于 DOM 中，仅通过 CSS 视觉截断；点击按钮仅切换 line-clamp 值，不增删节点、不修改 innerHTML。

✅ 推荐实现方案（Nuxt 3 兼容）

1. HTML 结构（服务端渲染友好）

<!-- 在 .vue 组件模板中直接写入 -->
<p class="lines-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
<button class="show-more"></button>

⚠️ 注意：

和 必须相邻（button 是 p 的紧邻兄弟节点），以便 JS 通过 previousElementSibling 准确定位。

2. CSS 样式（支持 WebKit + 回退兼容）

/* 支持 line-clamp 的基础样式 */
[class^="lines-"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 关键：启用行数限制 */
  -webkit-line-clamp: 3; /* 默认值，可被覆盖 */
}

.lines-1 { -webkit-line-clamp: 1; }
.lines-2 { -webkit-line-clamp: 2; }
.lines-3 { -webkit-line-clamp: 3; }

/* 展开状态：取消行数限制 */
.lines-all {
  -webkit-line-clamp: unset;
  /* 可选：重置高度以避免残留溢出 */
  max-height: none;
}

/* 按钮文字动态切换 */
.show-more {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

.show-more::after {
  content: 'Show More';
}

.show-more[data-show-all="true"]::after {
  content: 'Show Less';
}

3. JavaScript 行为（建议放在 onMounted 中）

// 在 setup() 或 <script setup> 中
import { onMounted } from 'vue'

onMounted(() => {
  const handleClick = (e: MouseEvent) => {
    if (!(e.target instanceof HTMLElement)) return
    if (!e.target.classList.contains('show-more')) return

    const btn = e.target
    const content = btn.previousElementSibling as HTMLElement | null
    if (!content || !content.classList) return

    const showAll = btn.dataset.showAll === 'true'
    content.classList.toggle('lines-all', !showAll)
    btn.dataset.showAll = String(!showAll)
  }

  document.addEventListener('click', handleClick)
  return () => document.removeEventListener('click', handleClick)
})

✅ Nuxt 3 提示：将事件监听器绑定到 document 是安全的（服务端无 DOM），且 onMounted 确保只在客户端执行；同时记得清理监听器防止内存泄漏。

4. 进阶优化建议

• 无障碍支持（a11y）：为按钮添加 aria-expanded 和 aria-controls：

  <button class="show-more" 
          :aria-expanded="showAll.toString()" 
          :aria-controls="'desc-' + id">
  </button>
  <p :id="'desc-' + id" class="lines-3">...</p>

• 过渡动画：line-clamp 本身不支持 CSS 动画，但可通过 max-height + transition 模拟（需预估最大高度，适用性有限）。
• SSR 安全性：本方案所有文本均在初始 HTML 中输出，Googlebot 可 100% 抓取完整内容，完全符合 SEO 最佳实践。

✅ 总结

该方案零依赖、轻量、SEO 安全，完美适配 Nuxt 3 的 SSR/SSG 构建流程。核心原则是：内容永远可见（DOM 中存在），仅视觉折叠；交互仅改变 CSS 属性，不遮蔽、不销毁、不延迟加载。开发者可放心复用至产品描述、博客摘要、FAQ 等多类长文本场景。

到这里，我们也就讲完了《Nuxt3实现SEO友好折叠文本功能》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！