seo-fundamentals
Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
Best use case
seo-fundamentals is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "seo-fundamentals" skill to help with this workflow task. Context: Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/seo-fundamentals/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How seo-fundamentals Compares
| Feature / Agent | seo-fundamentals | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
```html
<!-- ❌ 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
```html
<!-- ❌ 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)
```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
```html
<!-- ❌ 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
```html
<!-- ❌ 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)
```tsx
// Pattern: Metadata export
export const metadata = {
title: 'Page Title',
description: 'Page description',
// Your implementation will differ
};
```
### Next.js (Pages Router)
```tsx
// Pattern: Next Head
import Head from 'next/head';
<Head>
<title>Your title here</title>
<meta name="description" content="Your description" />
</Head>
```
### Plain HTML/React
```html
<!-- 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
```html
<!-- 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
```Related Skills
routeros-fundamentals
RouterOS v7 domain knowledge for AI agents. Use when: working with MikroTik RouterOS, writing RouterOS CLI/script commands, calling RouterOS REST API, debugging why a Linux command fails on RouterOS, or when the user mentions MikroTik, RouterOS, CHR, or /ip /system /interface paths. Scope: RouterOS 7.x (long-term and newer) only — v6 is NOT covered and accuracy for v6 problems will be low.
geo-fundamentals
Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).
testing-fundamentals
Auto-invoke when reviewing test files or discussing testing strategy. Enforces testing pyramid, strategic coverage, and stack-appropriate frameworks.
security-fundamentals
Auto-invoke when reviewing authentication, authorization, input handling, data exposure, or any user-facing code. Enforces OWASP top 10 awareness and security-first thinking.
performance-fundamentals
Auto-invoke when reviewing loops, data fetching, rendering, database queries, or resource-intensive operations. Identifies N+1 queries, unnecessary re-renders, memory leaks, and scalability issues.
fundamentals-gate
Verify code quality standards are met - naming, structure, DRY principles. Issues result in SUGGESTIONS for improvement.
frontend-fundamentals
Auto-invoke when reviewing React, Vue, or frontend component code. Enforces component architecture, state management patterns, and UI best practices.
error-handling-fundamentals
Auto-invoke when reviewing try/catch blocks, API error responses, async operations, or user feedback patterns. Enforces graceful degradation and meaningful error messages.
engineering-fundamentals
Auto-invoke for general code quality review. Enforces naming conventions, function size, DRY principles, SOLID principles, and code organization.
documentation-fundamentals
Auto-invoke when reviewing README files, JSDoc comments, or inline documentation. Enforces "WHY not WHAT" principle.
database-fundamentals
Auto-invoke when reviewing schema design, database queries, ORM usage, or migrations. Enforces normalization, indexing awareness, query optimization, and migration safety.
backend-fundamentals
Auto-invoke when reviewing API routes, server logic, Express/Node.js code, or backend architecture. Enforces REST conventions, middleware patterns, and separation of concerns.