← all conversations

SEO optimization prompt

2025-10-182 turns8,451 charsgpt-5
seo-optimizationnext-jscli-prompts

Summary

The user requested a CLI prompt to systematically optimize SEO for a Next.js blog by setting unique metadata and other improvements.

Messages

write a CLIne prompt which will iteratively and systematically go through my blog next.js website and optimize the SEO for it using some of the following ideas, fill in more details and ensure the CLIne prompt is top notch : Set unique and optimized metadata for each page Use <Head> (Pages Router) or the metadata/generateMetadata API (App Router) to define titles, descriptions, Open Graph tags, canonical URL. Title tags: keep under ~60 characters, descriptive, with relevant keyword(s). Meta descriptions: unique, under ~160 characters, compelling to improve click-through. Use Open Graph / Twitter card tags so when your pages are shared, they look good. Use canonical tags (<link rel="canonical" href="…">) to avoid duplicate content issues. Use semantic HTML and structured data Semantic HTML (e.g., <article>, <header>, <nav>, <footer>) helps crawlers understand page structure and improves accessibility. Add JSON-LD structured data (<script type="application/ld+json">…</script>) to provide context (Article, Product, Event, Organization). Helps with rich snippets. Optimize images and media Use Next.js built-in <Image /> (or next/image) so images are automatically optimized (correct format, size, lazy-loaded). Provide meaningful alt text for images (accessibility + SEO). Minimize large images, use modern formats (WebP when possible). Performance & Core Web Vitals Fast loading helps SEO. Next.js assists with code-splitting, optimizing CSS/JS, and static generation. Optimize fonts (e.g., using next/font) so they don’t cause layout shift or slow loading. Avoid heavy third-party scripts that block rendering; use next/script with proper strategies (afterInteractive, lazyOnload). Sitemaps, robots.txt, crawl control Generate a sitemap (XML) and submit to Google Search Console. Use packages like next-sitemap. Use a robots.txt file (or have the sitemap generator produce one) to tell crawlers which pages they should/shouldn’t crawl. Use noindex or nofollow where appropriate (for pages you don’t want indexed). Clean & meaningful URLs Next.js’s file-based routing makes it straightforward to generate clean URLs (/blog/how-to-nextjs-seo rather than /blog?id=1234). Clean URLs help SEO. Avoid query-parameter heavy URLs when possible for public content. Use lowercase, hyphens instead of underscores, be concise but descriptive. Localization / internationalization (if relevant) If you target multiple languages/regions, use Next.js i18n support so you have proper alternate/hreflang tags. (Not always highlighted in all sources but good practice.) Maintain language-specific metadata, URLs like /fr/…, etc. Avoid duplicate content & pagination pitfalls Use canonical tags, parameter handling, pagination rels (rel="next"/rel="prev") if you have large listings. For duplicate versions (www vs non-www, http vs https), redirect canonical versions. Monitor, measure and iterate Use tools like Google Search Console, Google Analytics, Lighthouse, PageSpeed Insights to monitor indexing, crawl errors, core web vitals, etc. Fix broken links, ensure pages return proper status codes (404 when appropriate, 301 for redirects). Continuously publish high-quality, relevant content — no amount of technical SEO replaces good content. Next.js–specific implementation pointers In Pages Router: use <Head> from next/head inside page components. App Router (Next.js 13+): leverage the new metadata export in layout or page files, or generateMetadata for dynamic data. In For dynamic routes (blog posts, products): fetch data in getStaticProps/getStaticPaths or in generateStaticParams, then set metadata accordingly. Use next-sitemap (or similar) to automatically generate sitemaps based on your route structure. Make sure your deployment supports HTTPS and that canonical URLs use https. Use next/image, next/font, next/script to apply Next.js built-in optimizations rather than manually reinventing. If using server components / React server components (App Router), ensure metadata and structured data are output on the server so crawlers can read it.
Here is a highly polished **CLIne prompt** you can use to automatically and iteratively optimize SEO across your Next.js blog: --- ### ✅ **CLIne Prompt to Optimize SEO for Next.js Blog** You are CLIne, an autonomous coding and refactoring agent. Your task is to **systematically audit and optimize all SEO-related aspects** of my Next.js blog project. This process must be done **iteratively, safely, and with commit-by-commit improvements.** --- #### 🧠 **Core Objectives** 1. **Add and refine SEO metadata for every page and post.** 2. **Improve semantic HTML and add structured data (JSON-LD).** 3. **Optimize images, fonts, performance & Core Web Vitals.** 4. **Generate and configure sitemap and robots.txt.** 5. **Ensure clean URLs, canonical tags, no duplicate content.** 6. **Verify improvements via logs, Lighthouse, and automated checks.** --- ### 📋 **Step-by-Step Instructions** #### **1. Initial Setup & Repository Understanding** - Clone the repository. - Review `/pages` or `/app` directory structure. - Detect if using Pages Router or App Router. - Identify blog post generation (Markdown, MDX, CMS, etc.). - Create a TODO.md or SEO_IMPROVEMENT_LOG.md to track progress. --- #### **2. Metadata System Implementation** **For Pages Router:** - Add/import `<Head>` from `next/head` in all pages. **For App Router (Next.js 13+):** - Use `export const metadata = {}` or `generateMetadata()` for dynamic pages. Each page must include: - Title (≤ 60 characters, keyword-focused). - Meta description (≤ 160 characters, compelling). - Open Graph tags (`og:title`, `og:description`, `og:image`, `og:url`). - Twitter Card tags. - `<link rel="canonical" href="https://example.com/...">`. For dynamic routes (`[slug].tsx`), generate metadata from post content. --- #### **3. Semantic HTML + Structured Data (JSON-LD)** - Replace generic `<div>`s with semantic elements: `<article>`, `<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`. - Add JSON-LD using `<script type="application/ld+json">` for: - Blog posts → `"@type": "Article"` - Homepage → `"@type": "WebSite"` - About page → `"@type": "Person" or "Organization"` - Validate structured data using https://search.google.com/test/rich-results. --- #### **4. Image & Media Optimization** - Replace all `<img>` with Next.js `<Image />`. - Ensure: - `alt` text is descriptive & keyword-relevant. - Images are automatically responsive and lazy-loaded. - Prefer modern formats like WebP. --- #### **5. Performance / Core Web Vitals Enhancements** - Use `next/font` instead of external CSS font imports. - Audit third-party scripts; load via `<Script strategy="lazyOnload" />` or `afterInteractive`. - Remove render-blocking scripts/styles. - Enable Static Site Generation wherever possible. - Use `dynamic(() => import(...), { ssr: false })` where interactive-only. --- #### **6. Sitemaps, robots.txt, and Crawl Control** - Install and configure `next-sitemap`. - Generate `sitemap.xml` and `robots.txt` automatically. - Add canonical base URL in config. - Add `noindex` to pages like `/admin`, `/dashboard`, `/drafts`. --- #### **7. Clean URLs & Avoid Duplicate Content** - Ensure URL structure is lowercase, hyphen-separated (`/blog/my-post-title`). - Add 301 redirect from `http` → `https`, and non-www → www or vice versa. - Use canonical tags for paginated or duplicate content. - If pagination exists, add `rel="next"` and `rel="prev"`. --- #### **8. Monitoring & Validation** - Add commands to run Lighthouse and output reports to `/seo-reports`. - Validate metadata output by crawling the site locally. - Fix 404 errors, broken links, missing alt text, wrong status codes. - Log all SEO changes in SEO_IMPROVEMENT_LOG.md. --- #### **9. Commit Strategy** Each improvement step should: - Be isolated to one logical SEO change. - Use meaningful commit messages: - `"feat(seo): add opengraph + canonical to blog post pages"` - `"perf(core-web-vitals): optimize fonts using next/font"` --- ### ✅ **Final Requirement** When SEO optimization is complete: - Provide a summary of changes. - Provide a checklist of unresolved items. - Do NOT break any existing functionality or styling. - Ensure site builds and deploys successfully. --- Would you like me to **add this directly to a file**, adapt it for a specific repo, or tailor it for Pages vs App Router?
gpt-5