SEO Next.js: randare, metadate, hărți ale site-ului și un blog care se clasează

Test rapid

Ți se potrivește SEO și cum ar trebui să începi?

Întrebarea 1 din 425%

Oamenii caută pe Google ce vinzi?

Da, cred că daNu, este nou sau foarte de nișăNu știu

SEO Next.js ține în primul rând de alegerea corectă pentru fiecare rută: ce se randează pe server, ce se păstrează în cache și ce ajunge în HTML înainte ca vreun script să ruleze. Google explică în elementele de bază ale SEO pentru JavaScript că procesează aplicațiile JavaScript în trei faze (parcurgere, randare, indexare) și că „randarea pe server sau pre-randarea rămâne o idee foarte bună”. Next.js face asta implicit. Ghidul acoperă App Router (Next.js 13 și versiunile ulterioare), cu note pentru vechiul Pages Router.

Este Next.js bun pentru SEO?

Da. O aplicație React simplă, construită cu randare pe client, trimite un fișier HTML aproape gol și construiește pagina în browser; motoarele de căutare trebuie să o randeze, iar multe boturi nu o fac niciodată. Next.js randează React pe server, deci răspunsul HTML conține deja titlurile, textul, linkurile și metadatele. Ghidul nostru despre SEO pentru JavaScript explică de ce contează diferența pentru indexare.

În App Router, componentele sunt Server Components implicit. Chiar și componentele marcate 'use client' sunt pre-randate în HTML pe server. Punctul slab sunt datele: orice este adus în useEffect sau încărcat doar după un clic lipsește din HTML-ul inițial. Adu conținutul în Server Components și păstrează componentele client pentru interactivitate.

SSG, SSR, ISR sau CSR: ce mod de randare să alegi?

Next.js îți permite să combini modurile ruta cu ruta. Alegerea influențează prospețimea, viteza și ce primesc crawlerele.

Documentația Next.js despre ISR enumeră beneficiile: actualizarea conținutului static „fără să reconstruiești întregul site” și gestionarea unui număr mare de pagini fără build-uri lungi. O rută cu export const revalidate = 3600 este regenerată cel mult o dată pe oră; pentru un control exact, apelează revalidatePath sau revalidateTag când se schimbă conținutul. Atenție: ISR nu funcționează cu un export static (output: 'export'). Pentru aplicațiile care trebuie să rămână randate pe client, ghidul nostru despre SEO pentru aplicațiile cu o singură pagină acoperă soluțiile de ocolire.

Cum setezi titlurile, descrierile și etichetele canonical cu Metadata API?

Metadata API înlocuiește next/head în App Router. Conform documentației Next.js despre metadate, exporți un obiect static de metadate dintr-un layout sau o pagină, sau o funcție generateMetadata când valorile depind de date, iar Next.js generează etichetele head. Ambele sunt acceptate doar în Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Cinci reguli care previn majoritatea problemelor:

• Setează metadataBase în layout-ul rădăcină (domeniul tău de producție), ca etichetele canonical relative și adresele Open Graph să devină absolute.
• Folosește un șablon de titlu în layout-ul rădăcină, de exemplu '%s | Brand', ca fiecare pagină să aibă un titlu unic, cu brandul o singură dată.
• Dă fiecărei pagini indexabile o etichetă canonical care indică spre ea însăși prin alternates.canonical; asta protejează împotriva duplicatelor create de parametrii din adresă și de slash-ul final. Intrarea noastră din glosar despre eticheta canonical explică regulile.
• Scrie o descriere pentru fiecare pagină, generată din conținutul din generateMetadata, niciodată o descriere implicită pentru tot site-ul.
• Adaugă imagini Open Graph cu un fișier opengraph-image în dosarul rutei și verifică rezultatul cu un instrument de previzualizare Open Graph.

Pe paginile dinamice, Next.js transmite metadatele în flux după primii octeți, ca să accelereze randarea. Documentația precizează că streaming-ul este dezactivat pentru boții care așteaptă metadatele în head, detectați după user agent (Bingbot, Twitterbot și Slackbot sunt printre exemple), iar opțiunea htmlLimitedBots personalizează lista. Dacă ție îți pasă de un crawler care nu este acoperit, adaugă-l. În Pages Router, echivalentul este componenta Head din next/head, cu un atribut key ca să eviți etichetele duplicate.

Cum generezi sitemap.xml și robots.txt în Next.js?

Ambele sunt fișiere speciale din dosarul app. Un fișier sitemap.ts care exportă o funcție ce returnează adrese devine /sitemap.xml; un fișier robots.ts devine /robots.txt. Referința pentru sitemap notează că fișierul este pus în cache implicit și că limita Google este de 50.000 de adrese pe sitemap; peste această limită, generateSitemaps îl împarte în mai multe fișiere.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Include doar adrese canonical, indexabile, care returnează 200, și folosește data reală a actualizării în lastModified. Sitemap-ul acceptă și alternates.languages pentru site-urile multilingve. În robots.ts, indică sitemap-ul și decide ce boturi AI au voie să parcurgă site-ul; articolul nostru despre robots.txt pentru crawlerele AI le enumeră. Mai multe despre format găsești în intrarea noastră din glosar despre harta XML a site-ului.

