VibeMKT Hub

SEO 与 GEO · footer

网站页脚设计 Skill

为 SaaS 官网、电商独立站、内容站和企业官网设计清楚的网站页脚。梳理高优先级链接、业务信息、行动入口和法律页面，并检查手机端、语义 HTML 与无障碍表现。

页脚很容易在多次改版后变成链接仓库：产品、公司、帮助、社交账号、订阅入口和法律信息全挤在一起，用户找不到联系方式，搜索爬虫也会反复遇到失效或含糊的链接。这套方法先确定页脚承担导航、获客、信任或合规中的哪些任务，再按用户需求组织链接分组、锚文本、业务信息和主要行动。团队会拿到页脚信息架构、链接与锚文本清单、响应式规格和逐项检查表，方便内容、SEO、设计与开发一起落地。

WHAT IT SOLVES

解决的营销问题

为 SaaS 官网、电商独立站、内容站和企业官网设计清楚的网站页脚。梳理高优先级链接、业务信息、行动入口和法律页面，并检查手机端、语义 HTML 与无障碍表现

为 SaaS 官网、电商独立站、内容站和企业官网设计清楚的网站页脚。梳理高优先级链接、业务信息、行动入口和法律页面，并检查手机端、语义 HTML 与无障碍表现。跑完你拿到的是页脚信息架构：栏目分组、显示顺序、主要行动、业务信息和手机端排列方式，中间一共 6 步。

最适合的真实场景

  • 01

    SaaS 官网页脚不断增加产品、资源和活动链接，栏目越来越多，用户仍找不到价格、帮助或联系入口

  • 02

    电商独立站的商品分类、售后说明、联系方式和法律页面分散在不同位置，手机端查找成本很高

  • 03

    内容站改版后保留旧栏目与失效链接，页脚锚文本重复，搜索爬虫和用户都难以判断目标页面

  • 04

    企业官网把订阅表单、社交账号、客服电话、主要行动和版权信息挤在同一区域，主次不清

你要先准备的资料

  • 目标网站类型、主要受众、页脚当前任务，以及代表页面 URL、截图、HTML 或组件代码
  • 产品、服务、公司、帮助、内容、联系、社交账号、隐私和条款等候选链接与真实目标页面
  • 地址、电话、邮箱、版权、订阅入口、主要行动、客户支持和可公开信任信息
  • 品牌字体、颜色与组件规范，桌面和手机宽度，以及对比度、触控、键盘与读屏检查要求

跑完你会拿到什么

  • 页脚信息架构：栏目分组、显示顺序、主要行动、业务信息和手机端排列方式
  • 链接与锚文本清单：目标页面、显示名称、优先级、重复项和失效项
  • 组件规格：多列布局、文字链接、语义 footer、栏目标题、触控区域、对比度与键盘要求
  • SEO 与无障碍检查表：链接可用性、页面抽查、手机显示、读屏地标和待确认问题

METHOD

Skill 工作流程

确定网站类型与页脚目标 → 盘点候选链接与业务信息 → 筛选高优先级链接并分组 等 6 个环节

一共 6 步。其中 4 项能力决定了换个 AI 会不会更麻烦。

  1. 确定网站类型与页脚目标先记录网站属于营销官网、电商、SaaS 或内容站，确认主要受众与设备，再选择页脚要优先承担的导航、线索承接、信任或法律信息任务。
  2. 盘点候选链接与业务信息汇总产品、服务、关于、联系、常见问题、帮助、内容、商品分类、Sitemap、地址、电话、邮箱、社交账号、版权、隐私和条款等真实资料，记录现有 URL 与可用状态。
  3. 筛选高优先级链接并分组围绕用户读到页面底部后的下一步筛选链接，合并重复项，移除失效或没有明确用途的入口，再按产品、公司、支持和法律等类别组织栏目，常用链接排在更容易找到的位置。
  4. 写清锚文本与行动入口每个链接用目标页面的具体名称，避免只写“点击这里”。社交账号链接表达“关注”，内容分享按钮留给相应页面组件；订阅、联系或其他行动入口要根据网站目标明确主次，并说明点击或提交后会得到什么。
  5. 整理布局、语义与无障碍规格确定多列分组、栏目标题、业务信息和行动入口的位置，手机端按优先级重新排列。组件使用语义 footer 与清楚的标题层级，并检查链接文字对比度、触控区域、键盘操作和读屏地标。
  6. 在真实页面检查链接和显示抽查桌面与手机页面，确认页脚位于内容底部但不压过主体，所有链接可以到达对应页面，文字链接、栏目标题、主要行动、业务信息和法律信息显示完整。保存失效项与仍需确认的问题。

