/seo
Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines.
$ npx -y skills add DanielPodolsky/ownyourcode --skill seo --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/seo
Context preview
The summary Claude sees to decide when to auto-load this skill.
Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines.
SKILL.md
seo.SKILL.mdname: seo-fundamentals
description: Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines.
SEO Fundamentals Review
> "Good SEO is good UX. If search engines can't understand your page, users might not find it."
When to Apply
Activate this skill when:
- Reviewing HTML `<head>` sections
- Seeing meta tags in code
- Next.js/Remix page components
- HTML structure with headings
- Any page that should be indexed
---
The SEO Checklist
Must Have (Every Page)
- [ ] **Title tag** — 50-60 characters, unique per page
- [ ] **Meta description** — 150-160 characters, compelling
- [ ] **Single H1** — One per page, describes main content
- [ ] **Logical heading hierarchy** — H1 → H2 → H3 (no skipping)
- [ ] **Semantic HTML** — `<header>`, `<main>`, `<nav>`, `<article>`, `<footer>`
- [ ] **Image alt text** — Descriptive, not "image1.jpg"
Should Have (Marketing Pages)
- [ ] **Open Graph tags** — og:title, og:description, og:image
- [ ] **Twitter Card** — twitter:card, twitter:title
- [ ] **Canonical URL** — Prevent duplicate content issues
- [ ] **Structured data** — JSON-LD for rich snippets
Performance (Affects SEO)
- [ ] **Core Web Vitals awareness**
- LCP (Largest Contentful Paint) < 2.5s
- FID (First Input Delay) < 100ms
- CLS (Cumulative Layout Shift) < 0.1
---
Common Mistakes (Anti-Patterns)
1. Multiple H1 Tags
<!-- ❌ BAD: Multiple H1s confuse search engines -->
<h1>Welcome</h1>
<h1>Our Products</h1>
<h1>Contact Us</h1>
<!-- ✅ GOOD: One H1, logical hierarchy -->
<h1>Welcome to Our Store</h1>
<h2>Our Products</h2>
<h2>Contact Us</h2>
2. Missing Alt Text
<!-- ❌ BAD: Empty or useless alt -->
<img src="hero.jpg" alt="">
<img src="team.jpg" alt="image">
<!-- ✅ GOOD: Descriptive alt text -->
<img src="hero.jpg" alt="Software engineer working at laptop">
<img src="team.jpg" alt="Our founding team of 5 engineers">
3. Div Soup (No Semantic HTML)
<!-- ❌ BAD: No semantic meaning -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- ✅ GOOD: Semantic HTML -->
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
4. Skipping Heading Levels
<!-- ❌ BAD: Jumps from H1 to H4 -->
<h1>Page Title</h1>
<h4>Some Section</h4>
<!-- ✅ GOOD: Sequential hierarchy -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
5. Generic Title Tags
<!-- ❌ BAD: Not descriptive -->
<title>Home</title>
<title>Page</title>
<!-- ✅ GOOD: Descriptive with keywords -->
<title>Daniel Lamb - Full Stack Developer Portfolio</title>
<title>Contact Us | Acme Software Solutions</title>
---
Socratic Questions
Ask these instead of giving answers:
1. **Title**: "If someone sees this title in Google results, would they click it?" 2. **H1**: "How many H1 tags does this page have? What happens if there are multiple?" 3. **Alt Text**: "If the image doesn't load, what information is lost?" 4. **Semantic HTML**: "Can a screen reader understand the structure of this page?" 5. **Meta Description**: "Does this description make you want to click?"
---
Stack-Specific Guidance
Next.js (App Router)
// Pattern: Metadata export
export const metadata = {
title: 'Page Title',
description: 'Page description',
// Your implementation will differ
};Next.js (Pages Router)
// Pattern: Next Head
import Head from 'next/head';
<Head>
<title>Your title here</title>
<meta name="description" content="Your description" />
</Head>
Plain HTML/React
<!-- In index.html or via react-helmet -->
<head>
<title>Title here</title>
<meta name="description" content="Description here">
</head>
---
Red Flags to Call Out
| Flag | Question | |------|----------| | Missing title tag | "What will this page show in search results?" | | Multiple H1s | "Which heading is the main topic? Search engines are confused." | | No meta description | "How will Google summarize this page?" | | Empty alt text | "What if the image doesn't load? What info is lost?" | | All divs, no semantics | "Can a screen reader navigate this page?" | | Title over 60 chars | "This will be cut off in search results. Can you shorten it?" |
---
Open Graph Template
<!-- Minimum viable Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">
---
Interview Connection
> "I implemented SEO best practices including semantic HTML, proper heading hierarchy, and meta tags, improving our page's discoverability."
When reviewing their code:
- "What's your SEO strategy for this page?"
- "How would Google understand what this page is about?"
- "Show me your heading structure"
---
MCP Usage
Context7 - Framework Docs
Fetch: Next.js metadata documentation
Fetch: Semantic HTML best practices
Octocode - Real Examples
Search: "metadata" + "title" + "description" in Next.js repos
Search: Open Graph implementation patterns
Read more
name: seo-fundamentals description: Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines.
SEO Fundamentals Review
> "Good SEO is good UX. If search engines can't understand your page, users might not find it."
When to Apply
Activate this skill when:
- Reviewing HTML `<head>` sections
- Seeing meta tags in code
- Next.js/Remix page components
- HTML structure with headings
- Any page that should be indexed
---
The SEO Checklist
Must Have (Every Page)
- [ ] **Title tag** — 50-60 characters, unique per page
- [ ] **Meta description** — 150-160 characters, compelling
- [ ] **Single H1** — One per page, describes main content
- [ ] **Logical heading hierarchy** — H1 → H2 → H3 (no skipping)
- [ ] **Semantic HTML** — `<header>`, `<main>`, `<nav>`, `<article>`, `<footer>`
- [ ] **Image alt text** — Descriptive, not "image1.jpg"
Should Have (Marketing Pages)
- [ ] **Open Graph tags** — og:title, og:description, og:image
- [ ] **Twitter Card** — twitter:card, twitter:title
- [ ] **Canonical URL** — Prevent duplicate content issues
- [ ] **Structured data** — JSON-LD for rich snippets
Performance (Affects SEO)
- [ ] **Core Web Vitals awareness**
- LCP (Largest Contentful Paint) < 2.5s
- FID (First Input Delay) < 100ms
- CLS (Cumulative Layout Shift) < 0.1
---
Common Mistakes (Anti-Patterns)
1. Multiple H1 Tags
<!-- ❌ BAD: Multiple H1s confuse search engines --> <h1>Welcome</h1> <h1>Our Products</h1> <h1>Contact Us</h1> <!-- ✅ GOOD: One H1, logical hierarchy --> <h1>Welcome to Our Store</h1> <h2>Our Products</h2> <h2>Contact Us</h2>
2. Missing Alt Text
<!-- ❌ BAD: Empty or useless alt --> <img src="hero.jpg" alt=""> <img src="team.jpg" alt="image"> <!-- ✅ GOOD: Descriptive alt text --> <img src="hero.jpg" alt="Software engineer working at laptop"> <img src="team.jpg" alt="Our founding team of 5 engineers">
3. Div Soup (No Semantic HTML)
<!-- ❌ BAD: No semantic meaning --> <div class="header"> <div class="nav">...</div> </div> <div class="content">...</div> <div class="footer">...</div> <!-- ✅ GOOD: Semantic HTML --> <header> <nav>...</nav> </header> <main>...</main> <footer>...</footer>
4. Skipping Heading Levels
<!-- ❌ BAD: Jumps from H1 to H4 --> <h1>Page Title</h1> <h4>Some Section</h4> <!-- ✅ GOOD: Sequential hierarchy --> <h1>Page Title</h1> <h2>Main Section</h2> <h3>Subsection</h3>
5. Generic Title Tags
<!-- ❌ BAD: Not descriptive --> <title>Home</title> <title>Page</title> <!-- ✅ GOOD: Descriptive with keywords --> <title>Daniel Lamb - Full Stack Developer Portfolio</title> <title>Contact Us | Acme Software Solutions</title>
---
Socratic Questions
Ask these instead of giving answers:
1. **Title**: "If someone sees this title in Google results, would they click it?" 2. **H1**: "How many H1 tags does this page have? What happens if there are multiple?" 3. **Alt Text**: "If the image doesn't load, what information is lost?" 4. **Semantic HTML**: "Can a screen reader understand the structure of this page?" 5. **Meta Description**: "Does this description make you want to click?"
---
Stack-Specific Guidance
Next.js (App Router)
// Pattern: Metadata export
export const metadata = {
title: 'Page Title',
description: 'Page description',
// Your implementation will differ
};Next.js (Pages Router)
// Pattern: Next Head import Head from 'next/head'; <Head> <title>Your title here</title> <meta name="description" content="Your description" /> </Head>
Plain HTML/React
<!-- In index.html or via react-helmet --> <head> <title>Title here</title> <meta name="description" content="Description here"> </head>
---
Red Flags to Call Out
| Flag | Question | |------|----------| | Missing title tag | "What will this page show in search results?" | | Multiple H1s | "Which heading is the main topic? Search engines are confused." | | No meta description | "How will Google summarize this page?" | | Empty alt text | "What if the image doesn't load? What info is lost?" | | All divs, no semantics | "Can a screen reader navigate this page?" | | Title over 60 chars | "This will be cut off in search results. Can you shorten it?" |
---
Open Graph Template
<!-- Minimum viable Open Graph --> <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="Your page description"> <meta property="og:image" content="https://yoursite.com/og-image.jpg"> <meta property="og:url" content="https://yoursite.com/page"> <meta property="og:type" content="website">
---
Interview Connection
> "I implemented SEO best practices including semantic HTML, proper heading hierarchy, and meta tags, improving our page's discoverability."
When reviewing their code:
- "What's your SEO strategy for this page?"
- "How would Google understand what this page is about?"
- "Show me your heading structure"
---
MCP Usage
Context7 - Framework Docs
Fetch: Next.js metadata documentation Fetch: Semantic HTML best practices
Octocode - Real Examples
Search: "metadata" + "title" + "description" in Next.js repos Search: Open Graph implementation patterns
Claude Code workflow for AI-mentored development. Work efficiently with Spec-Driven Development and the 6 Gates. Built to fight cognitive offloading — for developers using AI to grow and maintain ownership.
Repo: DanielPodolsky/ownyourcode
Other skills on ownyourcode.
- /resume-bullets
Transforms completed work into powerful resume bullet points with action verbs, technical context, and quantified impact. Use when completing tasks, updating portfolio, or preparing job applications.
Open skill - /star-stories
Transforms completed work into STAR interview stories (Situation, Task, Action, Result). Use when completing tasks, preparing for behavioral interviews, or documenting achievements.
Open skill - /accessibility
Reviews accessibility including WCAG, ARIA, keyboard navigation. Use when junior builds forms, buttons, modals, interactive elements, or asks "is this accessible", "a11y", "screen reader".
Open skill - /backend
Reviews API design, REST conventions, and backend architecture. Use when junior builds API endpoints, Express routes, middleware, controllers, or asks "is this RESTful", "check my endpoint".
Open skill - /database
Reviews schema design, SQL queries, ORM patterns. Use when junior creates schema, writes queries, adds migrations, works with Prisma/MongoDB/PostgreSQL, or asks "is this SQL safe", "N+1", "index".
Open skill - /debugging
Guides systematic debugging through Protocol D (READ, ISOLATE, DOCS, HYPOTHESIZE, VERIFY). Use when junior says "stuck", "not working", "broken", "bug", "error", "crashed", "failing", "can't figure out", or expresses frustration. Do NOT use for general questions.
Open skill