Ce detalii tehnice strică cel mai des SEO-ul Next.js?

Toate aceste probleme reduc parcurgibilitatea: un crawler trebuie să poată descoperi fiecare adresă prin linkuri și să primească un cod de stare curat.

Cum adaugi date structurate în Next.js?

Documentația Next.js recomandă randarea JSON-LD ca etichetă script de tip application/ld+json direct în componenta paginii sau a layout-ului, construită din aceleași date ca pagina, iar caracterul < din JSON-ul serializat să fie scăpat pentru a preveni injectarea. Fiind randat pe server, este văzut în HTML-ul brut atât de Google, cât și de crawlerele AI. Folosește Article (sau BlogPosting) pentru articole, Organization în layout-ul rădăcină, BreadcrumbList pentru paginile adânci și Product pentru comerț electronic. Un generator de schema îți dă un punct de plecare valid, apoi validează pagina cu Rich Results Test de la Google.

Cum faci un site Next.js suficient de rapid pentru Core Web Vitals?

Next.js include componentele care tratează cauzele obișnuite ale unor Core Web Vitals slabe:

• next/image: redimensionează imaginile, servește formate moderne, încarcă leneș implicit și cere dimensiuni, ceea ce previne deplasările de layout. Marchează imaginea principală din zona vizibilă ca prioritară, ca să nu fie încărcată leneș (de obicei este elementul Largest Contentful Paint).
• next/font: găzduiește fonturile local și evită deplasarea provocată de schimbările târzii de font.
• next/script: încarcă scripturile terțe cu o strategie (afterInteractive, lazyOnload) în loc să blocheze pagina.
• Mai puțin JavaScript în client: fiecare limită 'use client' adaugă cod de descărcat și de hidratat, ceea ce apasă pe Interaction to Next Paint de pe mobil.

Măsoară datele de teren, nu doar scorul de laborator: ghidul nostru despre PageSpeed Insights arată cum citești ambele.

Cum rulezi un blog pe Next.js care se clasează?

Un blog Next.js ia de obicei una din trei forme: fișiere MDX sau Markdown în depozit (simplu, dar fiecare articol cere un commit și un deploy), un CMS headless (Sanity, Contentful, Strapi, Payload) adus în Server Components sau un webhook de publicare care primește articole dintr-un instrument extern. În toate cele trei cazuri, modelul SEO este același: o rută dinamică app/blog/[slug] cu generateStaticParams, generateMetadata, ISR, sitemap-ul alimentat din aceeași sursă și o pagină index care leagă fiecare articol.

Modelul cu webhook scoate publicarea din ciclul de deploy. Un Route Handler primește articolul, îl salvează, apoi reîmprospătează paginile afectate:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Cum te ajută SEO Next.js să fii citat de asistenții AI?

Randarea pe server este prima condiție pentru GEO (optimizarea pentru motoarele generative). Analiza Vercel din decembrie 2024, Ascensiunea crawlerului AI, a constatat că „niciunul dintre principalii crawleri AI nu randează în prezent JavaScript”, numind GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot și PerplexityBot, și a numărat 569 de milioane de accesări GPTBot și 370 de milioane de accesări Claude pe rețeaua sa, într-o singură lună. O pagină Next.js care pre-randează textul, titlurile și JSON-LD este citibilă de toți; o pagină randată pe client nu este.

A doua condiție este conținutul care merită citat: articole care răspund la o întrebare pe secțiune, cu surse, cifre și definiții clare, publicate regulat. Asta este partea pe care Sorank, produsul nostru, o automatizează. Sorank este un software SEO și GEO în regim autopilot: găsește cuvintele tale cheie, iar generatorul de articole pentru blog scrie 20, 60 sau 120 de articole pe lună, cu surse, linkuri interne și imagini. Pe un site Next.js, se conectează prin webhook-ul personalizat descris pe pagina de instalare: Route Handler-ul tău primește fiecare articol, îl salvează și reîmprospătează blogul. Urmărirea mențiunilor AI verifică apoi în fiecare lună dacă ChatGPT, Claude și Gemini îți citează brandul.

Pe scurt: pre-randează fiecare pagină pe care vrei să fie găsită, definește metadatele pe server și alimentează sitemap-ul din aceeași sursă ca și conținutul. Next.js îți oferă uneltele; clasările și citările AI vin din ce publici cu ele. Ca să alimentezi un blog Next.js cu articole, vezi planurile Sorank, de la 49 de dolari pe lună, cu o perioadă de probă gratuită de 3 zile.