Lead Gen Website Builder (SEO PUR)技能使用说明

2026-03-30 新闻来源：网淘吧围观:10

电脑广告

手机广告

潜在客户生成网站构建器

构建转化优化的本地服务网站，具备完整的搜索引擎优化、跟踪功能和通用数据保护条例合规性 —包含反垃圾邮件防护措施（谷歌垃圾邮件政策 + 2024年3月更新）、本地搜索引擎优化（谷歌我的商家）和小预算广告功能。

何时使用此技能

当用户需要为以下情况请求网站时使用此技能：

Lead Gen Website Builder (SEO PUR)

本地服务企业（家庭服务、维修、专业服务）
专注于特定地理区域的潜在客户生成
需要10-20+页面的网站，包含服务页面、博客和法律页面
针对本地关键词进行搜索引擎优化的内容
转化跟踪（电话、WhatsApp、带UTM参数的表格）
通用数据保护条例合规性（Cookie横幅、隐私政策、法律页面）

工作流程概述

按顺序遵循以下阶段。若无明确理由，请勿跳过或合并阶段。

政策/风险检查（强制）

阅读references/google-spam-guardrails-2024.md
明确核实：无门页，无规模化通用内容，无虚假地址/评价，无误导性声明。
如果项目是潜在客户开发（集客）：需要在所有关键页面上进行明确披露。

然后继续执行阶段 1 到 7。

阶段 1：分析与规划

从用户或规格说明文档中收集项目需求。

所需信息：

业务领域及提供的服务
地理目标区域（城市 + 半径）
SEO 目标关键词
联系信息（电话、WhatsApp、电子邮件）
所需页面数量及类型
竞争对手网站（用于差异化分析）

输出：对项目范围、目标受众和转化目标有清晰的理解。

阶段 2：设计头脑风暴

在项目根目录下创建ideas.md文件，包含三种不同的设计方案。

使用templates/design-ideas-template.md作为结构。每种方案必须定义：

设计运动和美学理念
包含十六进制代码和情感意图的调色板
排版系统（标题 + 正文字体）
布局范式（避免通用的居中对齐布局）
标志性视觉元素
动画指导原则
交互理念

参考references/design-philosophies.md以获取灵感，但要创造原创组合。

选择：选择一种方案并记录其理论依据。此设计理念将指导所有后续的设计决策。

阶段 3：视觉素材生成

使用generate工具生成 3-5 张高质量图像。这些图像必须：

与所选设计理念（色彩、氛围、风格）保持一致。
存储于/home/ubuntu/webdev-static-assets/
涵盖关键视觉需求：英雄背景图、服务插图、本地地标、团队/工匠照片

规划战略用途：

英雄区域：最具冲击力的图像
服务页面：相关插图
关于/信任区域：团队或本地地标照片

开发过程中不要即时生成图像。为提高效率，请一次性全部生成。

第四阶段：内容结构

为所有页面创建详细的内容结构。

选项 A（手动）：直接编写content-structure.md文件，为每个页面包含标题、元描述、H1标签和主要内容大纲的章节。

选项 B（脚本）：创建包含页面数据的specs.json文件，然后运行：

python /home/ubuntu/skills/lead-gen-website/scripts/generate_content_structure.py specs.json content-structure.md

内容要求：

每个主要页面（主页、主要服务页）至少500字。
每篇博客文章至少1000字
自然地包含目标关键词（避免堆砌）
回应用户意图（是什么、为什么、怎么做、成本、区域）
聚焦本地（频繁提及城市/地区）

第五阶段：开发

初始化项目并构建所有页面。

5.1 初始化项目

webdev_init_project <project-name>

5.2 配置设计令牌

编辑client/src/index.css依据选定的设计理念：

更新CSS变量以定义颜色（主色、辅色、强调色、背景色、前景色）
配置排版（无衬线字体、衬线字体的字体系列）
调整阴影、圆角、动画效果

在client/index.html中添加Google字体：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;600;700&display=swap" rel="stylesheet" />

5.3 创建可复用组件

使用templates/目录中的模板。将占位符替换为项目特定值：

Header(templates/component-Header.tsx):

{{SITE_NAME}},{{SITE_TAGLINE}},{{SITE_INITIALS}}
{{PHONE_NUMBER}},{{WHATSAPP_NUMBER}}
{{NAV_ITEMS}}(JSON数组，包含{标签, 链接})

