如何用原生JS通过单个变量修改多个meta标签的description属性

结论 #

技术上可以通过 JavaScript 实现统一变量赋值，但非常不推荐这么做，核心原因是搜索引擎、社交平台爬虫的抓取逻辑限制。

为什么不推荐？ #

大部分主流搜索引擎、社交平台的爬虫抓取页面元数据时，默认只会读取服务端返回的静态 HTML 内容，只有少部分爬虫会执行页面 JS 后再读取内容。
你提到的三个标签都是 SEO 搜索排名、社交平台分享展示的核心字段，如果用 JS 动态赋值，大概率会出现爬虫无法读取到正确描述的情况，直接影响页面搜索排名和分享卡片的展示效果。

若你用的是纯前端渲染的 SPA 项目，且已经做了预渲染（Prerender）处理，非要用 JS 实现可以参考以下方案： #

• 先定义统一的描述变量

const siteDescription = "此处填写你的站点统一描述内容";

• 分别给三个meta标签赋值，建议把这段代码直接内联写在页面<head>里，尽量提前执行：

// 赋值普通描述meta
const metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) metaDesc.content = siteDescription;

// 赋值结构化数据描述meta
const itempropDesc = document.querySelector('meta[itemprop="description"]');
if (itempropDesc) itempropDesc.content = siteDescription;

// 赋值OpenGraph社交分享描述meta
const ogDesc = document.querySelector('meta[property="og:description"]');
if (ogDesc) ogDesc.content = siteDescription;

最优方案 #

如果你的项目支持服务端渲染（SSR）、静态站点生成（SSG），优先在服务端/项目构建阶段就把三个meta的content值统一注入，完全规避JS动态赋值的兼容问题。

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