# New Page Checklist Ensure a newly created (or just-added) webpage meets all technical, SEO, and AI-discoverability requirements. ## Arguments `$ARGUMENTS` should be the full URL of the new page (e.g. `https://www.example.com/new-page`). If no URL is provided, ask the user for one before proceeding. ## Steps Work through each item below in order. Check it off as you go. Do not skip any step — if something cannot be applied (e.g. no sitemap file exists), explain why and move on. --- ### 1. Detect project type Look at the project files to determine if this is: - **Next.js** — has `next.config.mjs` or `next.config.js` and an `app/` or `pages/` directory - **Static HTML** — standalone `.html` file(s) with no framework This affects how you handle the sitemap, schema, and canonical steps below. --- ### 2. Nav menu and footer Every page must use the same navigation links as the homepage and the same standard footer. **Nav — Next.js (`.tsx`):** Add this `NAV_LINKS` array to the page file, then pass it to `

`: ```tsx const NAV_LINKS = [ { label: "Tools", href: "/#tools" }, { label: "Courses", href: "/#courses" }, { label: "Newsletter", href: "https://seoriddler.com", external: true }, { label: "Webinars", href: "/#webinars" }, { label: "Free Resources", href: "#", dropdown: [ { label: "New Web Page Claude Skill", href: "/free-resources/new-web-page-claude-skill" }, { label: "SEO SWOT Template", href: "/free-resources/seo-swot-template" }, ], }, { label: "Data Studies", href: "#", dropdown: [ { label: "Q1 2026 Job Market Report", href: "/seo-jobs-na-q1-2026-report.html" }, ], }, { label: "About", href: "/about" }, ] ``` Note: on sub-pages (not the homepage), section anchors use the `/#` prefix (e.g. `/#tools`, not `#tools`). **Footer — Next.js:** Add this footer as the last element before the root closing ``: ```tsx ``` **Nav and footer — Static HTML:** Copy the full `

` block (including CSS, hamburger button, mobile nav, and dropdown JS) from `public/seo-jobs-na-q1-2026-report.html`. For the footer, add: ```html ``` Ensure the footer CSS includes `display: flex`, `justify-content: space-between`, a `.footer-links { display: flex; gap: 24px; }` rule, and collapses to a column on mobile. --- ### 3. Canonical URL **Next.js page (`.tsx` / `.ts`):** Ensure the page's `export const metadata` includes: ```ts alternates: { canonical: "", } ``` **Static HTML page:** Ensure the `` contains: ```html ``` --- ### 4. Meta title & description **Next.js:** Ensure `export const metadata` has a `title` and `description` field. **Static HTML:** Ensure the `` has: ```html ... ``` If either is missing or uses a placeholder, write appropriate values based on the page content. --- ### 5. H1 title Every page must have exactly one `

` tag with a descriptive title that clearly communicates the page's topic. Next.js: Check the page's JSX for a single `

` element. The text must be specific and descriptive — not a generic label like "Home" or "Page". Static HTML: Check the `` for a single `

` tag. Avoid multiple `

` tags on the same page. If the H1 is missing, add one. If it is vague or generic, rewrite it to accurately describe the page content. --- ### 6. JSON-LD schema markup Choose the most appropriate schema type for the page: - Homepage / personal site → `Person` - About page → `AboutPage` - Article / blog post → `Article` - Data report / study → `Dataset` or `Article` - Tool / product → `SoftwareApplication` - Course → `Course` - FAQ → `FAQPage` Next.js: Add a ` ``` If it is missing, add it as the last item before ``. --- ### 11. Mobile responsiveness check Read the page's CSS or Tailwind classes and check for common mobile issues: - Do multi-column grid layouts collapse to single column on small screens? (`@media (max-width: 768px)` or responsive Tailwind prefixes like `md:`) - Are there any `width` or `height` values hardcoded in pixels that could overflow on mobile? - For Chart.js charts: are canvases wrapped in a sized container with `maintainAspectRatio: false`? - Is the page padding/margin appropriate on small screens? Report any issues found. Fix them if they are straightforward; flag them for the user if complex. --- ### 12. Run and test locally Start the dev server if it is not already running: Next.js: ```bash npm run dev ``` Server starts at `http://localhost:3000`. Derive the local URL from the page's path (e.g. `https://www.example.com/about` → `http://localhost:3000/about`). Static HTML: ```bash npx serve public ``` Or open the file directly in the browser if no server is needed. Then verify the following by fetching or opening the page: - Page loads without errors (check terminal output for build errors) - Canonical URL is present in the rendered HTML (`curl http://localhost:3000/page | grep canonical`) - JSON-LD schema block is present (`curl ... | grep "application/ld+json"`) - Vercel Analytics script / component is present - Markdown embed block is present (`curl ... | grep "text/markdown"`) - Page renders correctly on mobile — use browser DevTools device toolbar (375px width) and check for obvious layout breakage Report what was confirmed and flag anything that looked wrong. --- ### 13. Summary report After completing all steps, output a short checklist showing what was done, what was already in place, and anything skipped or flagged: ``` ✅ Nav menu — matches homepage ✅ Footer — standard (© Sara Taher + social links) ✅ Canonical URL — set ✅ Meta title & description — set ✅ H1 title — present and descriptive ✅ JSON-LD schema — added (Article) ✅ Sitemap — added ✅ llm.txt — updated ✅ Markdown embed — added ✅ Vercel Analytics — present ⚠️ Mobile check — found: [describe issue or "no issues"] ✅ Local test — page loads, all tags confirmed present ``` ## Rules - Never modify files outside the page itself, its sitemap entry, and llm.txt. - Never push to git — leave that to the user. - If a step is already correctly implemented, mark it done and move on without making unnecessary changes. - Keep schema markup accurate — do not invent facts about the page.