Footer(templates/component-Footer.tsx):

{{SITE_NAME}},{{SITE_DESCRIPTION}}
{{SERVICE_LINKS}},{{UTILITY_LINKS}}
{{PHONE_NUMBER}},{{EMAIL}},{{LOCATION}}

SEOHead 组件(模板/component-SEOHead.tsx):

将{{DOMAIN}}替换为实际域名

其他组件：面包屑导航、联系表单、Cookie横幅（按原样复制，只需最小化定制）

5.4 构建页面

对于相似的页面（服务、博客文章）：

创建模板文件（例如，service-template.tsx），使用templates/page-service-template.tsx
创建数据文件（例如，services-data.json），其中包含页面数据的数组
运行批量生成：

python /home/ubuntu/skills/lead-gen-website/scripts/generate_pages_batch.py service-template.tsx services-data.json client/src/pages/

对于独特页面（首页、资费、常见问题、联系）：使用丰富、定制的内容手动构建。利用组件确保一致性。

对于法律页面：使用templates/page-legal-template.tsx包含标准法律内容。

5.5 更新 App.tsx

将所有路由添加到client/src/App.tsx：

<Route path="/service-page" component={ServicePage} />

在App布局中集成页头、页脚和CookieBanner。

阶段6：SEO、跟踪、GBP、广告

6.1 生成SEO文件

创建pages.json包含所有URL及其优先级：

[
  {"url": "/", "priority": "1.0"},
  {"url": "/service", "priority": "0.9"},
  {"url": "/contact", "priority": "0.9"},
  {"url": "/blog", "priority": "0.6"},
  {"url": "/mentions-legales", "priority": "0.3"}
]

运行脚本：

python /home/ubuntu/skills/lead-gen-website/scripts/create_seo_files.py yourdomain.com pages.json client/public/

这将在client/public/目录下创建robots.txt和sitemap.xml。

6.2 添加结构化数据

使用 SEOHead 组件的jsonLd属性为关键页面添加 JSON-LD 结构化数据：

首页（LocalBusiness）：

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Business Name",
  "telephone": "+33123456789",
  "email": "contact@example.com",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "City",
    "addressCountry": "FR"
  },
  "areaServed": ["City1", "City2"],
  "openingHours": "Mo-Fr 08:00-18:00"
};

服务页面（Service）：

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Service Name",
  "description": "Service description",
  "provider": {
    "@type": "LocalBusiness",
    "name": "Business Name"
  },
  "areaServed": "City"
};

请查阅references/seo-checklist.md以了解完整的 SEO 要求。

6.3 RGPD 合规性

请核实：

CookieBanner 组件已集成到 App.tsx 中
隐私政策页面存在且包含完整的 RGPD 信息
Cookie 政策页面存在
法律声明页面存在
ContactForm 包含指向隐私政策的链接

请查阅references/rgpd-compliance.md以了解详细要求。

6.4 GBP / 本地 SEO（知名度）

请阅读并应用：

references/gbp-local-seo-playbook.md

需交付成果：

GBP设置检查清单（类别/服务/问答）
30天照片/帖子/评论计划
NAP引用列表（质量优先，无垃圾信息）

6.5 微预算广告（4欧元/天）

请阅读并应用：

参考资料/微预算广告-4欧元-操作手册.md

需交付成果：

1个高度聚焦的广告系列（精确/短语关键词、区域、时段、否定关键词）
1个专用落地页 + 追踪设置

6.6 转化追踪

ContactForm组件自动从URL捕获UTM参数：

utm_source（例如：google, facebook）
utm_campaign（广告系列名称）
utm_adset（广告组名称）
utm_ad（具体广告）

这些参数存储在表单状态中，可发送至后端/CRM用于归因追踪。

第七阶段：验证与交付

7.1 浏览器测试

打开开发服务器URL并验证：

所有页面均无错误加载
导航功能正常（顶部菜单、面包屑导航）
表单提交正确
移动端响应式适配（测试悬浮CTA按钮）
首次访问时显示Cookie提示横幅
图片加载正确

7.2 SEO验证

依据references/seo-checklist.md文件进行验证：

每个页面具有独立的标题与描述
H1标题层级结构正确
图片均包含alt属性
robots.txt与sitemap.xml文件可访问
关键页面包含结构化数据

7.3 创建检查点

