Astro.js如何在ld+json schema.org SEO JSON中访问frontmatter变量

核心原因 #

在Astro中，<script type="application/ld+json">内直接使用JS变量会因为JSON语法规则和Astro模板渲染机制冲突导致失效——JSON不允许直接插入未引号包裹的JS表达式，且Astro对这类脚本内的变量插值处理需要特殊方式。

正确实现方式 #

在组件的frontmatter中先构建完整的Schema对象，再用JSON.stringify()序列化后注入到脚本中：

---
const { title, image, description, url } = Astro.props;

// 提前构建并序列化Schema数据
const schemaData = JSON.stringify({
  "@context": "http://schema.org",
  "@type": "WebPage",
  "name": title,
  "image": image,
  "url": url,
  "description": description // 补充传入的描述字段
});
---

<script type="application/ld+json">
  {schemaData}
</script>

为什么之前的方法失效？ #

• data-* + dataset方式：这类方式属于客户端JS逻辑，而JSON-LD需要在服务端渲染时就输出完整的结构化数据，客户端动态修改无法被搜索引擎爬虫正确抓取。
• define:vars方式：define:vars用于给客户端脚本传递变量，但JSON-LD是服务端输出的结构化数据，不需要作为客户端脚本执行，因此不适用。

额外优化建议 #

• 给字段添加默认值，避免未传入时出现无效数据：

  const schemaData = JSON.stringify({
    "@context": "http://schema.org",
    "@type": "WebPage",
    "name": title || "默认页面标题",
    "image": image || "默认图片URL",
    "url": url || Astro.url.href, // 用Astro内置的当前页面URL作为 fallback
    "description": description || "默认页面描述"
  });
  

• 确保传入的image是完整的绝对URL，搜索引擎无法解析相对路径的图片地址。

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