add-seo

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Plugin check: Run
node "${PLUGIN_ROOT}/scripts/check-version.js"
— if it outputs a message, show it to the user before proceeding.
插件检查:运行
node "${PLUGIN_ROOT}/scripts/check-version.js"
—— 如果输出消息,请在继续前展示给用户。

Add SEO

添加SEO

Add essential SEO assets to a Power Pages code site:
robots.txt
,
sitemap.xml
, and meta tags.
Prerequisite: This skill expects an existing Power Pages code site created via
/create-site
. Run that skill first if the site does not exist yet.
为Power Pages代码站点添加基础SEO资源:
robots.txt
、
sitemap.xml
和元标签。
前提条件:该技能要求已通过
/create-site
创建Power Pages代码站点。如果站点尚未存在,请先运行该技能。

Core Principles

核心原则

  • Crawlability first: Every public page must be discoverable by search engines via a valid
    robots.txt
    and
    sitemap.xml
    before any other SEO work matters.
  • Accurate metadata: Meta tags (title, description, Open Graph) must truthfully represent page content — misleading metadata harms rankings.
  • Framework-aware placement: SEO assets must be placed in the correct location for the detected framework (public directory, layout component, etc.).
Initial request: $ARGUMENTS
  • 优先保障可抓取性:在进行其他SEO工作之前,每个公开页面必须通过有效的
    robots.txt
    和
    sitemap.xml
    被搜索引擎发现。
  • 元数据准确真实:元标签(标题、描述、Open Graph)必须如实反映页面内容——误导性元数据会损害排名。
  • 适配框架的放置位置:SEO资源必须放置在检测到的框架对应的正确位置(公共目录、布局组件等)。
初始请求:$ARGUMENTS

Workflow

工作流程

  1. Phase 1: Verify Site Exists → Locate the Power Pages project
  2. Phase 2: Gather SEO Configuration → Site URL, pages, preferences
  3. Phase 3: Plan & Approve → Present SEO additions inline, get user approval
  4. Phase 4: Add robots.txt → Create robots.txt in public directory
  5. Phase 5: Add sitemap.xml → Generate sitemap.xml from site routes
  6. Phase 6: Add Meta Tags → Add title, description, viewport, Open Graph, and favicon to index.html
  7. Phase 7: Verify & Commit → Verify via Playwright, commit changes

  1. 阶段1:验证站点是否存在 → 定位Power Pages项目
  2. 阶段2:收集SEO配置信息 → 站点URL、页面、偏好设置
  3. 阶段3:规划与审批 → 在线展示SEO新增内容,获取用户批准
  4. 阶段4:添加robots.txt → 在公共目录中创建robots.txt
  5. 阶段5:添加sitemap.xml → 根据站点路由生成sitemap.xml
  6. 阶段6:添加元标签 → 向index.html添加标题、描述、视口、Open Graph和网站图标相关标签
  7. 阶段7:验证与提交 → 通过Playwright验证,提交更改

Phase 1: Verify Site Exists

阶段1:验证站点是否存在

Goal: Confirm a Power Pages code site exists and understand its structure.
目标:确认Power Pages代码站点已存在并了解其结构。

Actions

操作步骤

1.1 Locate Project

1.1 定位项目

Look for
powerpages.config.json
in the current directory or immediate subdirectories to find the project root. Use your file-search tool (e.g.,
Glob
with patterns
powerpages.config.json
and
*/powerpages.config.json
) rather than a shell-specific command.
If not found: Tell the user to create a site first with
/create-site
.
查找当前目录或直接子目录中的
powerpages.config.json
以确定项目根目录。使用文件搜索工具(例如,带有
powerpages.config.json
和
*/powerpages.config.json
模式的
Glob
)而非特定shell命令。
如果未找到:告知用户先使用
/create-site
创建站点。

1.2 Read Existing Config

1.2 读取现有配置

Read
powerpages.config.json
to get the site name and config.
读取
powerpages.config.json
以获取站点名称和配置信息。

1.3 Detect Framework & Discover Routes

1.3 检测框架并发现路由

Read
package.json
to determine the framework and locate key files. See
${PLUGIN_ROOT}/references/framework-conventions.md
for the full framework → public directory → index HTML mapping and route discovery patterns.
Build a list of all routes (e.g.,
/
,
/about
,
/contact
,
/blog
).
读取
package.json
以确定框架并定位关键文件。查看
${PLUGIN_ROOT}/references/framework-conventions.md
获取完整的框架→公共目录→索引HTML映射关系和路由发现模式。
构建所有路由的列表(例如:
/
、
/about
、
/contact
、
/blog
)。