这个 Skill 用到的能力： 读本地资料打开网页取正文写本地文件页面预览 。不同 AI 对这些能力的支持程度不一样，所以同一个 Skill 换个 AI，有几步做法会变。

WORKED EXAMPLE

业务示例

示例：重整 SaaS 官网的页脚

示例：重整 SaaS 官网的页脚

假设一家 SaaS 官网经过多次上线后，页脚已有六列四十多个链接。产品旧名称、重复帮助入口和已经下线的活动页仍在，订阅表单与联系销售按钮并排出现，手机端要滚动很久才能看到隐私政策。

  1. 汇总现有链接、业务信息和目标页面
  2. 标出失效、重复和需要确认的入口
  3. 按产品、资源、公司、支持和法律重新分组
  4. 统一锚文本并明确各行动入口的主次
  5. 检查桌面、手机、键盘和读屏状态

预期结果：交付页脚信息架构、链接与锚文本清单、响应式组件规格和检查表。此为假设方案，不预设抓取、收录、排名、订阅、询盘或转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

把每个产品、文章和活动都塞进页脚、栏目越来越长、真正重要的联系

最常踩的坑

  • 把每个产品、文章和活动都塞进页脚，栏目越来越长，真正重要的联系、帮助和法律入口被淹没
  • 使用“了解更多”“点击这里”等锚文本，用户无法在浏览链接时判断会去哪个页面
  • 把社交账号关注链接与当前内容的分享按钮混在一起，图标含义和下一步不清楚
  • 桌面多列直接缩到手机端，链接挤在一起，触控区域、对比度、键盘和读屏状态没有检查
  • 只交付线框图，没有核对目标 URL、失效链接、真实业务信息和页面底部的实际显示

怎么确认这次跑对了

  • 已经形成可检查的页脚信息架构：栏目分组、显示顺序、主要行动、业务信息和手机端排列方式，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的链接与锚文本清单：目标页面、显示名称、优先级、重复项和失效项，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的组件规格：多列布局、文字链接、语义 footer、栏目标题、触控区域、对比度与键盘要求，关键判断能回到输入资料或过程证据。
  • 已逐项检查「把每个产品、文章和活动都塞进页脚，栏目越来越长，真正重要的联系、帮助和法律入口被淹没」等高频问题，并记录需要人工确认的下一步。
网站页脚设计 Skill适合哪些岗位使用？

SEO 负责人、独立站运营、产品营销经理、内容运营、增长设计师、网站编辑与前端开发。典型场景包括SaaS 官网页脚不断增加产品、资源和活动链接，栏目越来越多，用户仍找不到价格、帮助或联系入口；电商独立站的商品分类、售后说明、联系方式和法律页面分散在不同位置，手机端查找成本很高；内容站改版后保留旧栏目与失效链接，页脚锚文本重复，搜索爬虫和用户都难以判断目标页面。

开始前需要准备什么资料？

至少需要目标网站类型、主要受众、页脚当前任务，以及代表页面 URL、截图、HTML 或组件代码、产品、服务、公司、帮助、内容、联系、社交账号、隐私和条款等候选链接与真实目标页面、地址、电话、邮箱、版权、订阅入口、主要行动、客户支持和可公开信任信息。资料越具体，结果越能直接用于决策。

最后能得到什么可检查的结果？

