Ett team lägger flera månader på att bygga en modern, snabb Next.js-webbplats med en användarupplevelse helt utan brister. Sidan laddar snabbt, animationerna är mjuka, allt ser bra ut. Sedan öppnas Google Search Console, och man upptäcker att en stor del av sidorna inte ens är indexerade – eller, om de är det, inte syns för ett enda sökord. Det här är ett scenario som utvecklingsteam i React-ekosystemet ofta stöter på: frontend-perfektion och SEO-kompatibilitet är inte samma sak, och det ena följer inte automatiskt med det andra.
Som någon som arbetat med frontend i över tio år kan jag säga att det här problemet oftast inte beror på dålig kod, utan på att renderingsstrategi och SEO-krav inte tänkts igenom tillsammans i projektets startskede. Reacts klientsidesrendering kan, om den inte är rätt konfigurerad, göra att sökmotorernas robotar aldrig ser innehållet alls; Next.js erbjuder verktyg som till stor del löser det här problemet, men de verktygen måste användas rätt.
I det här inlägget går vi igenom vad teknisk SEO för Next.js- och React-baserade webbplatser faktiskt innebär i praktiken, vilka problem som är vanligast och hur den här tjänsten bör utvärderas.
Renderingsstrategi: SSR, SSG, ISR och klientsidesrendering
Next.js största fördel är att man kan välja en egen renderingsstrategi för varje sida – samtidigt är det också den vanligaste felkällan. För sidor som sällan ändras och som är SEO-kritiska (produkt-, tjänste- och blogginlägg) är statisk generering (SSG) eller inkrementell statisk regenerering (ISR) oftast det bästa valet; innehållet genereras vid byggtillfället eller med jämna mellanrum, och sökmotorns robot får ett komplett, färdigrenderat HTML-dokument. För innehåll som ändras ofta eller är personanpassat passar serversidesrendering (SSR) bättre. Sidor som däremot renderas helt på klientsidan – markerade med "use client", där datahämtningen sker i webbläsaren – riskerar att indexeras tomma eller ofullständiga om roboten inte kan tolka innehållet korrekt. Det första steget i tekniskt SEO-arbete är att granska vilken sida som renderas med vilken strategi och säkerställa att SEO-kritiska sidor levereras med rätt strategi.
Metadata API och dynamisk hantering av titel/beskrivning
Next.js funktion generateMetadata och dess Metadata API gör att varje sida dynamiskt kan generera sin egen titel, beskrivning, Open Graph-data och kanonisk information. I många projekt används den här strukturen antingen inte alls, eller så lämnas den med samma statiska värden på alla sidor; i så fall levereras hundratals produkt- eller innehållssidor till sökmotorn med exakt samma titel och beskrivning, vilket är meningslöst för användaren och gör det svårare för sökmotorn att skilja sidorna åt. Ett rätt uppbyggt metadatalager säkerställer att varje sida indexeras med unik information som speglar just den sidans innehåll.
Core Web Vitals: LCP, INP och CLS
Core Web Vitals, Googles signaler för användarupplevelse, kräver extra uppmärksamhet på React-baserade webbplatser. Stora JavaScript-paket, onödigt långa hydreringstider och felaktigt dimensionerade bilder påverkar negativt respektive largest contentful paint (LCP), interaction to next paint (INP) och cumulative layout shift (CLS). Åtgärder som Next.js Image-komponent, kodsplittring via dynamiska imports och att omvandla onödiga klientkomponenter till serverkomponenter gör en konkret skillnad för att förbättra dessa mått. De här optimeringarna påverkar både användarupplevelsen och sökrankningen direkt.
Strukturerad data och sitemap-automatisering
Med filbaserade konfigurationer som sitemap.ts och robots.ts kan sitemap och genomsökningsregler i Next.js genereras automatiskt direkt från koden, datadrivet – det eliminerar behovet av manuella uppdateringar, särskilt på webbplatser där innehåll läggs till ofta. Utöver det ökar tillägg av JSON-LD strukturerad data anpassad till sidans innehåll (scheman för produkter, artiklar, vanliga frågor och liknande) chansen att synas som rich results i sökresultaten. De här två elementen hamnar ofta i skymundan under utvecklingen, trots att de, rätt implementerade, ger stor effekt för relativt liten insats.
Indexeringsgranskning och hydreringsproblem
Att en sida ser rätt ut i webbläsaren betyder inte att sökmotorn ser den på samma sätt. Att med URL-inspektionsverktyget i Search Console kontrollera vad roboten faktiskt ser, undersöka om tredjepartsskript som laddas via next/script fördröjer renderingen, och kontrollera om hydreringsmissmatchningar – att server och klient genererar olika innehåll – lämnar fel i konsolen, är granskningar som bör göras regelbundet. Sådana problem brukar byggas upp tyst, och när de väl upptäcks kan de ha påverkat trafiken i flera månader.
Vad man bör titta på när man utvärderar den här tjänsten
När man letar efter tekniskt SEO-stöd för ett Next.js- eller React-projekt bör man kontrollera hur väl personen eller teamet känner till själva ramverket – renderingsmodeller, App Router-arkitektur, komponentträd – inte bara SEO-verktyg i allmänhet. Till skillnad från en klassisk SEO-granskning kräver det här arbetet ingrepp på kodnivå; det är ett specialistområde där SEO-kunskap och frontend-utveckling möts.
En webbplats byggd på en modern teknikstack kan bli nästintill osynlig för sökmotorer om den inte är korrekt konfigurerad. Att samarbeta med en specialist som verkligen förstår ramverkets inre funktioner och kan bedöma både kod- och rankningssidan samtidigt är det säkraste sättet att omvandla webbplatsens tekniska styrka till synlighet i sökresultaten.