This skill should be used when the user asks to "add SEO", "add meta tags", "add robots.txt", "add sitemap", "improve SEO", "search engine optimization", "add open graph tags", "add favicon", "make site searchable", or wants to add SEO essentials (robots.txt, sitemap.xml, meta tags) to their Power Pages code site after creating it with /power-pages:create-site.
Instrucciones de origen · Vista previa de solo lectura
name
add-seo
description
This skill should be used when the user asks to "add SEO", "add meta tags", "add robots.txt", "add sitemap", "improve SEO", "search engine optimization", "add open graph tags", "add favicon", "make site searchable", or wants to add SEO essentials (robots.txt, sitemap.xml, meta tags) to their Power Pages code site after creating it with /power-pages:create-site.
{"Stop":[{"hooks":[{"type":"command","command":"node \"${CLAUDE_PLUGIN_ROOT}/skills/add-seo/scripts/validate-seo.js\"","timeout":15},{"type":"prompt","prompt":"If SEO assets were being added in this session (via /power-pages:add-seo), verify before allowing stop: 1) robots.txt was created in the public directory, 2) sitemap.xml was created in the public directory with correct site URLs, 3) Meta tags (title, description, viewport, Open Graph) were added to index.html, 4) The user reviewed and approved the SEO additions, 5) A git commit was made with the SEO changes. If any of these are incomplete, return { \"ok\": false, \"reason\": \"<specific issues>\" }. If no SEO work happened or everything is complete, return { \"ok\": true }.","timeout":30}]}]}
Add 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 /power-pages:create-site. Run that skill first if the site does not exist yet.
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
Workflow
Phase 1: Verify Site Exists → Locate the Power Pages project
Phase 2: Gather SEO Configuration → Site URL, pages, preferences
Phase 3: Plan & Approve → Present SEO additions inline, get user approval
Phase 4: Add robots.txt → Create robots.txt in public directory
Phase 5: Add sitemap.xml → Generate sitemap.xml from site routes
Phase 6: Add Meta Tags → Add title, description, viewport, Open Graph, and favicon to index.html
Read package.json to determine the framework and locate key files. See ${CLAUDE_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).
Output
Project root path identified
Framework detected (React, Vue, Angular, or Astro)
Full list of discoverable routes
Phase 2: Gather SEO Configuration
Goal: Collect all SEO preferences from the user before making any changes.
(free text — use single generic option so user types via "Other")
Which pages should be excluded from search engine indexing?
Exclusions
None — index all pages (Recommended), Admin/auth pages only, Let me specify
Call 2:
Question
Header
Options
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 Tags
Yes — add Open Graph and Twitter Card tags (Recommended), No — skip social tags
Output
Production URL confirmed
Exclusion list finalized
Meta description text
Open Graph tag preference (yes/no)
Phase 3: Plan & Approve
Goal: Present the full SEO plan to the user and get explicit approval before making changes.
Actions
Present the SEO additions that will be made as a clear, inline summary:
robots.txt content — which paths will be allowed/disallowed
sitemap.xml content — all discovered routes with the production URL and priority assignments
Meta tags to add to index.html — title, description, viewport, charset, Open Graph, Twitter Card
Favicon — link tag and placeholder SVG
After presenting the plan, use AskUserQuestion to get approval:
Question
Header
Options
Here is the SEO plan. How would you like to proceed?
SEO Plan Approval
Approve 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.
Output
User-approved SEO plan ready for implementation
Phase 4: Add robots.txt
Goal: Create a valid robots.txt that tells search engines which pages to crawl.
Actions
Create robots.txt in the public directory (<PROJECT_ROOT>/public/robots.txt):
Where <FIRST_LETTER> is the first letter of the site name and <PRIMARY_COLOR> is the primary theme color from the site's configuration.
6.4 Astro-Specific Handling
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.
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)
Phase 7: Verify & Commit
Goal: Confirm all SEO assets are in place, verify via Playwright, and commit changes.
Actions
7.1 Verify Files Exist
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)
7.2 Verify via Playwright
If a dev server is running (or start one):
Navigate to the site root and use browser_snapshot to verify meta tags are present in the page source
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.
7.5 Present Summary
Present a summary of what was added:
Asset
Status
Details
robots.txt
Created
Allows all crawlers, references sitemap
sitemap.xml
Created
X URLs mapped with priorities
Meta tags
Added
title, description, viewport, canonical, robots
Open Graph
Added/Skipped
og:title, og:description, og:url, Twitter Card
Favicon
Created/Skipped
SVG favicon with site initial
7.6 Suggest Next Steps
After the summary, suggest:
Deploy the site to make SEO changes live: /power-pages:deploy-site
If data model is needed: /power-pages:setup-datamodel
For more advanced SEO: consider structured data (JSON-LD), performance optimization, and accessibility audit
Output
All files verified on disk
Playwright verification passed
Git commit created with all SEO changes
Important Notes
Progress Tracking
Use TaskCreate at the start to track each phase:
Task
Description
Phase 1
Verify site exists and detect framework
Phase 2
Gather SEO configuration from user
Phase 3
Present plan and get user approval
Phase 4
Create robots.txt
Phase 5
Generate sitemap.xml
Phase 6
Add meta tags, Open Graph, and favicon
Phase 7
Verify via Playwright and commit
Update each task with TaskUpdate as it is completed.
Key Decision Points
Phase 1: If powerpages.config.json is not found, stop and redirect the user to /power-pages: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.
