Next.js SEO:render strategy, metadata, speed.

Yes — Next.js is one of the best frameworks for SEO because it supports server-side rendering, static generation, and ISR, which ensure search engines receive fully rendered HTML. The App Router's `generateMetadata` API and `opengraph-image.tsx` convention make structured metadata straightforward. The main SEO risks are configuration mistakes: wrong rendering strategy per route, missing `priority` on LCP images, misplaced client boundaries, and incomplete `generateMetadata` implementations. AuditMySite detects and fixes all of these.

The `priority` prop on `<Image>` components adds `fetchpriority='high'` to the img element and injects a `<link rel='preload'>` in the page head. This tells the browser to fetch the image before it reaches it in the HTML parse order — typically reducing LCP by 0.4–1.1s on image-heavy pages. Any image that is visible above the fold on load and is the page's largest visual element should have `priority={true}`. Without it, Next.js defers the image fetch to when the browser reaches the img tag in the DOM.

Use SSG for pages that change rarely (about, legal, marketing pages with < weekly updates). Use ISR (`revalidate` in seconds) for pages that update periodically (blog posts, product pages, pricing). Use SSR (`dynamic = 'force-dynamic'`) for pages that must serve real-time data (dashboards, personalised content). The SEO mistake is using SSG on volatile pages — a pricing page that changes daily but is built once a week will serve stale metadata to Google. AuditMySite detects page-level content volatility and flags rendering strategy mismatches.

'use client' marks a component and all its imports as client-side JavaScript. If placed on a layout or wrapper component, it pulls every child into the client bundle — even children that are pure HTML. This inflates Total Blocking Time (TBT) and Largest Contentful Paint (LCP). Correct App Router practice: push 'use client' as far down the component tree as possible, ideally only to leaf components that use React hooks or browser APIs. AuditMySite identifies which client boundaries are responsible for bundle inflation.

Yes. AuditMySite validates the rendered HTML metadata for every crawled page — including canonical URL correctness, OpenGraph image validity (checks that the og:image URL returns a 200 response), Twitter card presence, robots meta tag accuracy, and hreflang on multilingual routes. It also checks for common App Router metadata mistakes: `alternates.canonical` omitted in `generateMetadata`, `openGraph.images` pointing to a non-existent file, and `noindex` accidentally applied via `robots: { index: false }` on public pages.

AuditMySite infers rendering strategy from response headers and HTML patterns: `Cache-Control: s-maxage` indicates ISR or SSG; `Cache-Control: no-store` or `x-nextjs-cache: MISS` indicates SSR; static HTML without cache headers on repeated fetches indicates SSG. It also detects Vercel deployment markers and Next.js version from response headers. The rendering strategy is reported per page, not per site, so you can see exactly which routes are using which strategy.