본문으로 건너뛰기
cccskills
무료GitHub에 공개

SEO Optimizer

Plan website improvements for organic search traffic through keyword research, content structure, page metadata, and technical checks. Get guidance on internal links, structured data that describes page content, loading speed, and ongoing performance monitoring.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Search Engine Optimization specialist for content strategy, technical SEO, keyword research, and ranking improvements. Use when optimizing website content, improving search rankings, conducting keyword analysis, or implementing SEO best practices. Expert in on-page SEO, meta tags, schema markup, and Core Web Vitals.

설치 방법 보기

이럴 때 유용합니다

  • Choosing keywords and planning related articles
  • Reviewing titles, descriptions, and headings
  • Checking structured data and indexing settings
  • Investigating page speed and mobile usability

포함된 파일(1)

  • SKILL.md11.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

SEO Optimizer

Comprehensive guidance for search engine optimization across content, technical implementation, and strategic planning to improve organic search visibility and rankings.

When to Use This Skill

Use this skill when:

  • Optimizing website content for search engines
  • Conducting keyword research and analysis
  • Implementing technical SEO improvements
  • Creating SEO-friendly meta tags and descriptions
  • Auditing websites for SEO issues
  • Improving Core Web Vitals and page speed
  • Implementing schema markup (structured data)
  • Planning content strategy for organic traffic

SEO Fundamentals

1. Keyword Research & Strategy

Primary Keyword Selection:

  • Focus on search intent (informational, navigational, transactional, commercial)
  • Balance search volume with competition
  • Consider keyword difficulty and ranking potential
  • Target long-tail keywords for quick wins

Keyword Research Process:

1. Identify seed keywords from business objectives
2. Use tools to expand keyword list (Google Keyword Planner, Ahrefs, SEMrush)
3. Analyze search volume and difficulty
4. Group keywords by topic clusters
5. Map keywords to content types and pages
6. Prioritize based on potential ROI

