企业官网建设流程全解析

Vista.js SEO 优化完全指南：Metadata、Sitemap 与 OG 图片自动生成实战

【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vista

Vista.js 是一个功能完整的 React 全栈框架，它把 SEO 需要的三件大事——Metadata 元数据、Sitemap 站点地图、OG 社交分享图片——全部内置成了"约定优于配置"的一等公民能力。你只需要在app/目录下按约定放好文件，Vista.js 就会自动为每个页面生成<head>元信息、sitemap.xml、robots.txt，甚至用 JSX 直接渲染 OG 图片。本文带你用最短路径跑通这套 SEO 自动化流程。

一、为什么 Vista.js 的 SEO 方案更省心

传统项目做 SEO，往往要自己拼<meta>标签、手写 XML、维护分享图。Vista.js 的思路是：按文件位置约定功能，源码位于 packages/vista/src/metadata/ 与 packages/vista/src/og/，框架在构建和渲染时自动接管。

官方约定说明可直接查阅 app.md。

二、Metadata 元数据：一处配置，全局生效

Metadata 类型定义在 types.ts，覆盖了title、description、keywords、openGraph（含 article / profile / book 等多种 OG 类型）、结构化数据等几乎全部 SEO 字段，并支持 json-ld.tsx 输出结构化数据。

它还有一个很实用的设计——元信息沿路由树自动合并，由 merge.ts 中的mergeMetadataChain完成：父级 layout 声明siteName，子页面只写title，最终页面上就是完整、不重复的元信息，无需在每个页面重复粘贴描述。

三、Sitemap 与 robots.txt：五分钟上线站点地图

以本仓库的官网应用为例（完整代码见 sitemap.ts/sitemap.ts>) 与 robots.ts/robots.ts>)）：

• Sitemap：调用sitemap(...)，传入每个页面的url、lastModified、更新频率与优先级即可。仓库里通过 lib/site.ts 的getSiteMapEntries()动态收集所有文档页面，新增文档后地图自动更新，主页优先级设为 1、其余 0.7。
• Robots：调用robots(...)声明"允许所有爬虫访问全站"，并顺手把sitemap.xml的地址写进host配置，方便搜索引擎发现。
• Web App 清单：manifest.ts/manifest.ts>) 用manifest(...)声明应用名称、启动页、主题色与图标，支持"添加到主屏"。

三个文件都是几十行的声明式函数，没有任何 XML 手写，这就是"约定优于配置"带来的收益。

四、OG 图片自动生成：用 JSX 画一张分享图

这是 Vista.js 最有趣的部分。vista/og导出的ImageResponse（实现在 image-response.ts）基于 Satori + resvg 工作流：你写 JSX 布局，它输出标准 PNG 图片。

模板应用里已经备好了一个开箱即用的示例 opengraph-image.tsx，它做了三件事：

1. 声明图片规格：1200×630的标准社交卡片尺寸、image/png类型，并导出alt文本；
2. 加载字体：拉取 Inter 字体保证渲染清晰；
3. 写一段 JSX：深色背景 + 居中大字，像写普通组件一样设计分享图。

框架返回的图片自带一年期的强缓存头，既省流量又保证分享图长期稳定。你可以在此基础上加 Logo、渐变、页面标题变量，让每篇文章都有独一无二的分享卡片。

五、新手落地清单：5 步完成 SEO 自动化

• Step 1：确认站点基础信息（名称、域名、描述、关键词）集中管理，参考 lib/site.ts 的组织方式；
• Step 2：在页面组件中导出 metadata，写清title与description；
• Step 3：添加app/sitemap.ts，列出核心页面并标注lastModified；
• Step 4：添加app/robots.ts，声明允许抓取并挂上站点地图地址；
• Step 5：用vista/og的ImageResponse生成站点 OG 大图，再按需为重要文章做动态版本。

六、小结

Vista.js 把 SEO 从"一堆零散的手工活"变成了"按约定放文件"：Metadata 自动合并、Sitemap 动态生成、OG 图片用 JSX 编写。对于新手来说，跟着上面 5 步清单操作，一个具备完整搜索引擎友好能力的全栈站点就可以直接上线了。更多细节可继续探索 packages/vista/src/metadata/routes.ts 中的序列化实现，以及官网文档 docs/。

【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vista