菜单
Optimize web applications for search engines. Implement technical SEO, structured data, and performance optimizations for better rankings.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Interactive onboarding workflow that interviews users to understand their coding goals and generates PR-ready implementation plans. Use when starting a new development task to ensure clear requirements and structured execution.
Implement security best practices for Gamma integration. Use when securing API keys, implementing access controls, or auditing Gamma security configuration. Trigger with phrases like "gamma security", "gamma API key security", "gamma secure", "gamma credentials", "gamma access control".
Write effective technical documentation including READMEs, API docs, architecture decisions, and inline code documentation.
Build and manage CI/CD pipelines with Azure DevOps. Configure builds, releases, and automate software delivery workflows.
Develop, deploy, and manage Azure Functions for serverless computing. Supports HTTP triggers, timers, queues, and event-driven architectures.
Manage Azure resources effectively using CLI, Portal, Bicep, and ARM templates. Use for provisioning, organizing, and maintaining cloud infrastructure.
| name | seo-optimization |
| description | Optimize web applications for search engines. Implement technical SEO, structured data, and performance optimizations for better rankings. |
| triggers | ["/seo","/search optimize"] |
This skill covers technical SEO implementation to improve search engine visibility, rankings, and organic traffic for web applications.
Use this skill when you need to:
Semantic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descriptive Page Title | Brand Name</title>
<meta name="description" content="Compelling meta description under 160 characters">
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<!-- Navigation -->
</nav>
</header>
<main>
<article>
<h1>Primary Heading</h1>
<h2>Subheading</h2>
<!-- Content -->
</article>
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
URL Structure
✅ https://example.com/products/wireless-headphones
❌ https://example.com/p?id=12345&cat=audio
Heading Hierarchy
<!-- ✅ Correct heading structure -->
<h1>Main Page Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- ❌ Avoid: Skipping levels or multiple H1s -->
<h1>Title</h1>
<h3>Skipped H2</h3>
Essential Meta Tags
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Viewport for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page description (160 chars max) -->
<meta name="description" content="Learn SEO best practices for web development with practical examples and guidelines.">
<!-- Robots directive -->
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/original-page">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="SEO Best Practices">
<meta property="og:description" content="Complete guide to technical SEO">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO Best Practices">
<meta name="twitter:description" content="Complete guide to technical SEO">
<meta name="twitter:image" content="https://example.com/image.jpg">
JSON-LD Implementation
<!-- Article markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEO Best Practices Guide",
"description": "Complete guide to technical SEO implementation",
"author": {
"@type": "Person",
"name": "Jane Developer"
},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20",
"image": "https://example.com/article-image.jpg"
}
</script>
<!-- Organization markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/company",
"https://linkedin.com/company/name"
]
}
</script>
<!-- Product markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Wireless Headphones",
"image": "https://example.com/headphones.jpg",
"description": "High-quality wireless headphones",
"brand": {
"@type": "Brand",
"name": "AudioTech"
},
"offers": {
"@type": "Offer",
"price": "99.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>
Server-Side Rendering (SSR)
// Next.js example with metadata
import Head from 'next/head';
export default function ProductPage({ product }) {
return (
<>
<Head>
<title>{product.name} | Store</title>
<meta name="description" content={product.description} />
<link rel="canonical" href={`https://example.com/products/${product.slug}`} />
</Head>
<ProductDetails product={product} />
</>
);
}
export async function getServerSideProps({ params }) {
const product = await fetchProduct(params.slug);
return { props: { product } };
}
Dynamic Sitemap
// pages/sitemap.xml.js (Next.js)
export async function getServerSideProps({ res }) {
const pages = await fetchAllPages();
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(page => `
<url>
<loc>https://example.com${page.path}</loc>
<lastmod>${page.updatedAt}</lastmod>
<changefreq>${page.changeFreq}</changefreq>
<priority>${page.priority}</priority>
</url>
`).join('')}
</urlset>`;
res.setHeader('Content-Type', 'text/xml');
res.write(sitemap);
res.end();
return { props: {} };
}
Core Web Vitals Impact
Image Optimization
<!-- Responsive images with lazy loading -->
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Descriptive image text"
loading="lazy"
width="800"
height="600"
>
Resource Hints
<!-- Preconnect to required origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">
Robots.txt
User-agent: *
Allow: /
# Disallow admin and private areas
Disallow: /admin/
Disallow: /private/
Disallow: /api/
# Allow specific file types
Allow: /*.js$
Allow: /*.css$
# Sitemap location
Sitemap: https://example.com/sitemap.xml
Internal Linking
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Headphones</li>
</ol>
</nav>
Mobile-First Indexing
Google Search Console
Key Metrics
See the examples/ directory for:
structured-data/ - JSON-LD examples by typemeta-tags/ - Complete meta tag templatesspa-seo/ - Framework-specific SEO implementationsrobots-txt/ - Robots.txt examples