seo-performance

Files (10)

• SKILL.md
• landing-page-ux-guide.md · references/
• lighthouse-targets.md · references/
• meta-tags-template.tsx · references/
• pricing-page-ux-guide.md · references/
• faq.json · references/structured-data-templates/
• organization.json · references/structured-data-templates/
• software-application.json · references/structured-data-templates/
• technical-seo-checklist.md · references/
• web-vitals-rum-setup.md · references/

SKILL.md (first lines)

# SEO & Performance

> Phase 3: SHIP | Sprint 4

## Coverage

- Meta tags + Open Graph per page, Twitter Cards
- Sitemap + robots.txt (auto-generated, Search Console submission)
- Structured data (JSON-LD: Organization, SoftwareApplication, FAQ, Breadcrumbs)
- Canonical URLs (self-referencing, pagination, query params, trailing slashes)
- Google Search Console setup
- Lighthouse targets (90+ all categories)
- Image optimization (WebP/AVIF, lazy loading, responsive srcset)
- Bundle optimization (code splitting, tree shaking, dynamic imports)
- Caching strategy (Cache-Control, ETag, service worker, CDN rules)
- Landing page copy framework
- Onboarding flow design (first-value <2 minutes)
- Help center structure, changelog, content strategy template

---

## Checklist Items

### Meta Tags + Open Graph

<!-- beginner -->
**Add meta tags to every page** — Meta tags tell search engines and social media what your page is about. Without them, Google shows random text snippets and shared links look broken on Twitter/LinkedIn. Every page needs a unique `<title>` (50-60 characters), `<meta description>` (150-160 characters), and Open Graph tags (`og:title`, `og:description`, `og:image`). Twitter Cards (`twitter:card`, `twitter:title`, `twitter:image`) control how links appear on Twitter. Create a reusable component so you never forget a tag.
> Time: ~1 hour
> Template: See `references/meta-tags-template.tsx`

<!-- intermediate -->
**Meta tags + OG + Twitter Cards** — Unique title (50-60 chars), description (150-160 chars), og:title, og:description, og:image (1200x630), og:type, og:url per page. Twitter Cards (summary_large_image). Canonical URL on every page. Use Next.js `generateMetadata` or equivalent framework helper. Validate with Facebook Sharing Debugger and Twitter Card Validator.
> ~1 hour | `references/meta-tags-template.tsx`

<!-- senior -->
**Meta/OG/Twitter/canonical** — Per-page via `generateMetadata` or framework equivalent. og:image 1200x630, summary_large_image. Validate with FB Debugger + Twitter Validator.
> `references/meta-tags-template.tsx`

---

### Sitemap + robots.txt

<!-- beginner -->
**Generate a sitemap and robots.txt** — A sitemap is an XML file that lists every page on your site so Google can find and crawl them all. Without it, Google might miss pages — especially new ones. `robots.txt` tells search engines which pages to crawl and which to skip (like admin panels or API routes). Most frameworks can auto-generate both. After generating, submit your sitemap to Google Search Console so Google starts indexing immediately.
> Time: ~30 min
> Reference: See `references/technical-seo-checklist.md`

