每周都要上新页
服务页、城市页、活动 Landing —— 一旦页数超出模板市场主题能承载的范围，每次编辑都会和平台打架。
我们说「网站开发」时，具体涵盖什么
SeoMata 的网站开发是夹在设计系统与生产流量之间的工程层。我们把设计 Tokens 翻译成上线代码、构建营销团队未来 3 年要编辑的模板、把数据接到 CRM/ATS、并对性能 + 监控负责到上线那一天没有意外。
这一页讲我们怎么构建、用什么栈、把每个项目守在哪条质量线上。想看设计优先的视角请去 /design-development/website-design；想看整体 hub 请去 /design-development。
0
上线 30 天内 P2+ Bug
正式环境
100%
模板有文档
每一处可编辑的字段都讲清
2
工程师 / 项目
Lead + Reviewer，不做单兵作战
判断
已经长出模板范围的 6 个信号
定制开发不是所有场景的答案。下面 6 个信号是我们提醒客户在投入预算前先自查的。
同时运营多个 offer
当网站要承载 3 个以上不同 offer（服务、产品、地域），模板会在 IA 与转化上拽你后腿。
Core Web Vitals 一直红
Page-builder 默认载入的一批 JS 让 LCP / INP 几乎不可能绿。模板调优很快撞天花板。
需要真正的可访问性
WCAG 2.1 AA 必须从设计端开始 —— 键盘焦点、屏幕阅读地标、焦点陷阱。多数 Page-Builder 主题开箱就不合规。
需要 CRM 级线索捕捉
一旦表单要做 Clearbit 充实、推 HubSpot/Salesforce、去重并触发工作流，标准表单插件就开始崩。
需要真正的预览 + Staging
营销想预览后再发布，工程想安全合并 —— 定制 Next.js + CMS 都满足；大多数模板两件都给不了。
技术栈
我们在生产上实际用的栈
我们对平台中立，但有选择。下面这些栈，都在多个 SeoMata 生产站点上被证明能达到本页的质量底线，才进入清单。
Next.js（App Router）
营销网站默认栈：编辑效率 + 边缘性能兼顾。Server Components、模板化城市/服务页用 ISR、路由级 prefetch、值得用 Edge Runtime 的地方就用。
WordPress + Blocks
编辑团队需要日常独立性时使用。精简主题 + 自定义 Block + ACF，不用 Page-Builder，托管在 Managed WP 基础设施上。
Shopify（含 Plus）
Liquid + Hydrogen，用于 DTC 与服务-商品混合业务。当目录与 SEO 表面值得 Headless 时上 Hydrogen。
Vercel / Cloudflare Edge
默认托管层。图片优化、边缘缓存、RUM、按分支预览部署、错误监控全部开箱即用。
Headless CMS（Sanity / Strapi）
内容工作流比渲染更重要时使用；或同一份内容同时驱动 Web + App + Email 时使用。
GA4 + GSC + PostHog
默认分析栈。可选 Server-Side Tagging；做漏斗 + Session Replay 的转化优化时引入 PostHog。
架构
每个项目都明确的 6 个架构决策
下面 6 个决策我们在每个项目开始就讲清楚。如果你有内部团队，这些也是你评估其他代理时该问的问题。
模板化路由 vs 单页手工
任何页面类型超过 5 个实例，都做成有内容模型的模板化路由。单页手工是例外，不是默认。
可编辑表面契约
每个模板页声明编辑可改的字段。不会再有「直接去主题文件里改」的时刻 —— 编辑安全，开发不慌。
SEO 脚手架
Title、Meta、OG、Schema、Canonical 全部代码计算并给默认值，CMS 仅在需要时覆盖。彻底消除「Meta 空」的失败模式。
图片管线与响应式 source
所有图片走平台图片管线，每个 breakpoint 显式 size。CLS 是设计出来的，不是事后补的。
集成边界
表单 / CRM / 分析 / 支付都放在一个薄薄的服务层后面，未来换厂商只需要一周，不是一个季度。
错误 + 可用性监控
Sentry（或同类）第一天就接好。生产错误呼 Lead 工程师；可用性失败呼 on-call。我们不会从客户那里听说宕机。
流程
面向可预测交付的六阶段构建流程
构建无论大小都是六阶段。每阶段都有具名负责人、书面交付物，以及与你的节点会议。没有任何工作发生在黑箱里。
Kickoff + 技术 Brief
对齐目标、栈、约束、集成、上线节点。产出：一页技术 brief，第一周内仓库 + Staging URL 上线。
Foundations Sprint
仓库脚手架、设计 Tokens、基础布局、CMS 建模、部署管线、错误监控。Sprint 1 结束时 Hello World 已经在真 URL 上预览。
模板与组件
按优先级一周一对齐地构建模板化路由。Bug 列表对客户公开，可按页评论。
集成
表单、CRM、分析、排程、支付、搜索 —— 用 Staging 凭证接入，双方各有具名负责人。
QA、性能、可访问性
跨设备 QA、Lighthouse + WebPageTest、axe-core 可访问性 Pass、每个模板页的内容 QA。公开 QA 日志。
上线 + 30 天陪跑
301 切换、索引 + 分析验证、30 天每周节点会议，之后转 retainer 或交接到内部，并附书面 Runbook。
质量
SeoMata 构建出厂时的不可妥协项
每个构建都按下列清单守底。如果预算内做不到，我们会在 scoping 阶段就摆上来 —— 不会为了凑预算偷偷砍掉质量。
Lighthouse ≥ 90 / Performance
在生产 URL、代表性设备、真实 ISP 上 —— 不是只在公司开发机上达标。
Lighthouse ≥ 95 / SEO
含可抓取、Sitemap、robots、Schema 有效性、移动可用性、Canonical。
Lighthouse ≥ 90 / Accessibility
加上 axe-core 手动 Pass 与 Top 10 模板的键盘 + 屏幕阅读器走读。
Lighthouse ≥ 95 / Best Practices
处处 HTTPS、没有 console error、清除 deprecated API、声明图片宽高比。
按模板分配 Schema
Service / Article / FAQ / Organization / LocalBusiness / Breadcrumb —— 设计期指定，CI 验证。
分析事件
主/次 CTA、表单提交、关键模板滚动深度，可接 Call Tracking。
错误 + 可用性监控
Sentry（或同类）+ 首页和 5 个关键模板的可用性检查。生产错误呼 Lead 工程师。
编辑文档
每模板字段说明、图片指引、内容语气备注、CMS 视频走读。
集成
我们经常接的集成
多数营销网站需要的集成是相似的。下面每一项我们都在生产环境接过多次，有打磨成熟的模式。
CRM（HubSpot / Salesforce / Pipedrive）
服务端 API 集成，含重试 + 去重。表单线索进入正确管道、自动分配正确 owner。
分析（GA4 / Server-Side Tagging）
GA4 事件命名规范，iOS Attribution / Ad-Blocker 影响数据时上 Server-Side；做漏斗 + Replay 时可选 PostHog。
排程（Calendly / Acuity / SimplyBook）
内嵌排程 + 字段预填、确认后 GA4 事件、可选 CRM 自动化。
支付（Stripe / Braintree）
一次性 / 订阅 / 押金流程。收据、退款、争议处理。Live + Test env 隔离。
电话追踪（CallRail / WhatConverts）
按来源动态换号、来电 GA4 + CRM 事件、合规情况下录音 + 转写。
搜索（Algolia / Typesense / 原生）
目录 + 内容搜索，含同义词、热门查询分析、目录足够大时上 Faceted 搜索。
性能
我们怎么把 Core Web Vitals 一直守在绿区
Core Web Vitals 不是项目尾期才去调的事，是我们从第一天就当作约束在设计和构建。LCP 大头来自一套认真做的图片管线（next/image 每个 breakpoint 显式 size、AVIF / WebP、只对 LCP 元素 eager load）、短关键 CSS 路径、模板化页面 HTML 边缘缓存。
INP 收益来自对 JS 诚实：可能就 Partial Hydration、第三方脚本交互后再加载、任何一个超出预算的分析或 Chat 库在上线前都会被挑战。我们用 PostHog 按路由打点 INP，回归当天就能看到。
CLS 多半是纪律问题：图片宽高比都声明、字体用 `size-adjust` 控住 swap、首次绘制后没有 DOM 抖动。任何影响模板或布局的 PR 我们都会审一次 CLS。
上线之后预算继续生效。每个 PR 都在主模板上跑 Lighthouse CI，回归超过 5 分会卡 merge 直到真人工程师签字。这一步是大多数代理跳过的地方。
交接
交接长什么样
网站、代码、分析、CMS、托管账户都归你。我们把每件事都写下来，让你可以继续和我们合作、也可以换代理、也可以收回内部 —— 18 个月后你怎么决定都行。
Runbook
仓库内 Markdown Runbook：怎么加一个模板化页面、怎么编辑内容、怎么回滚部署、怎么轮换 Key、每个集成是谁负责。
编辑培训
给内容编辑的 60 分钟录屏 + 书面指南。新成员入职可以反复用，不需要我们到场。
账户交接
Cloudflare / Vercel / 域名注册 / CMS / 分析 —— 全部所有权移交给你，并按角色分配权限。
监控继续运转
错误 + 可用性监控交接后仍在运行。可以以 retainer 形式让我们继续盯，或者直接把 Dashboard 交给你方。
工单模板
预写好的「新模板」「Bug」「内容变更」GitHub Issue 模板，未来请求都保持可范围化、可审阅。
架构图
生产架构图 —— 仓库、CMS、集成、托管 —— 持续保鲜，未来的工程师不必逆向理解。
作品
近期网站开发作品
近期上线项目的一小部分。点击任一案例可看技术范围与现场链接。
范围
标准范围里包含的内容
一个标准 SeoMata 网站开发项目默认包含下列内容。超出的工作单独列项，开工前先确认。
仓库 + CI/CD 管线
私有 GitHub 仓 + 分支保护 + PR 必审 + 主模板 Lighthouse CI + 按分支预览部署。
设计系统实现
设计 Tokens 映射 CSS 变量、按设计系统规范实现组件库、可选 Storybook。
模板化路由
任何 > 5 实例的页面类型都做成带内容模型、编辑器友好的模板化路由。
CMS 集成 + 内容建模
Sanity、Strapi、WordPress 或 Shopify 内容按页面类型目录建模。编辑看到清晰的字段名与帮助说明。
集成
CRM、分析、排程、支付、电话追踪 —— 接你方账户，双方各有具名负责人。
性能 + 可访问性
Top 模板的 Lighthouse + axe-core Pass，CI 自动化，含书面回归流程。
监控 + On-Call
Sentry + 可用性检查、生产错误呼 On-Call 工程师、上线 30 天内每周健康报告。
文档 + 培训
仓库内 Runbook、编辑培训视频 + 指南、架构图、工单模板。
询盘期常被问到的问题
能和我们现有开发团队一起做吗？
可以。约 1/3 项目是 Co-Build：SeoMata 负责 IA、设计系统、SEO 脚手架与几个关键模板，你方团队负责其余。我们在开始时就把交接边界写下来，避免责任不清。
能继续用 WordPress / Shopify / 现有平台吗？
通常可以。除非现有平台是你目标的真实阻碍，否则我们不会建议换平台 —— 不会因为我们偏好另一个栈就推荐换。
换平台时 SEO 怎么迁移？
完整 URL 清单、301 重定向地图、metadata 迁移、内链重建、Schema 再实现、Sitemap + GSC 再校验。多数换平台项目自然流量在切换期保持或上涨。
一个构建一般要多久？
典型 30–60 页服务型营销网站含集成，8–14 周。多门店 / 多商品的大型项目 14–22 周。
能先上一版再迭代吗？
可以 —— 我们有「Fast Start」轨道，4–6 周用标准栈先上 5–8 个模板的精简版，之后以 retainer 形式扩展。
你们也做移动 App 吗？
做 —— 见 /design-development/mobile-app-development。我们一般倾向先上营销网站，再用同一份内容 / API 层构建移动端。
准备开始一个构建了吗？
相关服务
继续了解相关服务
下一步
获取免费 Build 健康度诊断
提交网站与需求信息，SeoMata 会先判断问题更偏「结构与表达」还是「系统能力与流程」，从性能、扩展性、SEO 友好度与维护成本四个维度给出更合适的开发路线与投入建议。