二、设计阶段：嵌入 SEO 要素

步骤 4：设计草图中预留 SEO 内容位置

在设计原型中，明确位置放置的内容类型。例如：

• 页眉和页脚：导航 + 面包屑（Breadcrumb），这些有利于 SEO。

• 主内容区域：H1 标题、H2 分节、段落文本、图片 + ALT 文本注释（在设计稿中用注释或注染标记）。

• Sidebar 或内链区域：相关内容、相关文章链接等，以促进内部链接结构。

在 Figma 的设计文件中，可以在每个页面的 Frame 中，用图层命名或 Notes/Comments 标记出“Meta Title 占位”、“Meta Description 占位”、“图片 ALT 文本占位”等。

步骤 5：图像 &媒体优化设计

• 在设计阶段，尽量选择矢量图/可缩放图标 (SVG)，或者确定图像大小（宽 × 高），以减少前端需要裁切或拉伸。

• 在 Figma 中用插件或导出设定标准的分辨率与尺寸。

• 给每张图片设定文件名规范（虽然 Figma 导出后可能交付给开发，但在命名规范在设计阶段就定义可以减少混乱）。例如 product‑blue‑shirt_600x400.jpg。

• 在设计稿中用白板（Notes / Design Notes）标注每张图像应有的 ALT 文本内容。设计师与内容 / SEO 团队协作定义 ALT 文本占位。

步骤 6：响应式设计与可访问性

• 用 Figma 的 Auto Layout & Constraints / Responsive Resizing 功能来设计多个断点，并测试在不同屏幕尺寸下的布局效果。

• 保证按钮、链接、触控目标 (touch target) 足够大；行距、字间距适合移动端阅读。

• 颜色对比度足够以符合 WCAG（无障碍访问）标准，如文本颜色与背景的对比度。可在设计中用插件检查颜色对比度。

• 标题层次清晰，用 H1, H2, H3 在设计稿中区分级别，并让开发能对应导出 HTML 正确结构。

三、协作与审查阶段

步骤 7：设计与 SEO 团队同步评审

• 在设计完成初稿后，不仅设计师、产品经理审稿，还需 SEO 专家参与评审。审查内容包括：标题 / meta 占位是否清晰；H1 / H2 层次是否合适；页面加载假设是否合理（图片尺寸、动画效果等）；浅色或重色背景下可读性；导航结构是否清晰易爬行（crawler‑friendly）。

• 在 Figma 中使用 Comments 或 Review 功能，标记发现的问题，并生成修改任务。

步骤 8：插件／工具辅助校验

Figma 社区有很多插件可以帮助设计阶段检测 SEO 或 UI 可用性问题，例如：

• 用来检查颜色对比度的插件

• 检查字体大小是否太小无法阅读

• 插件帮助模拟不同网络速度或设备尺寸下的视图

（具体插件名要看社区最新状态，二格网络公司在最近项目中用过比如 “Accessibility Checker”、或者“Contrast”插件等。）

四、交付与开发阶段：确保设计到实现的一致性

步骤 9：设计交付规范文档

• 在交付给前端／开发团队时，一并提供设计规范文档，包括所有上述 SEO 元素（Title、Meta Description、ALT 文本、URL Slug 格式规范、图片压缩 &尺寸规范、响应式布局断点、组件状态规范等）。

• 在 Figma 导出切图、导出资源时，要标明每个图像与图标使用格式（SVG / PNG / JPEG / WebP）及压缩比（如果前端自己压缩或用工具压缩）。

步骤 10：开发中校验与 SEO 测试

• 前端开发阶段实现 UI 时，按设计稿中标注的内容创建真实的 HTML 结构，确保 headings（H1/H2/H3）与设计稿中的一致。

• 确保 Clean URL（干净的 URL）结构与设计中规划的一致。避免用很多参数或无意义字符串。

• 在开发完成后用 SEO 工具或插件（如 Lighthouse、PageSpeed Insights、百度速度测试等）测试页面性能、可访问性、图像加载速度、首次内容绘制 (First Contentful Paint) 和 Largest Contentful Paint 等。

五、维护与优化阶段

步骤 11：监测实际表现与反馈

• 上线后，用 Google Search Console / 百度 搜索资源平台监测收录情况，关键页面的排名与点击率 (CTR)；检查哪些页面跳出率高、停留时间短，是否设计/内容问题。

• 与用户行为数据对比（如点击热图、滚动图、点击行为），看设计是否导致用户不易点击某些重要信息。

步骤 12：持续迭代设计中的 SEO 元素

• 基于数据调整设计规范，例如修改字体大小、颜色、按钮位置、图片加载方式（懒加载 /延迟加载）等。

• 在 Figma 中更新组件库与样式规范，以便新页面或修改页面统一应用最新优化规范。

客户群体、痛点与价值体现