资讯动态

给 Zola 静态站加上 JSON-LD:3 类内容标记让搜索结果长出摘要和星级

发布时间:2026/9/10 22:47:56 来源:尧图企业网站定制
给 Zola 静态站加上 JSON-LD3 类内容标记让搜索结果长出摘要和星级【免费下载链接】zolaA fast static site generator in a single binary with everything built-in. https://www.getzola.org项目地址: https://gitcode.com/GitHub_Trending/zo/zola你一定也遇到过两篇质量相当的文章搜你自己的只有干巴巴一行标题搜竞争对手的却带着摘要、发布日期和作者头像。这个差别来自 Schema.org 结构化数据。Zola 作为静态站点生成器并不内置 JSON-LD但新建 1 个模板文件、在 config.toml 里填 2 个 extra 字段站点构建完成后每个页面就自动带上机器可读的元数据构建过程零额外依赖。JSON-LD 对搜索引擎意味着什么JSON-LD 是一段嵌在script typeapplication/ldjson标签里的 JSON 文本向爬虫声明这个页面是文章、标题是 X、发布于 Y、作者是 Z。类比一下它就是贴在产品上的说明书——人类浏览器不看它但少了它搜索引擎只能靠猜 HTML 来推断这是个什么页面。Zola 构建时就把所有内容渲染成静态文件所以把标记写进 Tera 模板产出页面的 HTML 天然就带着它不需要任何运行时脚本也不影响页面加载速度。JSON-LD 模板最小写法改 1 处 建 1 个文件总共的改动量config.toml填 2 行新建templates/schema/article.html约 12 行page.html加 1 行 include。先把站点级的两个公共字段写进 config.toml这里的域名和作者名换成你自己的值base_url https://your-domain.com # 换成你的域名 [extra] author 你的名字 # 换成你的名字再新建templates/schema/article.html负责给每个页面拼出 Article 类型的标记。page.title、page.date这些是 Zola 自动注入 Tera 上下文的页面变量get_url()会把 static 目录下的图片转成正确 URL!-- templates/schema/article.html -- script typeapplication/ldjson { context: https://schema.org, type: Article, headline: {{ page.title }}, description: {{ page.description | default(valueconfig.description) }}, image: {{ get_url(pathpage.extra.image) }}, author: { type: Person, name: {{ config.extra.author }} }, datePublished: {{ page.date | date(format%Y-%m-%d) }}, dateModified: {{ page.updated_datetime | default(valuepage.date) | date(format%Y-%m-%d) }} } /script最后在templates/page.html的head里加一行{% include schema/article.html %}外面套一层{% if page.section posts %}让它只作用于博客区避免给分类页、归档页也贴上文章标记。跑一次zola build每篇文章的 HTML 里就会出现这段 JSON-LD。这是 Zola 生态里一个文档主题的首页它把 SEO-ready, sensible defaults for structured data 直接写在卖点里。如果你用的是现成主题先在主题源码里搜ldjson确认它已内置了哪些标记避免自己再写一遍。让产品页在搜索结果里带价格如果你的站点带产品展示Product 类型标记能换来带价格签的结果卡片点击率和纯文字差距明显。结构和 article.html 一样只是换掉type和字段价格从页面 front matter 的extra.price里读!-- templates/schema/product.html -- script typeapplication/ldjson { context: https://schema.org, type: Product, name: {{ page.title }}, image: {{ get_url(pathpage.extra.image) }}, offers: { type: Offer, price: {{ page.extra.price }}, priceCurrency: {{ page.extra.currency | default(valueCNY) }} } } /script在产品页 front matter 里填extra.price 299构建后该页面在搜索结果里就会带上价格和货币。如果站点还有全站搜索也可以把入口告诉搜索引擎。让首页触发搜索框展示WebSite 类型里的 SearchAction 声明本站支持站内搜索部分搜索引擎验证后会直接把一个搜索框挂在你的站点名下方省去用户多一次手动输入。target里的/search?q必须指向真实存在的搜索页Zola 自带 search 模块构建出的搜索页路径填进来即可!-- templates/schema/website.html在 templates/index.html 里 include -- script typeapplication/ldjson { context: https://schema.org, type: WebSite, name: {{ config.title }}, url: {{ config.base_url }}, potentialAction: { type: SearchAction, target: {{ config.base_url }}/search?q{search_term_string}, query-input: required namesearch_term_string } } /script预期效果搜索引擎抓到首页后你的结果条目下方多一个搜索框用户输入直接跳进你站内的搜索结果。你大概率会踩的 3 个坑⚠️ 构建成功但打开 HTML字段是空的。多半是引用了 front matter 里根本不存在的字段Tera 把它渲染成空串。临时在page.html里放一行{{ __tera_context }}构建一次看看上下文里实际有哪些变量名再照着补字段别凭记忆写。图片字段在验证工具里 404。原因是把 static 目录下的本地相对路径直接写进了标记而搜索引擎要的是完整 URL。把模板里的page.extra.image包一层get_url(path...)front matter 里只写文件名image cover.png。页面看着没问题但富媒体结果就是不出来。Article 类型有四个必填字段headline、image、datePublished、author缺一个整张卡片作废。构建后跑这条命令抽查zola build grep -rl application/ldjson public/ | head -3拿其中一个文件确认四个字段非空再稳妥一点把整页 HTML 贴进 Google Rich Results Test 逐字段核对。今天就能做的 3 件事config.toml填上base_url和[extra]的author新建templates/schema/article.html并在page.htmlincludezola build后用 grep 确认 ldjson 真的输出了下次在搜索引擎里搜你自己的文章看到的就不是一行孤零零的标题而是一张带摘要和发布日期的完整卡片。【免费下载链接】zolaA fast static site generator in a single binary with everything built-in. https://www.getzola.org项目地址: https://gitcode.com/GitHub_Trending/zo/zola创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价