Content Optimization Formula:

  • Primary keyword: 1-2% density (natural placement)
  • Include in: Title tag, H1, first paragraph, URL, meta description
  • Use semantic variations and related terms
  • Maintain natural readability (don't keyword stuff)

2. On-Page SEO

Title Tag Optimization:

<!-- Good: Descriptive, includes keyword, under 60 characters -->
<title>Ultimate Guide to React Hooks - Learn useEffect & useState</title>

<!-- Bad: Too long, keyword stuffing, generic -->
<title>React Hooks Guide React Hooks Tutorial React Hooks Examples Learn React</title>

Best Practices:

  • Keep under 60 characters (displayed in SERPs)
  • Place primary keyword near the beginning
  • Include brand name if space permits
  • Make compelling and click-worthy
  • Unique for every page

Meta Description:

<!-- Good: Compelling, includes keywords, call-to-action, 150-160 chars -->
<meta name="description" content="Master React Hooks with our comprehensive guide. Learn useState, useEffect, and custom hooks with practical examples. Start building better React apps today.">

<!-- Bad: Too short, no value proposition -->
<meta name="description" content="React Hooks guide and tutorial">

Header Structure:

<!-- Proper hierarchy -->
<h1>Main Page Title (Primary Keyword)</h1>
  <h2>Section Heading (Related Keywords)</h2>
    <h3>Subsection</h3>
    <h3>Subsection</h3>
  <h2>Another Section</h2>
    <h3>Subsection</h3>

URL Structure:

✅ Good URLs:
- /blog/react-hooks-guide
- /products/running-shoes
- /learn/javascript-async-await

❌ Bad URLs:
- /blog?p=12345
- /products/cat-1/subcat-2/item-999
- /page.php?id=abc&ref=xyz

Image Optimization:

<!-- Optimized image -->
<img
  src="/images/react-hooks-diagram-800w.webp"
  alt="React Hooks lifecycle diagram showing useState and useEffect"
  width="800"
  height="600"
  loading="lazy"
/>

Best Practices:

  • Use descriptive, keyword-rich alt text
  • Compress images (WebP format preferred)
  • Specify dimensions to prevent layout shift
  • Use lazy loading for below-fold images
  • Include captions when relevant

3. Content Quality

E-E-A-T Principles (Experience, Expertise, Authoritativeness, Trust):

  • Demonstrate author expertise with credentials
  • Cite authoritative sources
  • Keep content accurate and up-to-date
  • Show real experience and original insights
  • Include author bios and bylines

Content Structure for SEO:

# Main Title (H1) - Primary Keyword

Brief introduction with primary keyword in first 100 words.

## What is [Topic]? (H2) - Answer core question

Comprehensive explanation with examples.

## Why [Topic] Matters (H2) - Value proposition

Benefits and use cases.

## How to [Action] (H2) - Practical guide

Step-by-step instructions with visuals.

## Best Practices (H2) - Advanced tips

Expert recommendations.

## Common Mistakes to Avoid (H2)

Troubleshooting and pitfalls.

## Conclusion

Summary and call-to-action.

Content Length Guidelines:

  • Blog posts: 1,500-2,500 words (comprehensive topics)
  • Product pages: 300-500 words minimum
  • Category pages: 500-1,000 words
  • Homepage: 500+ words

4. Technical SEO

Schema Markup (Structured Data):

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Complete Guide to React Hooks",
  "image": "https://example.com/images/react-hooks.jpg",
  "datePublished": "2024-01-15",
  "dateModified": "2024-02-01",
  "author": {
    "@type": "Person",
    "name": "Jane Developer"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tech Academy",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}

Common Schema Types:

  • Article (blog posts)
  • Product (e-commerce)
  • FAQ (question/answer pages)
  • HowTo (tutorials and guides)
  • Organization (company info)
  • LocalBusiness (location-based businesses)
  • BreadcrumbList (navigation paths)
  • Review/AggregateRating (ratings and reviews)

Robots.txt Configuration:

User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /api/
Allow: /api/public/

Sitemap: https://example.com/sitemap.xml

XML Sitemap Structure:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/react-hooks-guide</loc>
    <lastmod>2024-01-10</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Canonical Tags:

<!-- Prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/original-page">

<!-- Handle URL parameters -->
<link rel="canonical" href="https://example.com/products/shoes">
<!-- Even if accessed via: /products/shoes?color=red&size=10 -->

5. Core Web Vitals

Largest Contentful Paint (LCP) - Target: < 2.5s

  • Optimize images and videos
  • Use CDN for static assets
  • Minimize render-blocking resources
  • Implement lazy loading

First Input Delay (FID) - Target: < 100ms

  • Minimize JavaScript execution time
  • Break up long tasks
  • Use web workers for heavy computations
  • Defer non-critical JavaScript

Cumulative Layout Shift (CLS) - Target: < 0.1

  • Set size attributes on images and videos
  • Avoid inserting content above existing content
  • Use transform animations instead of layout-triggering properties
  • Reserve space for ads and embeds

Page Speed Optimization:

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Async/defer JavaScript -->
<script src="/js/analytics.js" async></script>
<script src="/js/main.js" defer></script>

6. Mobile SEO

Mobile-First Optimization:

  • Responsive design (mobile-friendly test passed)
  • Touch-friendly buttons (minimum 48x48px)
  • Readable font sizes (16px minimum)
  • Proper viewport configuration
  • Fast mobile page speed

Viewport Configuration:

<meta name="viewport" content="width=device-width, initial-scale=1">

7. Internal Linking Strategy

Best Practices:

  • Use descriptive anchor text (avoid "click here")
  • Link to relevant, contextual pages
  • Maintain logical hierarchy and flow
  • Include 3-5 internal links per 1,000 words
  • Update old content with links to new content

Example:

Learn more about [advanced React patterns](/guides/react-patterns)
or check out our [useState hook tutorial](/tutorials/usestate-guide).

SEO Content Checklist

Before Publishing:

  • Primary keyword in title tag (under 60 chars)
  • Meta description (150-160 chars, compelling)
  • H1 tag with primary keyword
  • URL slug optimized and readable
  • Images compressed with descriptive alt text
  • 3-5 internal links to relevant content
  • External links to authoritative sources
  • Content length appropriate for topic depth
  • Schema markup implemented
  • Mobile-friendly and responsive
  • Page speed optimized (< 3s load time)
  • No broken links
  • Canonical tag set correctly
  • Social sharing meta tags (Open Graph, Twitter Card)

Advanced SEO Strategies

Topic Clusters & Pillar Pages

Structure:

Pillar Page: "Complete Guide to React"
  ├── Cluster: "React Hooks Tutorial"
  ├── Cluster: "React Context API Guide"
  ├── Cluster: "React Performance Optimization"
  └── Cluster: "React Testing Best Practices"

Implementation:

  • Create comprehensive pillar content (3,000+ words)
  • Develop 8-12 cluster articles supporting the pillar
  • Link all clusters back to pillar page
  • Link pillar page to all clusters
  • Use consistent keyword themes

Featured Snippet Optimization

Question-Based Content:

## What is React?

React is a JavaScript library for building user interfaces,
developed by Facebook. It allows developers to create reusable
UI components and efficiently update the DOM through a virtual
DOM implementation.

List-Based Content:

## Top 5 React Best Practices

1. Use functional components with hooks
2. Implement proper state management
3. Optimize performance with React.memo
4. Follow component composition patterns
5. Write comprehensive tests

Table-Based Content:

FrameworkPerformanceLearning CurveEcosystem
ReactExcellentModerateExtensive
VueExcellentEasyGrowing
AngularGoodSteepMature

Local SEO (for businesses with physical locations)

Google Business Profile Optimization:

  • Complete all business information
  • Regular posts and updates
  • Respond to reviews
  • Add high-quality photos
  • Verify business hours

Local Schema Markup:

{
  "@type": "LocalBusiness",
  "name": "Tech Solutions Inc",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102"
  },
  "telephone": "+1-415-555-0123"
}

Monitoring & Analytics

Key Metrics to Track:

  • Organic traffic trends
  • Keyword rankings
  • Click-through rates (CTR)
  • Bounce rate and dwell time
  • Core Web Vitals scores
  • Backlink profile growth
  • Conversion rates from organic traffic

Tools:

  • Google Search Console (performance, indexing issues)
  • Google Analytics 4 (traffic, behavior, conversions)
  • PageSpeed Insights (Core Web Vitals)
  • Ahrefs/SEMrush (keywords, backlinks, competition)
  • Screaming Frog (technical audits)

When optimizing for SEO, prioritize user experience and value delivery. Search engines increasingly reward content that genuinely helps users and provides authoritative, trustworthy information.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

davila7의 스킬 모두 보기

이 스킬의 문제 신고