页脚信息架构：栏目分组、显示顺序、主要行动、业务信息和手机端排列方式、链接与锚文本清单：目标页面、显示名称、优先级、重复项和失效项、组件规格：多列布局、文字链接、语义 footer、栏目标题、触控区域、对比度与键盘要求。每项都可以逐条核对来源和数字。

哪些情况下结果会不可靠？

把每个产品、文章和活动都塞进页脚，栏目越来越长，真正重要的联系、帮助和法律入口被淹没；使用“了解更多”“点击这里”等锚文本，用户无法在浏览链接时判断会去哪个页面。出现这些情况时需要人工复核。

支持哪些 AI Agent？

已适配 WorkBuddy、OpenClaw、Hermes Agent、Codex、Claude Code、TRAE、ZCode 共 7 种，每种都有独立的安装说明和能力对照。

ORIGINAL SOURCE

完整 Skill 内容与版本资料

2 个原始文件，15 个文档章节，固定在 70987bad

上游原文完整保留在加搜服务器上，可逐节查看，也可以直接下载。 当前镜像共 2 个文件、4.6 KB。

候选链接、地址、电话、邮箱、社交账号、法律页面和信任信息需要由网站负责人提供并确认。代码修改、表单连接、页面预览和无障碍检查能否执行，取决于所用 Agent 的工具配置、项目文件与操作权限。

原始 Skill 文档 上游原文完整保留，中文概述已转换为营销任务、输入资料和交付结果。

Components: Footer

Guides footer design for SEO, UX, and conversion. Footers provide secondary navigation, support crawlability, and engage users below the fold (66% of engagement happens there).

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Initial Assessment

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for key pages and audience.

Identify:

  1. Site type: Marketing, e-commerce, SaaS, blog
  2. Footer goals: Navigation, lead capture, trust, legal
  3. Platform: Web, mobile, both

Essential Footer Elements

Navigation & Links
  • Links to high-priority pages: About, Contact, Services, FAQs
  • Related blog posts and internal content links
  • XML or HTML sitemap links
  • Product/service category links (e-commerce)
  • Avoid excessive links: Google warns that too many internal links can harm SEO; link only to high-priority pages
Business Information
  • Physical address, phone, email
  • Social media profile links (Follow us) -> distinct from social-share-generator (share this page)
  • Copyright and legal information (Privacy Policy, Terms of Service)
User Engagement
  • Newsletter signup forms
  • Call-to-action buttons
  • Customer testimonials or support resources

SEO Best Practices

Practice Purpose
Strategic linking Link to important pages; avoid link bloat
Descriptive anchor text Target keywords; avoid "Click here"
Text links Prefer text over images for crawlers
No dead ends Ensure pages link to other content
Semantic HTML <footer>, proper landmark roles
Link Strategy
  • Footer links help crawlers discover pages and understand site structure
  • Too many links can dilute page context; keep focused
  • Include sitemap link for comprehensive discovery

UX Guidelines

Placement & Visibility
  • Footer at bottom; visible without dominating desktop view
  • Mobile: Valuable for users who don't scroll to top
  • Secondary navigation; complements header nav
Organization
  • Group links by category (Product, Company, Legal, Support)
  • Use clear headings for each column
  • Prioritize most-used links
Accessibility
Requirement Practice
Contrast 4.5:1 for link text
Touch targets >=44x44px on mobile
Keyboard Full keyboard navigation
Screen readers Proper heading hierarchy, landmark roles

Output Format

  • Footer structure (columns, link groups)
  • Link list with anchor text suggestions
  • SEO checklist
  • Accessibility checklist

Related Skills

  • navigation-menu-generator: Footer complements header nav
  • social-share-generator: Footer has profile links (Follow us); social-share has share buttons (share this page) -> different use cases
  • xml-sitemap: Footer can link to sitemap
  • internal-links: Footer is secondary internal linking
  • newsletter-signup-generator: Footer often hosts signup forms

来源与版本声明

