Skill: SEO Audit for Concept Pages

Use this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.

When to Use

• Before publishing a new concept page
• When optimizing underperforming pages
• Periodic content audits
• After major content updates
• When targeting new keywords

Goal

Each concept page should rank for searches like:

• "what is [concept] in JavaScript"
• "how does [concept] work in JavaScript"
• "[concept] JavaScript explained"
• "[concept] JavaScript tutorial"
• "[concept] JavaScript example"

---

SEO Audit Methodology

Follow these five steps for a complete SEO audit.

Step 1: Identify Target Keywords

Before auditing, identify the keyword cluster for the concept.

Keyword Cluster Template

Type	Pattern	Example (Closures)
Primary	[concept] JavaScript	closures JavaScript
What is	what is [concept] in JavaScript	what is a closure in JavaScript
How does	how does [concept] work	how do closures work
How to	how to use/create [concept]	how to use closures
Why	why use [concept]	why use closures JavaScript
Examples	[concept] examples	closure examples JavaScript
vs	[concept] vs [related]	closures vs scope
Interview	[concept] interview questions	closure interview questions

Step 2: On-Page SEO Audit

Check all on-page SEO elements systematically.

Step 3: Featured Snippet Optimization

Verify content is structured to win featured snippets.

Step 4: Internal Linking Audit

Check the internal link structure.

Step 5: Generate Report

Document findings using the report template.

---

Keyword Clusters by Concept

Use these pre-built keyword clusters for each concept.

---

Audit Checklists

Title Tag Checklist (4 points)

#	Check	Points	How to Verify
1	Length 50-60 characters	1	Count characters in title frontmatter
2	Primary keyword in first half	1	Concept name appears early
3	Ends with "in JavaScript"	1	Check title ending
4	Contains compelling hook	1	Promises value/benefit to reader

Scoring:

• 4/4: ✅ Excellent
• 3/4: ⚠️ Good, minor improvements possible
• 0-2/4: ❌ Needs significant work

Title Formula:

[Concept]: [What You'll Understand] in JavaScript

Good Examples:

Concept	Title (with character count)
Closures	"Closures: How Functions Remember Their Scope in JavaScript" (58 chars)
Event Loop	"Event Loop: How Async Code Actually Runs in JavaScript" (54 chars)
Promises	"Promises: Handling Async Operations in JavaScript" (49 chars)
DOM	"DOM: How Browsers Represent Web Pages in JavaScript" (51 chars)

Bad Examples:

Issue	Bad Title	Better Title
Too short	"Closures"	"Closures: How Functions Remember Their Scope in JavaScript"
Too long	"Understanding JavaScript Closures and How They Work with Examples" (66 chars)	"Closures: How Functions Remember Their Scope in JavaScript" (58 chars)
No hook	"JavaScript Closures"	"Closures: How Functions Remember Their Scope in JavaScript"
Missing "JavaScript"	"Understanding Closures and Scope"	Add "in JavaScript" at end

---

Meta Description Checklist (4 points)

#	Check	Points	How to Verify
1	Length 150-160 characters	1	Count characters in description frontmatter
2	Starts with action word	1	"Learn", "Understand", "Discover" (NOT "Master")
3	Contains primary keyword	1	Concept name + "JavaScript" present
4	Promises specific value	1	Lists what reader will learn

Description Formula:

[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].

Good Examples:

Concept	Description
Closures	"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns." (159 chars)
Event Loop	"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking." (176 chars - trim!)
DOM	"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering." (162 chars)

Bad Examples:

Issue	Bad Description	Fix
Too short	"Learn about closures"	Expand to 150-160 chars with specifics
Starts with "Master"	"Master JavaScript closures..."	"Learn JavaScript closures..."
Too vague	"A guide to closures"	List specific topics covered
Missing keyword	"Functions can remember things"	Include "closures" and "JavaScript"

---

Keyword Placement Checklist (5 points)

#	Check	Points	How to Verify
1	Primary keyword in title	1	Check frontmatter title
2	Primary keyword in meta description	1	Check frontmatter description
3	Primary keyword in first 100 words	1	Check opening paragraphs
4	Keyword in at least one H2 heading	1	Scan all ## headings
5	No keyword stuffing	1	Content reads naturally

Keyword Placement Map:

┌─────────────────────────────────────────────────────────────────────────┐
│                         KEYWORD PLACEMENT                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  🔴 CRITICAL (Must have keyword)                                         │
│  ─────────────────────────────────                                       │
│  • title frontmatter                                                     │
│  • description frontmatter                                               │
│  • First paragraph (within 100 words)                                    │
│  • At least one H2 heading                                               │
│                                                                          │
│  🟡 RECOMMENDED (Include naturally)                                      │
│  ──────────────────────────────────                                      │
│  • "What you'll learn" Info box                                          │
│  • H3 subheadings                                                        │
│  • Key Takeaways section                                                 │
│  • First sentence after major H2s                                        │
│                                                                          │
│  ⚠️ AVOID                                                                │
│  ─────────                                                               │
│  • Same phrase >4 times per 1000 words                                   │
│  • Forcing keywords where pronouns work better                           │
│  • Awkward sentence structures to fit keywords                           │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

---

Content Structure Checklist (6 points)

#	Check	Points	How to Verify
1	Opens with question hook	1	First paragraph asks engaging question
2	Code example in first 200 words	1	Simple example appears early
3	"What you'll learn" Info box	1	<Info> component after opening
4	Short paragraphs (2-4 sentences)	1	Scan content for long blocks
5	1,500+ words	1	Word count check
6	Key terms bolded on first mention	1	Important terms use **bold**

Content Structure Template:

┌─────────────────────────────────────────────────────────────────────────┐
│                       IDEAL PAGE STRUCTURE                               │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  1. QUESTION HOOK (First 50 words)                                       │
│     "How does JavaScript...? Why do...?"                                 │
│                                                                          │
│  2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200)                           │
│     Quick explanation + simple code demo                                 │
│                                                                          │
│  3. "WHAT YOU'LL LEARN" INFO BOX                                         │
│     5-7 bullet points                                                    │
│                                                                          │
│  4. PREREQUISITES WARNING (if applicable)                                │
│     Link to required prior concepts                                      │
│                                                                          │
│  5. MAIN CONTENT SECTIONS (H2s)                                          │
│     Each H2 answers a question or teaches a concept                      │
│     Include code examples, diagrams, tables                              │
│                                                                          │
│  6. COMMON MISTAKES / GOTCHAS SECTION                                    │
│     What trips people up                                                 │
│                                                                          │
│  7. KEY TAKEAWAYS                                                        │
│     8-10 numbered points summarizing everything                          │
│                                                                          │
│  8. TEST YOUR KNOWLEDGE                                                  │
│     5-6 Q&A accordions                                                   │
│                                                                          │
│  9. RELATED CONCEPTS                                                     │
│     4 cards linking to related topics                                    │
│                                                                          │
│  10. RESOURCES (Reference, Articles, Videos)                             │
│      MDN links, curated articles, videos                                 │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

