Technical SEO cho SPA và Next.js: metadata, sitemap và structured data

SEO cho SPA từng là nỗi ác mộng — Googlebot crawl được nhưng Bingbot và các crawler khác thường bỏ sót JavaScript-rendered content. Next.js với SSR/SSG giải quyết vấn đề cơ bản này, nhưng còn nhiều chi tiết technical cần chú ý.

Metadata API trong Next.js App Router

Next.js Metadata API cho phép export metadata object hoặc generateMetadata function từ page components. Title templates, Open Graph images, Twitter cards — tất cả có thể được dynamic generate per-page. Dùng opengraph-image.tsx để generate OG images programmatically.

canonical URL là quan trọng nhất: luôn set alternates.canonical trong metadata. Thiếu canonical dẫn đến duplicate content penalty khi cùng content accessible qua nhiều URLs (với/không có trailing slash, www/non-www).

Sitemap XML

Next.js hỗ trợ sitemap.ts/sitemap.xml để generate dynamic sitemap. Với blogs hoặc e-commerce, sitemap nên được generate dynamically từ database. Chia sitemap thành multiple files (sitemap index) nếu có >50,000 URLs.

robots.txt

robots.ts trong App Router cho phép generate robots.txt programmatically. Disallow admin routes, API endpoints (trừ khi public data), và staging/preview environments. Đừng block CSS/JS files — Googlebot cần render page đầy đủ.

Structured Data với JSON-LD

JSON-LD schema markup giúp search engines hiểu content của bạn — Article, Product, FAQ, BreadcrumbList, Organization. Inject qua <script type='application/ld+json'> trong page head. Dùng Google's Rich Results Test để validate.

Core Web Vitals và Search Ranking

Google Page Experience update đưa Core Web Vitals vào ranking factor. LCP <2.5s, INP <200ms, CLS <0.1 là ngưỡng 'Good'. Monitor CrUX data trong Google Search Console — đây là field data thực tế, quan trọng hơn Lighthouse scores.