name frontend-checklist description Comprehensive frontend production-readiness and SEO checklist for Next.js websites. Covers technical SEO, meta tags, structured data, accessibility, performance, link verification, and deployment validation. license MIT compatibility opencode metadata {"audience":"engineering","workflow":"quality-assurance"}
Frontend Production-Readiness & SEO Checklist
Use this checklist when reviewing or shipping any page on a Next.js App Router website. Work through each section systematically and mark items as done.
1. SEO — Meta Tags & Metadata
For every page.tsx or layout.tsx that defines a route:
Title — unique, descriptive, 50-60 characters, includes primary keywordDescription — unique, compelling, 150-160 characters, includes call-to-actionKeywords — array of 8-15 relevant terms (branded + non-branded)Canonical URL — set via alternates.canonical, points to https://www. versionOpen Graph tags — og:title, og:description, og:image (1200x630px), og:url, og:type, og:site_nameTwitter/X tags — twitter:card (summary_large_image), twitter:site, twitter:creator, twitter:title, twitter:description, twitter:imageRobots — index, follow for public pages; noindex for admin/internal pages
Next.js App Router pattern
export const metadata : Metadata = {
title : 'Page Title — Brand' ,
description : 'Compelling description under 160 chars.' ,
keywords : ['keyword1' , 'keyword2' , 'keyword3' ],
alternates : { canonical : 'https://www.example.com/page' },
openGraph : {
title : 'Page Title' ,
description : 'OG description' ,
url : 'https://www.example.com/page' ,
siteName : 'Brand' ,
images : [{ url : '/og-image.png' , width : 1200 , height : 630 , alt : 'Description' }],
type : 'website' ,
},
twitter : {
card : 'summary_large_image' ,
site : '@handle' ,
creator : '@handle' ,
title : 'Page Title' ,
description : 'Twitter description' ,
images : ['/og-image.png' ],
},
};
2. SEO — Structured Data (JSON-LD)
Organization schema — on homepage or root layout (name, url, logo, sameAs for social profiles)WebSite schema — on homepage (url, name, potentialAction for search)Product/SoftwareApplication schema — on product pages (name, description, offers, operatingSystem, applicationCategory)Article schema — on blog/use-case pages (headline, datePublished, dateModified, author, image)FAQPage schema — on pages with FAQ sectionsBreadcrumbList schema — on nested pagesNo fake data — never include fake aggregateRating, review counts, or pricing that doesn't existValidate — test at https://validator.schema.org/ and https://search.google.com/test/rich-results
JSON-LD pattern for Next.js
<script
type ="application/ld+json"
dangerouslySetInnerHTML={{ __html : JSON .stringify ({
'@context' : 'https://schema.org' ,
'@type' : 'SoftwareApplication' ,
name : 'Product Name' ,
url : 'https://www.example.com' ,
applicationCategory : 'BrowserApplication' ,
operatingSystem : 'Chrome' ,
description : 'Product description' ,
offers : { '@type' : 'Offer' , price : '0' , priceCurrency : 'USD' },
publisher : { '@type' : 'Organization' , name : 'Company' , url : 'https://www.example.com' },
}) }}
/>
3. SEO — Technical Files
4. Navigation & Header Consistency
5. Links & CTAs
Internal links
External links
CTA verification
Contact information
6. Link Verification Script
Run this to batch-check all URLs:
#!/bin/bash
urls=(
"https://www.example.com"
"https://www.example.com/page1"
"https://www.example.com/page2"
)
echo "Checking ${#urls[@]} URLs..."
failed=0
for u in "${urls[@]} " ; do
http_code=$(curl -o /dev/null -s -w "%{http_code}" -L --max-time 15 -A "Mozilla/5.0" "$u " 2>/dev/null)
if [ "$http_code " -ge 400 ] && [ "$http_code " -ne 403 ]; then
echo "FAIL $http_code $u "
failed=$((failed + 1 ))
else
echo "OK $http_code $u "
fi
done
echo ""
echo "Done. $failed failures out of ${#urls[@]} URLs."
Note: 403 from LinkedIn, OpenAI, npm, and Perplexity is expected (bot blocking). Verify these manually in a browser.
7. Performance & Core Web Vitals
8. Accessibility
9. Build & Deployment Checks
10. Analytics & Tracking
11. Security
Workflow
Before shipping a new page : Run through sections 1-6 for that pageBefore a release : Run through all sections for the entire siteAfter deployment : Run post-deploy verification (section 12)Monthly maintenance : Re-run link verification (section 6) and Lighthouse (section 7)After any layout/component change : Re-run build check (section 9) and spot-check navigation (section 4)
12. Post-Deploy Production Verification
After every production deployment, verify SEO assets and page availability are intact.
Quick smoke test (all pages return 200)
#!/bin/bash
BASE_URL="${1:-https://www.vibebrowser.app} "
pages=(
/
/mcp
/tee
/enterprise
/teams
/aboutus
/agentic-team
/compare
/use-cases
/use-cases/financial-advisor-morningstar-schwab
/use-cases/privacy-first-legal-research
/use-cases/recruiter-linkedin-automation
/privacy
/terms
)
echo "Checking ${#pages[@]} pages on $BASE_URL ..."
failed=0
for page in "${pages[@]} " ; do
code=$(curl -o /dev/null -s -w "%{http_code}" -L --max-time 15 "$BASE_URL$page " )
if [ "$code " -ge 400 ]; then
echo "FAIL $code $page "
failed=$((failed + 1 ))
else
echo "OK $code $page "
fi
done
for file in /sitemap.xml /robots.txt; do
code=$(curl -o /dev/null -s -w "%{http_code}" -L --max-time 10 "$BASE_URL$file " )
echo "SEO $code $file "
done
echo ""
echo "Done. $failed page failures out of ${#pages[@]} ."
SEO spot checks
BASE_URL="https://www.vibebrowser.app"
curl -s "$BASE_URL /" | grep -c 'application/ld+json'
curl -s "$BASE_URL /" | grep -o 'aggregateRating' | wc -l
curl -s "$BASE_URL /privacy" | grep -E 'og:title|og:description|twitter:card' | head -5
curl -s "$BASE_URL /enterprise" | grep 'canonical'
curl -s "$BASE_URL /sitemap.xml" | grep -E '/v2|enterprise\.vibebrowser' | wc -l
curl -s "$BASE_URL /robots.txt" | head -20
What to check after deploy