webdev_save_checkpoint "Complete lead-gen website - [X] pages, SEO optimized, RGPD compliant"

7.4 交付用户

通过消息发送检查点附件工具包含：

构建内容摘要
页面数量及关键特性
已实施的SEO优化
后续步骤（发布、自定义域名、Google Search Console）

捆绑资源

脚本

scripts/generate_pages_batch.py根据模板和数据文件批量生成多个相似页面。用法：python generate_pages_batch.py <模板> <数据_json> <输出目录>

scripts/create_seo_files.py自动生成 robots.txt 和 sitemap.xml 文件。用法：python create_seo_files.py <域名> <页面_json> <输出目录>

scripts/generate_content_structure.py根据规范JSON文件创建内容结构Markdown文档。用法：python generate_content_structure.py <规范_json> <输出_md>

模板

组件：

component-Header.tsx- 包含徽标、导航栏和行动号召按钮的固定页头
component-Footer.tsx- 包含链接和联系信息的页脚组件
component-SEOHead.tsx- SEO元标签和结构化数据组件
component-Breadcrumbs.tsx- 导航面包屑组件
component-ContactForm.tsx- 包含UTM跟踪的表单组件
component-CookieBanner.tsx- RGPD（通用数据保护条例）Cookie同意横幅组件

页面：

page-service-template.tsx- 服务页面模板
page-legal-template.tsx- 法律页面模板
design-ideas-template.md- 设计头脑风暴结构

参考文档

references/seo-checklist.md完整的SEO检查清单，涵盖元标签、结构化数据、技术SEO、页面SEO、本地SEO和内容质量。请在第六阶段开始前阅读此文档，确保没有遗漏。

references/conversion-best-practices.md提升转化率的最佳实践：行动号召策略、联系方式选项、信任标识、表单优化、移动端优化。在第5阶段构建页面时参考。

参考资料/rgpd合规指南.md完整的RGPD合规指南，涵盖Cookie横幅、隐私政策、Cookie政策、法律声明、表单、同意机制、数据安全和用户权利。第6阶段必备。

参考资料/设计理念.md五种设计理念示例（新数字工艺、粗野主义自信、柔和现代主义、活力能量、奢华极简主义）及选择标准。在第2阶段作为灵感参考。

技巧与最佳实践

设计一致性：在每份CSS/组件文件顶部记录选定的设计理念作为提醒。

图片优化：所有图片应存储在/home/ubuntu/webdev-static-assets/目录中，并通过CDN链接引用，以避免部署超时。

内容质量优于数量：拥有10个优秀页面胜过20个平庸页面。聚焦于满足用户搜索意图。

移动端优先：优先设计和测试移动端体验。大多数本地服务搜索发生在移动设备上。

转化率优先：每个页面都应设有清晰的行动号召。电话和WhatsApp按钮在移动端应始终可见。

本地搜索引擎优化：在标题、H1标签及内容中提及城市/地区名称。若覆盖多个城市，应为每个服务区域创建独立页面。

快速迭代：对相似页面使用批量生成脚本以节省时间。将人工精力集中于独特且高价值的页面。

测试：创建检查点前务必在浏览器中测试。检查移动端响应、表单提交及导航。

常见陷阱

跳过设计头脑风暴：会导致设计平庸、缺乏记忆点。务必在ideas.md文件中创建3种不同的设计方案。

在开发过程中生成图像：效率低下。应在第3阶段预先生成所有图像。

内容薄弱：内容单薄（少于300字）将无法获得良好排名。应在第4阶段投入时间创建充实且有助益的内容。

缺少GDPR合规元素：在欧盟地区，Cookie横幅、隐私政策和法律声明是必须的。不要跳过第6.3阶段。

无UTM追踪：如果没有UTM参数，你将无法衡量营销活动的效果。确保联系表单能捕获这些参数。

忘记移动端的行动号召：仅针对桌面的行动号召会损失移动端的转化。务必添加固定的移动端按钮。

在开发过程中创建检查点：只在最后（第7阶段）创建一个检查点。多个检查点会在初始交付时使用户感到困惑。

免责申明

部分文章来自各大搜索引擎，如有侵权，请与我联系删除。

打赏

文章底部电脑广告

手机广告位-内容正文底部

标签

上一篇：Molt Radio技能使用说明下一篇：Fix Your Entire Life in 1 Day技能使用说明