Technické SEO v Next.js: Metadata API, structured data a Core Web Vitals

Next.js Metadata API představuje moderní přístup k SEO optimalizaci. Namísto manuálních meta tagů definujete metadata programově v každém route pomocí export const metadata objektu nebo async generateMetadata funkce. API je plně typované, což eliminuje chyby v meta tazích. Podporuje title templates pro konzistentní titulky napříč stránkami, Open Graph pro social media sharing, Twitter Cards, alternativní jazyky a viewport configuration. Pro dynamické stránky generateMetadata přijímá params a může fetchovat data z databáze nebo API.

Structured data (Schema.org) pomáhají vyhledávačům lépe pochopit obsah stránky. Next.js umožňuje snadnou implementaci JSON-LD skriptů přímo v komponentách. Pro e-commerce použijte Product, Offer a AggregateRating schemas. Pro články implementujte Article, BlogPosting s author a datePublished. Breadcrumb schema zlepšuje navigaci ve výsledcích vyhledávání. LocalBusiness schema je klíčové pro místní SEO. Next.js Server Components umožňují generovat JSON-LD dynamicky na základě dat z CMS nebo databáze, což zajišťuje aktuálnost structured data.

Next.js podporuje dynamické generování sitemap.xml pomocí sitemap.ts nebo sitemap.xml.ts route handleru. Funkce vrací array URL objektů s priority, changeFrequency a lastModified. Pro velké weby můžete generovat sitemap indexy a rozdělovat URLs. Robots.txt můžete definovat pomocí robots.ts s pravidly pro různé user agenty. Pro správné crawlování implementujte také canonical URLs pomocí <link rel="canonical"> v metadata API. Next.js automaticky renderuje sitemap na serveru, což zajišťuje že crawleři vždy vidí aktuální seznam stránek.

Core Web Vitals dnes stojí hlavně na LCP, INP a CLS. Next.js Image Optimization s next/image automaticky optimalizuje Largest Contentful Paint (LCP) pomocí lazy loading, responsive images a moderních formátů (WebP, AVIF). Pro Interaction to Next Paint (INP) je klíčové snížit množství JavaScriptu, zkrátit dlouhé úlohy a přesunout těžkou logiku na server. Cumulative Layout Shift (CLS) eliminujete pomocí width a height atributů na obrázcích a rezervací prostoru pro dynamický obsah. Font optimization s next/font zajišťuje stabilnější načítání s automatickým subsettingem.

Pro multilingual weby Next.js podporuje i18n routing s hreflang tags. V Metadata API použijte alternates.languages pro definici jazykových variant. Next.js automaticky generuje správné hreflang links pro každou stránku. URL struktura může být subdomain (cs.example.com), subdirectory (/cs/) nebo domain (.cz). Pro SEO je subdirectory často preferovaná. Implementujte language switcher s proper redirecty a nastavte x-default hreflang pro fallback. Content v každém jazyce by měl být unique - vyhledávače penalizují machine-translated duplicity.

Pro měření SEO výkonu integrujte Google Search Console API, sledujte indexaci, Core Web Vitals a search queries. Next.js podporuje custom analytics trackers pro měření RUM (Real User Monitoring) metrik. Využijte Vercel Analytics nebo Google Analytics 4 pro tracking user behavior. Pro technical SEO monitoring implementujte uptime monitoring, broken links detection a regular lighthouse CI/CD checks. Web Vitals library od Google umožňuje reportovat LCP, INP, CLS, FCP a TTFB do vlastního analytics systému. Spojením performance dat s search rankings můžete optimalizovat stránky s největším SEO potenciálem.