---

Featured Snippet Checklist (4 points)

#	Check	Points	How to Verify
1	"What is X" has 40-60 word definition	1	Count words in first paragraph after "What is" H2
2	At least one H2 is phrased as question	1	Check for "What is", "How does", "Why" H2s
3	Numbered steps for "How to" content	1	Uses <Steps> component or numbered list
4	Comparison tables (if applicable)	1	Tables for "X vs Y" content

Featured Snippet Patterns:

┌─────────────────────────────────────────────────────────────────────────┐
│                     FEATURED SNIPPET FORMATS                             │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  QUERY TYPE             WINNING FORMAT         YOUR CONTENT              │
│  ───────────            ──────────────         ────────────              │
│                                                                          │
│  "What is X"            Paragraph              40-60 word definition     │
│                                                after H2, bold keyword    │
│                                                                          │
│  "How to X"             Numbered list          <Steps> component or      │
│                                                1. 2. 3. markdown         │
│                                                                          │
│  "X vs Y"               Table                  | Feature | X | Y |       │
│                                                comparison table          │
│                                                                          │
│  "Types of X"           Bullet list            - **Type 1** — desc       │
│                                                - **Type 2** — desc       │
│                                                                          │
│  "[X] examples"         Code block             ```javascript             │
│                         + explanation          // example code           │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Definition Paragraph Example (40-60 words):

## What is a Closure in JavaScript?

A **closure** is a function that retains access to variables from its outer 
(enclosing) scope, even after that outer function has finished executing. 
Closures are created every time a function is created in JavaScript, allowing 
inner functions to "remember" and access their lexical environment.

(This is 52 words - perfect for a featured snippet)

---

Internal Linking Checklist (4 points)

#	Check	Points	How to Verify
1	3-5 related concepts linked in body	1	Count /concepts/ links in prose
2	Descriptive anchor text	1	No "click here", "here", "this"
3	Prerequisites in Warning box	1	<Warning> with links at start
4	Related Concepts section has 4 cards	1	<CardGroup> at end with 4 Cards

Good Anchor Text:

❌ Bad	✓ Good
"click here"	"event loop concept"
"here"	"JavaScript closures"
"this article"	"our Promises guide"
"read more"	"understanding the call stack"

Link Placement Strategy:

<!-- In Prerequisites (Warning box) -->
<Warning>
**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) 
and the [Event Loop](/concepts/event-loop). Read those first if needed.
</Warning>

<!-- In Body Content (natural context) -->
When the callback finishes, it's added to the task queue — managed by 
the [event loop](/concepts/event-loop).

<!-- In Related Concepts Section -->
<CardGroup cols={2}>
  <Card title="Promises" icon="handshake" href="/concepts/promises">
    async/await is built on top of Promises