如何在Schema.org的JSON-LD中插入变量？兼顾性能的简便方法

直接在静态JSON里访问JS变量肯定不行——JSON是纯静态数据格式，不支持变量解析。给你几个兼顾性能的简便实现方法：

• 服务器端预渲染替换（最优性能）
  如果你的网站用后端框架（PHP、Node.js、Python Django等），直接在页面渲染阶段把变量注入JSON-LD。比如用Node.js的EJS模板：

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "MedicalOrganization",
    "url": "<%= variables.url %>/#medicalorganization",
    "name": "<%= variables.orgName %>"
  }
  </script>
  

  这种方式生成的页面是纯静态的JSON-LD，浏览器直接解析，完全没有客户端JS开销，性能最好。

• 客户端动态生成（前端专属方案）
  要是只能用前端处理，别直接在JSON里写变量，用JS先构建Schema对象，再转成JSON字符串插入页面。比如：

  // 假设variables.js已加载，里面有需要的变量
  const medicalOrgSchema = {
    "@context": "https://schema.org",
    "@type": "MedicalOrganization",
    "url": `${variables.url}/#medicalorganization`,
    "name": variables.orgName
  };
  
  const script = document.createElement('script');
  script.type = 'application/ld+json';
  script.textContent = JSON.stringify(medicalOrgSchema);
  document.head.appendChild(script);
  

  只要把variables.js放在这段代码之前加载，或者等DOM加载完成后执行，就能正常获取变量。这种方法的性能开销极小，几乎不会影响页面加载速度。

• 前端模板引擎替换
  如果你用Handlebars、Vue、React这类模板引擎，直接用模板语法替换变量就行。比如Vue项目里：

  <script type="application/ld+json" v-pre>
  {
    "@context": "https://schema.org",
    "@type": "MedicalOrganization",
    "url": "{{ variables.url }}/#medicalorganization",
    "name": "{{ variables.orgName }}"
  }
  </script>
  

  加v-pre是避免Vue解析JSON里的引号引发冲突，不同模板引擎的语法略有差异，照着对应文档写就行。

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