Output

输出结果

  • Project root path identified
  • Framework detected (React, Vue, Angular, or Astro)
  • Full list of discoverable routes

  • 已确定项目根路径
  • 已检测到框架(React、Vue、Angular或Astro)
  • 完整的可发现路由列表

Phase 2: Gather SEO Configuration

阶段2:收集SEO配置信息

Goal: Collect all SEO preferences from the user before making any changes.
目标:在进行任何更改之前,收集用户的所有SEO偏好设置。

Actions

操作步骤

<!-- not-a-gate: data-gathering — production URL + exclusion list shape the upcoming Phase 3 plan but don't write anything on their own -->
Use
AskUserQuestion
to collect SEO preferences:
<!-- not-a-gate: data-gathering — 生产URL和排除列表会影响后续阶段3的规划,但不会自行写入任何内容 -->
使用
AskUserQuestion
收集SEO偏好设置:

Call 1

调用1

QuestionHeaderOptions
What is the production URL for your site? (e.g., https://contoso.powerappsportals.com)Site URL(free text — use single generic option so user types via "Other")
Which pages should be excluded from search engine indexing?ExclusionsNone — index all pages (Recommended), Admin/auth pages only, Let me specify
<!-- not-a-gate: data-gathering — meta description + OG tag choice shape the upcoming Phase 3 plan but don't write anything on their own -->
问题标题选项
你的站点生产URL是什么?(例如:https://contoso.powerappsportals.com)站点URL(自由文本——使用单一通用选项,用户通过“其他”输入)
哪些页面应排除在搜索引擎索引之外?排除项无——索引所有页面(推荐),仅排除管理/认证页面,让我指定
<!-- not-a-gate: data-gathering — 元描述和OG标签选择会影响后续阶段3的规划,但不会自行写入任何内容 -->

Call 2

调用2

QuestionHeaderOptions
What meta description should appear in search results?Description(free text — use single generic option so user types via "Other")
Add Open Graph tags for social media sharing?OG TagsYes — add Open Graph and Twitter Card tags (Recommended), No — skip social tags
问题标题选项
搜索结果中应显示什么元描述?描述(自由文本——使用单一通用选项,用户通过“其他”输入)
添加用于社交媒体分享的Open Graph标签?OG标签是——添加Open Graph和Twitter Card标签(推荐),否——跳过社交标签

Output

输出结果

  • Production URL confirmed
  • Exclusion list finalized
  • Meta description text
  • Open Graph tag preference (yes/no)

  • 已确认生产URL
  • 已确定排除列表
  • 元描述文本
  • Open Graph标签偏好(是/否)

Phase 3: Plan & Approve

阶段3:规划与审批

Goal: Present the full SEO plan to the user and get explicit approval before making changes.
目标:向用户展示完整的SEO计划,并在进行更改前获得明确批准。

Actions

操作步骤

Present the SEO additions that will be made as a clear, inline summary:
  1. robots.txt content — which paths will be allowed/disallowed
  2. sitemap.xml content — all discovered routes with the production URL and priority assignments
  3. Meta tags to add to index.html — title, description, viewport, charset, Open Graph, Twitter Card
  4. Favicon — link tag and placeholder SVG
<!-- gate: add-seo:3.plan-approval | category=plan | cancel-leaves=nothing -->
🚦 Gate (plan · add-seo:3.plan-approval): Final sign-off on the SEO additions before any
robots.txt
/
sitemap.xml
/
index.html
write.
Trigger: Phase 3 has presented the full plan inline (robots.txt, sitemap.xml, meta tags, favicon). Why we ask: SEO assets land on disk with the wrong production URL, wrong exclusions, or unwanted OG tags — fixable but noisy in git history. Cancel leaves: Nothing — no file writes yet.
After presenting the plan, use
AskUserQuestion
to get approval:
QuestionHeaderOptions
Here is the SEO plan. How would you like to proceed?SEO Plan ApprovalApprove and proceed (Recommended), I'd like to make changes
If the user chooses "I'd like to make changes", ask what they want to change, update the plan accordingly, and present the revised plan for approval again.
以清晰的在线摘要形式展示即将添加的SEO内容:
  1. robots.txt内容 —— 哪些路径将被允许/禁止
  2. sitemap.xml内容 —— 所有已发现的路由,包含生产URL和优先级分配
  3. 将添加到index.html的元标签 —— 标题、描述、视口、字符集、Open Graph、Twitter Card
  4. 网站图标(Favicon) —— 链接标签和占位SVG
<!-- gate: add-seo:3.plan-approval | category=plan | cancel-leaves=nothing -->
🚦 审批节点(规划 · add-seo:3.plan-approval):在写入任何
robots.txt
/
sitemap.xml
/
index.html
之前,最终确认SEO新增内容。
触发条件:阶段3已在线展示完整计划(robots.txt、sitemap.xml、元标签、网站图标)。 原因:若SEO资源写入磁盘时使用了错误的生产URL、错误的排除项或不需要的OG标签,虽然可以修复,但会在git历史中留下冗余记录。 取消操作结果:无——尚未写入任何文件。
展示计划后,使用
AskUserQuestion
获取批准:
问题标题选项
以下是SEO计划。你希望如何进行?SEO计划审批批准并继续(推荐),我想修改计划
如果用户选择“我想修改计划”,询问他们想要更改的内容,相应更新计划,并再次展示修订后的计划以获取批准。

Output

输出结果

  • User-approved SEO plan ready for implementation

  • 已获得用户批准的SEO计划,可实施

Phase 4: Add robots.txt

阶段4:添加robots.txt

Goal: Create a valid
robots.txt
that tells search engines which pages to crawl.
目标:创建有效的
robots.txt
,告知搜索引擎哪些页面可以抓取。

Actions

操作步骤

Create
robots.txt
in the public directory (
<PROJECT_ROOT>/public/robots.txt
):
text
User-agent: *
Allow: /

Sitemap: <PRODUCTION_URL>/sitemap.xml
If the user specified pages to exclude, add
Disallow
directives:
text
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /auth/

Sitemap: <PRODUCTION_URL>/sitemap.xml
在公共目录中创建
robots.txt
(
<PROJECT_ROOT>/public/robots.txt
):
text
User-agent: *
Allow: /

Sitemap: <PRODUCTION_URL>/sitemap.xml
如果用户指定了要排除的页面,添加
Disallow
指令:
text
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /auth/

Sitemap: <PRODUCTION_URL>/sitemap.xml

Output

输出结果

  • public/robots.txt
    created with correct directives

  • 已创建
    public/robots.txt
    ,包含正确的指令

Phase 5: Add sitemap.xml

阶段5:添加sitemap.xml

Goal: Generate a complete
sitemap.xml
listing all discoverable routes with proper priorities.
目标:生成完整的
sitemap.xml
,列出所有可发现的路由并设置适当的优先级。

Actions

操作步骤

Create
sitemap.xml
in the public directory (
<PROJECT_ROOT>/public/sitemap.xml
).
Generate entries for each discovered route using the production URL:
xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc><PRODUCTION_URL>/</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc><PRODUCTION_URL>/about</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- Additional routes... -->
</urlset>
Priority rules:
  • Home page (
    /
    ):
    1.0
  • Top-level pages:
    0.8
  • Sub-pages:
    0.6
Exclusions: Do not include routes the user chose to exclude (e.g.,
/admin/*
,
/auth/*
).
在公共目录中创建
sitemap.xml
(
<PROJECT_ROOT>/public/sitemap.xml
)。
使用生产URL为每个已发现的路由生成条目:
xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc><PRODUCTION_URL>/</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc><PRODUCTION_URL>/about</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- 其他路由... -->
</urlset>
优先级规则:
  • 主页(
    /
    ):
    1.0
  • 顶级页面:
    0.8
  • 子页面:
    0.6
排除项:不要包含用户选择排除的路由(例如:
/admin/*
、
/auth/*
)。

Output

输出结果

  • public/sitemap.xml
    created with all routes, correct URLs, and no placeholders

  • 已创建
    public/sitemap.xml
    ,包含所有路由、正确的URL,无占位符

Phase 6: Add Meta Tags

阶段6:添加元标签

Goal: Add comprehensive meta tags, Open Graph tags, and a favicon to the site's HTML.
目标:向站点的HTML添加全面的元标签、Open Graph标签和网站图标。

Actions

操作步骤

6.1 Essential Meta Tags

6.1 基础元标签

Add or update meta tags in the site's
index.html
(location depends on framework — see Phase 1.3):
html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><SITE_TITLE></title>
  <meta name="description" content="<META_DESCRIPTION>" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="<PRODUCTION_URL>/" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
</head>
在站点的
index.html
中添加或更新元标签(位置取决于框架——见阶段1.3):
html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><SITE_TITLE></title>
  <meta name="description" content="<META_DESCRIPTION>" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="<PRODUCTION_URL>/" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
</head>

6.2 Open Graph Tags (if user opted in)

6.2 Open Graph标签(如果用户选择添加)

Add Open Graph and Twitter Card meta tags inside
<head>
:
html
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="<SITE_TITLE>" />
<meta property="og:description" content="<META_DESCRIPTION>" />
<meta property="og:url" content="<PRODUCTION_URL>/" />
<meta property="og:site_name" content="<SITE_TITLE>" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<SITE_TITLE>" />
<meta name="twitter:description" content="<META_DESCRIPTION>" />
在
<head>
内添加Open Graph和Twitter Card元标签:
html
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="<SITE_TITLE>" />
<meta property="og:description" content="<META_DESCRIPTION>" />
<meta property="og:url" content="<PRODUCTION_URL>/" />
<meta property="og:site_name" content="<SITE_TITLE>" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<SITE_TITLE>" />
<meta name="twitter:description" content="<META_DESCRIPTION>" />

6.3 Favicon

6.3 网站图标(Favicon)

Check if a favicon already exists in the public directory. If not, add a simple SVG favicon link:
html
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
Create a minimal placeholder
public/favicon.svg
using the site's primary color:
xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="<PRIMARY_COLOR>"/>
  <text x="50" y="70" font-size="50" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-weight="bold"><FIRST_LETTER></text>
</svg>
Where
<FIRST_LETTER>
is the first letter of the site name and
<PRIMARY_COLOR>
is the primary theme color from the site's configuration.
检查公共目录中是否已存在网站图标。如果不存在,添加一个简单的SVG网站图标链接:
html
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
使用站点的主色调创建一个最小化的占位符
public/favicon.svg
:
xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="<PRIMARY_COLOR>"/>
  <text x="50" y="70" font-size="50" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-weight="bold"><FIRST_LETTER></text>
</svg>
其中
<FIRST_LETTER>
是站点名称的首字母,
<PRIMARY_COLOR>
是站点配置中的主题主色调。

6.4 Astro-Specific Handling

6.4 Astro框架专属处理

For Astro sites, meta tags should be added to the base layout component (e.g.,
src/layouts/Layout.astro
) rather than a root
index.html
. Astro uses component-based
<head>
management.
对于Astro站点,元标签应添加到基础布局组件(例如:
src/layouts/Layout.astro
)而非根目录的
index.html
。Astro使用基于组件的
<head>
管理方式。

Output

输出结果

  • Meta tags added to
    index.html
    (or Astro layout equivalent)
  • Open Graph and Twitter Card tags added (if opted in)
  • Favicon SVG created and linked (if not already present)

  • 已向
    index.html
    (或Astro布局等效文件)添加元标签
  • 已添加Open Graph和Twitter Card标签(如果用户选择添加)
  • 已创建并链接SVG网站图标(如果之前不存在)

Phase 7: Verify & Commit

阶段7:验证与提交

Goal: Confirm all SEO assets are in place, verify via Playwright, and commit changes.
目标:确认所有SEO资源已到位,通过Playwright验证,并提交更改。

Actions

操作步骤

7.1 Verify Files Exist

7.1 验证文件是否存在

Confirm the following files were created/updated:
  • public/robots.txt
  • public/sitemap.xml
  • public/favicon.svg
    (if created)
  • index.html
    or equivalent (meta tags added)
确认已创建/更新以下文件:
  • public/robots.txt
  • public/sitemap.xml
  • public/favicon.svg
    (如果已创建)
  • index.html
    或等效文件(已添加元标签)

7.2 Verify via Playwright

7.2 通过Playwright验证

If a dev server is running (or start one):
  1. Navigate to the site root and use
    browser_snapshot
    to verify meta tags are present in the page source
  2. Navigate to
    /robots.txt
    and verify it loads
  3. Navigate to
    /sitemap.xml
    and verify it loads
如果开发服务器正在运行(或启动一个):
  1. 导航到站点根目录,使用
    browser_snapshot
    验证页面源代码中是否存在元标签
  2. 导航到
    /robots.txt
    并验证是否可加载
  3. 导航到
    /sitemap.xml
    并验证是否可加载

7.3 Record Skill Usage

7.3 记录技能使用情况

Reference:
${PLUGIN_ROOT}/references/skill-tracking-reference.md
Follow the skill tracking instructions in the reference to record this skill's usage. Use
--skillName "AddSeo"
.
参考:
${PLUGIN_ROOT}/references/skill-tracking-reference.md
按照参考文档中的技能跟踪说明记录该技能的使用情况。使用
--skillName "AddSeo"
。

7.4 Git Commit

7.4 Git提交

CRITICAL — This step is MANDATORY. You MUST commit the SEO changes before finishing. Do NOT skip this step.
Stage the specific SEO files and commit:
bash
git add public/robots.txt public/sitemap.xml public/favicon.svg index.html
git commit -m "Add SEO: robots.txt, sitemap.xml, meta tags, favicon"
Adjust the file paths based on what was actually created (e.g., include
src/layouts/Layout.astro
instead of
index.html
for Astro sites, omit
favicon.svg
if it was not created). Only stage files that were created or modified by this skill.
重要提示——此步骤为必填项。必须在完成前提交SEO更改。请勿跳过此步骤。
暂存特定的SEO文件并提交:
bash
git add public/robots.txt public/sitemap.xml public/favicon.svg index.html
git commit -m "Add SEO: robots.txt, sitemap.xml, meta tags, favicon"
根据实际创建的文件调整文件路径(例如,对于Astro站点,包含
src/layouts/Layout.astro
而非
index.html
;如果未创建
favicon.svg
则省略)。仅暂存由该技能创建或修改的文件。

7.5 Present Summary

7.5 展示摘要

Present a summary of what was added:
AssetStatusDetails
robots.txt
CreatedAllows all crawlers, references sitemap
sitemap.xml
CreatedX URLs mapped with priorities
Meta tagsAddedtitle, description, viewport, canonical, robots
Open GraphAdded/Skippedog:title, og:description, og:url, Twitter Card
FaviconCreated/SkippedSVG favicon with site initial
展示已添加内容的摘要:
资源状态详情
robots.txt
已创建允许所有爬虫,引用站点地图
sitemap.xml
已创建映射了X个URL并设置优先级
元标签已添加标题、描述、视口、规范链接、爬虫指令
Open Graph已添加/已跳过og:title、og:description、og:url、Twitter Card
网站图标已创建/已跳过带有站点首字母的SVG图标

7.6 Suggest Next Steps

7.6 建议后续步骤

After the summary, suggest:
  • Deploy the site to make SEO changes live:
    /deploy-site
  • If data model is needed:
    /setup-datamodel
  • For more advanced SEO: consider structured data (JSON-LD), performance optimization, and accessibility audit
展示摘要后,建议:
  • 部署站点以生效SEO更改:
    /deploy-site
  • 如果需要数据模型:
    /setup-datamodel
  • 如需更高级的SEO:考虑结构化数据(JSON-LD)、性能优化和可访问性审计

Output

输出结果

  • All files verified on disk
  • Playwright verification passed
  • Git commit created with all SEO changes

  • 所有文件已在磁盘上验证
  • Playwright验证通过
  • 已创建包含所有SEO更改的Git提交

Important Notes

重要说明

Progress Tracking

进度跟踪

Use
TaskCreate
at the start to track each phase:
TaskDescription
Phase 1Verify site exists and detect framework
Phase 2Gather SEO configuration from user
Phase 3Present plan and get user approval
Phase 4Create robots.txt
Phase 5Generate sitemap.xml
Phase 6Add meta tags, Open Graph, and favicon
Phase 7Verify via Playwright and commit
Update each task with
TaskUpdate
as it is completed.
在开始时使用
TaskCreate
跟踪每个阶段:
任务描述
阶段1验证站点是否存在并检测框架
阶段2从用户处收集SEO配置信息
阶段3展示计划并获取用户批准
阶段4创建robots.txt
阶段5生成sitemap.xml
阶段6添加元标签、Open Graph和网站图标
阶段7通过Playwright验证并提交
完成每个任务后使用
TaskUpdate
更新状态。

Key Decision Points

关键决策点

  • Phase 1: If
    powerpages.config.json
    is not found, stop and redirect the user to
    /create-site
    .
  • Phase 2: If the user specifies custom exclusions, confirm the exact paths before proceeding.
  • Phase 3: Do not proceed to implementation until the user explicitly approves the plan.
  • Phase 6.4: If the framework is Astro, meta tags go into the layout component, not
    index.html
    .
  • Phase 7.2: If Playwright verification fails (e.g., robots.txt does not load), diagnose and fix before committing.
Begin with Phase 1: Verify Site Exists
  • 阶段1:如果未找到
    powerpages.config.json
    ,停止操作并引导用户使用
    /create-site
    。
  • 阶段2:如果用户指定了自定义排除项,在继续前确认确切路径。
  • 阶段3:在用户明确批准计划前,不要进入实施阶段。
  • 阶段6.4:如果框架是Astro,元标签应添加到布局组件而非
    index.html
    。
  • 阶段7.2:如果Playwright验证失败(例如,robots.txt无法加载),在提交前诊断并修复问题。
从阶段1开始:验证站点是否存在