Next.js中三元运算符动态设置meta描述的写法问题排查

• dangerouslySetInnerHTML是用于设置DOM元素子节点HTML内容的专属属性，不能传入meta标签的content属性值中。meta是无内容的自闭合标签，不存在内部子节点，本身就不支持渲染内部HTML。
• 现有写法的语法逻辑完全不符合JSX规则：content属性仅接受纯字符串类型值，把dangerouslySetInnerHTML属性对象作为content的返回值，浏览器完全无法识别。
• meta description本身的规范就不支持HTML标签，所有搜索引擎抓取meta描述时只会读取纯文本内容，保留HTML标签反而会导致搜索摘要里出现裸露的标签字符，影响展示效果。

核心逻辑是先把htmlsummery字段里的HTML标签全部剔除转为纯文本，再按字段优先级赋值给meta的content属性即可。

1. 先写HTML转纯文本的处理方法，根据你的渲染场景二选一：

// 客户端/支持DOMParser的环境用，解析更准确
const stripHtmlTags = (htmlStr) => {
  if (!htmlStr) return ''
  const tempDom = new DOMParser().parseFromString(htmlStr, 'text/html')
  return tempDom.body.textContent?.trim() || ''
}

// 服务端渲染/无浏览器API环境用，无额外依赖
const stripHtmlTags = (htmlStr) => {
  if (!htmlStr) return ''
  return htmlStr.replace(/<[^>]*>/g, '').trim()
}

2. 直接给meta标签的content属性传入处理好的纯文本即可，不需要用dangerouslySetInnerHTML：

<meta
  name="description"
  content={itm.htmlsummery ? stripHtmlTags(itm.htmlsummery) : itm.Summary?.trim()}
/>

如果你用Next.js App Router的generateMetadata配置元数据，写法更简洁：

// 对应页面/page.js
export async function generateMetadata({ params }) {
  // 替换为你实际获取itm数据的逻辑
  const itm = await getPageData(params.slug)
  const description = itm.htmlsummery ? stripHtmlTags(itm.htmlsummery) : itm.Summary?.trim()
  return {
    description
  }
}

注意：不要尝试在meta description中保留任何HTML格式，不管是富文本的加粗、换行还是链接标签，都不会被搜索引擎解析渲染，只会作为普通字符串展示在搜索结果摘要中。

内容的提问来源于stack exchange，提问作者vivek kn