Overview
Implements comprehensive technical SEO: essential meta tags (title, description, canonical), Open Graph + Twitter Cards, JSON-LD structured data for rich results (Article, Product, BreadcrumbList, FAQ, etc.), sitemap.xml generation, robots.txt rules, and a prioritized Core Web Vitals (LCP, CLS, INP) optimization checklist with concrete code changes.
When to Use This Skill
- Launching a new site or page that needs to rank in search.
- Auditing or improving an existing site's SEO.
- The user mentions "SEO", "meta tags", "sitemap", "structured data", "rich results", or "Core Web Vitals".
Prerequisites
- Access to the
<head> or Next.js metadata API / generateMetadata.
- Ability to generate or edit
sitemap.xml and robots.txt.
- Google Search Console or similar for verification (recommended).
- Performance measurement tools (Lighthouse, web-vitals).
Steps
Base meta tags (every page):
<title>, <meta name="description">, canonical, viewport, charset.- Robots meta (index, follow).
Social cards:
- Open Graph (
og:title, og:description, og:image, og:type, og:url).
- Twitter Card (
twitter:card, twitter:title, etc.).
- Image size recommendations (1200x630).
Structured data (JSON-LD):
- Choose the right schema type for the page content.
- Provide complete, valid examples for Article, Product, Breadcrumb, FAQPage, HowTo, etc.
- Use
<script type="application/ld+json">.
Next.js Metadata API (App Router):
- Static and dynamic
metadata export.
generateMetadata function for dynamic pages.- OpenGraph and Twitter objects.
Sitemap & robots:
- Generate
app/sitemap.ts that returns XML.
app/robots.ts.- Include all important URLs, lastmod, priority, changefreq.
Core Web Vitals optimization:
- LCP: image optimization (
next/image), preload critical resources, font display swap.
- CLS: reserve space for images/ads, avoid inserting content above the fold.
- INP (Interaction to Next Paint): defer non-critical JS, use
loading="lazy", efficient event handlers.
- Provide a checklist with exact code diffs.
Output:
- Complete
<head> example or Next.js metadata object.
- JSON-LD snippets for common page types.
sitemap.ts and robots.ts examples.- CWV fix list tailored to the page.
Examples
Full Next.js generateMetadata example for a blog post with Article + Breadcrumb structured data, sitemap code, and a CWV improvement patch are included.
Edge Cases & Error Handling
- Dynamic pages: Always use
generateMetadata and fetch data server-side.
- Duplicate content: Strong canonical strategy.
- Images for social: Provide multiple sizes or use a service like Vercel OG.
- JavaScript-heavy sites: Ensure critical content is in HTML (SSR or SSG).
Verification
- View source — all meta tags present and correct.
- Run Google Rich Results Test on structured data.
- Submit sitemap in Google Search Console.
- Run Lighthouse (SEO + Performance categories) — target 90+.
- Use
web-vitals library or CrUX dashboard to measure real-user LCP/CLS/INP.
- Success: Pages are indexable, rich results appear in search, Core Web Vitals pass.
References
1---2name: seo-optimizer3description: Overview4---56## Overview78Implements comprehensive technical SEO: essential meta tags (title, description, canonical), Open Graph + Twitter Cards, JSON-LD structured data for rich results (Article, Product, BreadcrumbList, FAQ, etc.), sitemap.xml generation, robots.txt rules, and a prioritized Core Web Vitals (LCP, CLS, INP) optimization checklist with concrete code changes.910## When to Use This Skill1112- Launching a new site or page that needs to rank in search.13- Auditing or improving an existing site's SEO.14- The user mentions "SEO", "meta tags", "sitemap", "structured data", "rich results", or "Core Web Vitals".1516## Prerequisites1718- Access to the `<head>` or Next.js `metadata` API / `generateMetadata`.19- Ability to generate or edit `sitemap.xml` and `robots.txt`.20- Google Search Console or similar for verification (recommended).21- Performance measurement tools (Lighthouse, web-vitals).2223## Steps24251. **Base meta tags** (every page):26 - `<title>`, `<meta name="description">`, canonical, viewport, charset.27 - Robots meta (index, follow).28292. **Social cards**:30 - Open Graph (`og:title`, `og:description`, `og:image`, `og:type`, `og:url`).31 - Twitter Card (`twitter:card`, `twitter:title`, etc.).32 - Image size recommendations (1200x630).33343. **Structured data (JSON-LD)**:35 - Choose the right schema type for the page content.36 - Provide complete, valid examples for Article, Product, Breadcrumb, FAQPage, HowTo, etc.37 - Use `<script type="application/ld+json">`.38394. **Next.js Metadata API** (App Router):40 - Static and dynamic `metadata` export.41 - `generateMetadata` function for dynamic pages.42 - OpenGraph and Twitter objects.43445. **Sitemap & robots**:45 - Generate `app/sitemap.ts` that returns XML.46 - `app/robots.ts`.47 - Include all important URLs, lastmod, priority, changefreq.48496. **Core Web Vitals optimization**:50 - LCP: image optimization (`next/image`), preload critical resources, font display swap.51 - CLS: reserve space for images/ads, avoid inserting content above the fold.52 - INP (Interaction to Next Paint): defer non-critical JS, use `loading="lazy"`, efficient event handlers.53 - Provide a checklist with exact code diffs.54557. **Output**:56 - Complete `<head>` example or Next.js metadata object.57 - JSON-LD snippets for common page types.58 - `sitemap.ts` and `robots.ts` examples.59 - CWV fix list tailored to the page.6061## Examples6263Full Next.js `generateMetadata` example for a blog post with Article + Breadcrumb structured data, sitemap code, and a CWV improvement patch are included.6465## Edge Cases & Error Handling6667- **Dynamic pages**: Always use `generateMetadata` and fetch data server-side.68- **Duplicate content**: Strong canonical strategy.69- **Images for social**: Provide multiple sizes or use a service like Vercel OG.70- **JavaScript-heavy sites**: Ensure critical content is in HTML (SSR or SSG).7172## Verification73741. View source — all meta tags present and correct.752. Run [Google Rich Results Test](https://search.google.com/test/rich-results) on structured data.763. Submit sitemap in Google Search Console.774. Run Lighthouse (SEO + Performance categories) — target 90+.785. Use `web-vitals` library or CrUX dashboard to measure real-user LCP/CLS/INP.796. Success: Pages are indexable, rich results appear in search, Core Web Vitals pass.8081## References8283- [Google SEO Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)84- [Schema.org](https://schema.org/)85- [Next.js Metadata API](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)86- [Core Web Vitals](https://web.dev/vitals/)87- [robots.txt and sitemap best practices](https://developers.google.com/search/docs/crawling-indexing/robots/intro)
Nikoxkx