<!-- intermediate -->
**Sitemap + robots.txt** — Auto-generate sitemap.xml (Next.js `app/sitemap.ts`, Nuxt `@nuxtjs/sitemap`, Astro `@astrojs/sitemap`). Include lastmod, changefreq, priority. robots.txt: allow all public pages, disallow /api/*, /admin/*, /_next/*. Submit sitemap URL in Search Console. Validate with `curl https://yourdomain.com/sitemap.xml`.
> ~30 min | `references/technical-seo-checklist.md`

<!-- senior -->
**Sitemap + robots.txt** — Framework auto-generation, lastmod from git/CMS, disallow private routes, Search Console submission. Sitemap index for >50K URLs.
> `references/technical-seo-checklist.md`

---

### Structured Data (JSON-LD)

<!-- beginner -->
**Add structured data to your pages** — Structured data is a way to tell Google exactly what your content is: "this is an organization," "this is a FAQ," "this is a software product." Google uses it to show rich results — star ratings, FAQ dropdowns, breadcrumb trails, and more. You add it as a JSON-LD `<script>` tag in your HTML. Start with Organization (on every page), then add SoftwareApplication (for your product page), FAQ (for help/pricing pages), and BreadcrumbList (for navigation).
> Time: ~45 min
> Templates: See `references/structured-data-templates/`

<!-- intermediate -->
**Structured data (JSON-LD)** — Organization schema on layout (name, url, logo, sameAs for social profiles). SoftwareApplication on product/pricing pages (offers, aggregateRating). FAQPage on help/pricing (question + acceptedAnswer pairs). BreadcrumbList for navigation hierarchy. Validate with Google Rich Results Test and Schema Markup Validator. Embed via `<script type="application/ld+json">`.
> ~45 min | `references/structured-data-templates/`

<!-- senior -->
**Structured data** — Organization (layout), SoftwareApplication (product), FAQPage (help/pricing), BreadcrumbList (all). Validate with Rich Results Test. Consider HowTo, Article for blog.
> `references/structured-data-templates/`

---

### Canonical URLs

<!-- beginner -->
**Set canonical URLs on every page** — A canonical URL tells search engines which version of a page is the "real" one. Without it, Google might see `yoursite.com/pricing`, `yoursite.com/pricing/`, and `yoursite.com/pricing?ref=twitter` as three different pages, splitting your SEO value. Add a `<link rel="canonical" href="...">` tag on every page pointing to the clean, preferred URL. Rules: always self-referencing, strip query params, pick one trailing-slash convention and stick with it, handle pagination (`?page=2` gets its own canonical).
> Time: ~20 min
> Reference: See `references/technical-seo-checklist.md`

<!-- intermediate -->
**Canonical URLs** — Self-referencing canonical on every page. Consistent trailing-slash policy (enforce via middleware redirect). Strip tracking query params (utm_*, ref, fbclid) from canonical. Paginated content: each page gets its own canonical (no rel=prev/next since Google deprecated it). Cross-domain canonicals for syndicated content. Set via `<link rel="canonical">` or HTTP `Link` header.
> ~20 min | `references/technical-seo-checklist.md`

<!-- senior -->
**Canonicals** — Self-referencing, consistent trailing slash (middleware redirect), strip tracking params, per-page pagination canonical, cross-domain for syndication.
> `references/technical-seo-checklist.md`

---

### Google Search Console Setup

<!-- beginner -->
**Set up Google Search Console** — Search Console is Google's free tool that shows you how your site appears in search results: which queries bring traffic, which pages are indexed, and any errors Google found while crawling. Verify your domain (DNS TXT record is the most reliable method), submit your sitemap, and check back in a few days to see your first data. Fix any errors in the Coverage report (404s, redirect issues, noindex pages that should be indexed).
> Time: ~20 min
> Reference: See `references/technical-seo-checklist.md`

<!-- intermediate -->
**Google Search Console** — Verify via DNS TXT record (domain-level verification covers all subdomains). Submit sitemap.xml. Monitor: Coverage report (fix errors/warnings), Performance report (impressions, clicks, CTR, position), Core Web Vitals report, Mobile Usability. Set up email alerts for critical issues. Link to Google Analytics for combined data.
> ~20 min | `references/technical-seo-checklist.md`

<!-- senior -->
**Search Console** — DNS verification, sitemap submission, monitor Coverage + CWV + Performance. Link to GA4. API access for automated reporting.
> `references/technical-seo-checklist.md`

---

### Lighthouse Targets (90+ All Categories)

<!-- beginner -->
**Hit 90+ Lighthouse scores in all categories** — Lighthouse is Google's built-in audit tool (open Chrome DevTools > Lighthouse tab). It scores your site from 0-100 in four categories: Performance, Accessibility, Best Practices, and SEO. Aim for 90+ in all four before launch. The most common issues: large images (use WebP, add width/height), missing alt text, no HTTPS, missing meta description, render-blocking CSS/JS. Run Lighthouse in Incognito mode for accurate results (extensions can skew scores).
> Time: ~2-4 hours to fix issues
> Reference: See `references/lighthouse-targets.md`

<!-- intermediate -->
**Lighthouse 90+ all categories** — Performance: LCP <2.5s, CLS <0.1, INP <200ms. Optimize critical rendering path, preload LCP image, inline critical CSS, defer non-critical JS. Accessibility: semantic HTML, ARIA labels, color contrast 4.5:1, keyboard navigation. Best Practices: HTTPS, no mixed content, no deprecated APIs, CSP headers. SEO: valid meta tags, crawlable links, mobile viewport, structured data. Run in CI with Lighthouse CI to catch regressions.
> ~2-4 hours | `references/lighthouse-targets.md`

From harmansidhudev/shipwise, MIT.

More from harmansidhudev/shipwise