Nuxt.js使用v-html实现SEO时提取纯文本及vue-social-sharing配置问题

问题1：提取带HTML标签内容中的纯文本 #

你可以通过正则剥离HTML标签的方式实现纯文本提取，新增一个通用工具方法即可：

// 全局通用方法，可放在utils目录下复用
const stripHtmlTags = (rawHtml) => {
  return rawHtml ? rawHtml.replace(/<\/?[^>]+(>|$)/g, "").trim() : ""
}

使用时直接将带<p>标签的内容传入该方法，就能得到纯文本Diwali：

// 示例：在computed中预处理内容
computed: {
  pureTextContent() {
    // 这里的rawContent就是你原来带<p>标签的内容
    return stripHtmlTags(this.rawContent)
  }
}

问题2：优化SEO耗时 #

你可以从以下两个方向优化：

• 提前处理内容：不要在客户端渲染阶段才处理HTML标签提取纯文本，将剥离标签的逻辑放到服务端执行（Nuxt2 放在asyncData/fetch钩子中，Nuxt3 放在useAsyncData/服务端组件逻辑中），直接生成纯文本内容后再注入到页面SEO配置和分享组件参数中
• 避免冗余DOM解析：不要通过v-html渲染后再读取DOM内容的方式获取Diwali，直接从原始数据源处理得到纯文本，跳过不必要的DOM渲染步骤

vue-social-sharing 组件适配调整 #

直接将预处理好的纯文本传入组件对应参数即可，不需要修改组件原有逻辑：

<ShareNetwork
  v-for="network in networks"
  :network="network.network"
  :key="network.network"
  :style="{backgroundColor: network.color}"
  :url="sharing.url"
  <!-- 这里传入处理好的纯文本即可 -->
  :title="pureTextContent"
  :description="pureTextContent"
  :quote="sharing.quote"
  :hashtags="sharing.hashtags"
  :twitterUser="sharing.twitterUser"
>
  <i :class="network.icon"></i>
  <span>{{ network.name }}</span> 
</ShareNetwork>

内容的提问来源于stack exchange，提问作者Shweta Konde