本页面由加搜科技整理业务说明并托管安装文件。原始 Skill 来源渠道：GitHub； 原始项目名称：footer-generator； 固定版本：70987bad4ebe； 许可证：MIT。技能包内保留完整出处和许可证说明。

各 Agent 能力说明参考对应官方文档。页面不提供外部跳转。

候选链接、地址、电话、邮箱、社交账号、法律页面和信任信息需要由网站负责人提供并确认。代码修改、表单连接、页面预览和无障碍检查能否执行，取决于所用 Agent 的工具配置、项目文件与操作权限。

INSTALL

三种安装方式

网站页脚设计 Skill v1.0.0，ZIP 带 SHA256 校验

默认做法是把提示词复制给 AI Agent，让它自己下载并安装。提示词里已经写清要用完整 ZIP、装完报告目录、并先跑一个小任务验证。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

请帮我把「网站页脚设计 Skill」安装到我正在使用的 AI Agent。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-footer-design/1.0.0/skill-footer-design.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按你所用 Agent 的 Skill 目录规则安装。
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证 Skill 已被识别。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-footer-design/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-footer-design.md

FURTHER READING

网站页脚设计 Skill 相关的实操文章

继续了解网站导航、技术 SEO、落地页行动入口和无障碍检查的具体做法。

GEO和SEO的区别：从搜索流量到AI答案引擎的范式转移

GEO（生成式引擎优化）不是SEO的升级版，而是针对AI答案引擎的不同优化逻辑。本文从展示形式、排名机制、内容策略和技术实现四个维度对比GEO与SEO的核心差异，帮助营销团队理解两种流量来源的共存策略

  • AI搜索优化
  • 生成式引擎优化
  • 搜索流量
  • SEO

转化率掉了别盯按钮颜色，来的人可能已经换了一批

流量结构一变，后台最显眼的数字就是转化率往下掉。很多人的反应是改按钮颜色、改表单字段、再开一轮首屏测试。这些能测，但排在后面。转化率是「来的人里有多少做了你要的动作」，来的人换了，动作完成率一定会动。

  • 转化率
  • AARRR
  • 落地页

AI搜索如何引用网站内容：三段链路与自查清单

AI 搜索引擎引用网站内容，走的是"先检索、再筛选、后生成"的三段链路：它先用检索系统找到与问题相关的网页，再从候选里挑出少数来源，最后在生成回答时把来源链接挂在对应结论旁边。你的页面能不能被引用，不

  • Vibe Marketing
  • AI营销
  • GEO

搭配使用

页脚承担补充导航，主导航结构用对应导航 Skill 处理；整站页面层级、内部链接、订阅表单与 CTA 再结合相关 Skill 分别完善。

SEO 与 GEO#01

网站导航菜单设计 Skill

为 SaaS、电商、内容站和企业官网设计主导航菜单。整理一级与二级项目、锚文本、当前页状态和桌面、手机交互，并核对抓取与无障碍要求。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
出海增长#03

应用商店优化 Skill

应用商店优化把商店页链接转成六维 ASO 审计与整改清单。

来源项目 · coreyhaines31/marketingskills ★ 49,944 · Fork 7,586
SEO 与 GEO#04

网站面包屑导航设计 Skill

为内容站、电商独立站、产品文档和多层级官网规划清楚的面包屑导航。统一页面层级、主面包屑路径、标签和链接状态，并核对可见导航与 BreadcrumbList。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
内容与创意#05

网站内容卡片设计 Skill

把产品、文章、模板或工具信息整理成便于快速浏览的网站内容卡片。明确标题、图片、说明、元数据和主要动作的顺序。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
内容与创意#06

网站轮播组件设计 Skill

为客户评价、媒体 Logo、产品截图或精选内容设计网站轮播组件。明确适用场景、幻灯片顺序、控制方式、可访问性与加载要求。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134

VibeMKT COMMUNITY

加入 VibeMKT 社群

微信扫码，交流营销 Skill 的选择、安装、试用与业务化改造。

加入 VibeMKT 社群的微信二维码

二维码会持续显示，关闭弹窗后返回当前页面。