SEO w Next.js: renderowanie, metadane, mapy witryny i blog, który się pozycjonuje

SEO w Next.js polega przede wszystkim na właściwym wyborze dla każdej ścieżki: co renderuje się na serwerze, co trafia do pamięci podręcznej i co znajduje się w HTML, zanim uruchomi się jakikolwiek skrypt. Google wyjaśnia w podstawach SEO dla JavaScriptu, że przetwarza aplikacje JavaScript w trzech fazach (skanowanie, renderowanie, indeksowanie) i że renderowanie po stronie serwera lub prerendering „to nadal świetny pomysł”. Next.js robi to domyślnie. Ten przewodnik dotyczy App Router (Next.js 13 i nowsze), z uwagami o starszym Pages Router.

Czy Next.js jest dobry dla SEO?

Tak. Klasyczna aplikacja React renderowana po stronie klienta wysyła niemal pusty plik HTML i buduje stronę w przeglądarce; wyszukiwarki muszą ją wyrenderować, a wiele botów nigdy tego nie robi. Next.js renderuje React na serwerze, więc odpowiedź HTML zawiera już nagłówki, tekst, linki i metadane. Nasz przewodnik po SEO dla JavaScriptu wyjaśnia, dlaczego ta różnica ma znaczenie dla indeksowania.

W App Router komponenty są domyślnie Server Components. Nawet komponenty oznaczone 'use client' są prerenderowane do HTML na serwerze. Słabym punktem są dane: wszystko, co pobierasz w useEffect albo dopiero po kliknięciu, nie trafia do początkowego HTML. Pobieraj treść w Server Components, a komponenty klienckie zostaw do interakcji.

SSG, SSR, ISR czy CSR: jaki tryb renderowania wybrać?

Next.js pozwala łączyć tryby ścieżka po ścieżce. Wybór wpływa na aktualność, szybkość i to, co otrzymują roboty.

Dokumentacja Next.js o ISR wymienia korzyści: aktualizowanie treści statycznych „bez przebudowy całej witryny” i obsługę dużej liczby stron bez długich buildów. Ścieżka z export const revalidate = 3600 jest generowana ponownie najwyżej raz na godzinę; dla dokładnej kontroli wywołuj revalidatePath lub revalidateTag, gdy zmienia się treść. ISR nie działa ze statycznym eksportem (output: 'export'). Dla aplikacji, które muszą pozostać renderowane po stronie klienta, nasz przewodnik po SEO aplikacji jednostronicowych opisuje rozwiązania.

Jak ustawić tytuły, opisy i adresy kanoniczne w Metadata API?

Metadata API zastępuje next/head w App Router. Według dokumentacji Next.js o metadanych eksportujesz statyczny obiekt metadata z layoutu lub strony albo funkcję generateMetadata, gdy wartości zależą od danych, a Next.js generuje tagi w head. Oba sposoby działają tylko w 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] },
  }
}

Pięć zasad, które zapobiegają większości problemów:

• Ustaw metadataBase w głównym layoucie (Twoja domena produkcyjna), aby względne adresy kanoniczne i adresy Open Graph stały się bezwzględne.
• Użyj szablonu tytułu w głównym layoucie, np. '%s | Marka', aby każda strona miała unikalny tytuł z marką wymienioną raz.
• Nadaj każdej indeksowalnej stronie adres kanoniczny wskazujący na nią samą przez alternates.canonical; chroni przed duplikatami z parametrów URL i ukośników na końcu. Nasze hasło o tagu kanonicznym zbiera zasady.
• Pisz opis dla każdej strony, generowany z treści w generateMetadata, nigdy jedną domyślną wartość dla całej witryny.
• Dodaj obrazy Open Graph plikiem opengraph-image w folderze ścieżki i sprawdź wynik w narzędziu do podglądu Open Graph.

Na stronach dynamicznych Next.js przesyła metadane strumieniowo po pierwszych bajtach, aby przyspieszyć renderowanie. Dokumentacja podaje, że strumieniowanie jest wyłączone dla botów oczekujących metadanych w head, rozpoznawanych po user agencie (wśród przykładów są Bingbot, Twitterbot i Slackbot), a opcja htmlLimitedBots pozwala dostosować listę. Jeśli brakuje na niej ważnego dla Ciebie crawlera, dodaj go. W Pages Router odpowiednikiem jest komponent Head z next/head, z atrybutem key, który zapobiega zdublowanym tagom.

Jak wygenerować sitemap.xml i robots.txt w Next.js?

Oba to specjalne pliki w folderze app. Plik sitemap.ts eksportujący funkcję zwracającą adresy URL staje się /sitemap.xml; plik robots.ts staje się /robots.txt. Dokumentacja mapy witryny zaznacza, że plik jest domyślnie buforowany, a limit Google wynosi 50 000 adresów URL na mapę witryny; powyżej generateSitemaps dzieli ją na kilka plików.

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,
  }))
}

Umieszczaj tylko kanoniczne, indeksowalne adresy zwracające 200, z prawdziwą datą aktualizacji w lastModified. Mapa witryny przyjmuje też alternates.languages dla witryn wielojęzycznych. W robots.ts wskaż mapę witryny i zdecyduj, które boty AI mogą skanować witrynę; nasz artykuł o robots.txt dla crawlerów AI je wymienia. Więcej o formacie w naszym haśle o mapie witryny XML.

Jakie szczegóły techniczne najczęściej psują SEO witryny w Next.js?

Wszystkie te problemy obniżają dostępność dla robotów: crawler musi móc odkryć każdy adres przez linki i otrzymać czysty kod statusu.

Jak dodać dane strukturalne w Next.js?

Dokumentacja Next.js zaleca renderowanie JSON-LD jako tagu script typu application/ld+json bezpośrednio w komponencie strony lub layoutu, na podstawie tych samych danych co strona, z zamianą znaku < w zserializowanym JSON, aby zapobiec wstrzyknięciu kodu. Ponieważ jest renderowany na serwerze, Google i crawlery AI widzą go w surowym HTML. Używaj Article (lub BlogPosting) dla wpisów, Organization w głównym layoucie, BreadcrumbList dla głębokich stron i Product w e-commerce. Generator schema da Ci poprawny blok startowy, a potem sprawdź stronę w teście wyników z elementami rozszerzonymi Google.

Jak sprawić, by witryna w Next.js była wystarczająco szybka dla Core Web Vitals?

Next.js zawiera komponenty, które usuwają typowe przyczyny słabych Core Web Vitals:

• next/image: skaluje obrazy, serwuje nowoczesne formaty, domyślnie ładuje leniwie i wymaga wymiarów, co zapobiega przesunięciom układu. Oznacz główny obraz widoczny bez przewijania jako priorytetowy, aby nie ładował się leniwie (zwykle to element Largest Contentful Paint).
• next/font: hostuje czcionki na Twojej domenie i zapobiega przesunięciom spowodowanym późną podmianą czcionki.
• next/script: ładuje skrypty zewnętrzne według strategii (afterInteractive, lazyOnload) zamiast blokować stronę.
• Mniej JavaScriptu po stronie klienta: każda granica 'use client' dodaje kod do pobrania i hydracji, co obciąża Interaction to Next Paint na urządzeniach mobilnych.

Mierz dane terenowe, a nie tylko wynik laboratoryjny: nasz przewodnik po PageSpeed Insights pokazuje, jak czytać jedno i drugie.

Jak prowadzić blog w Next.js, który się pozycjonuje?

Blog w Next.js ma zwykle jedną z trzech form: pliki MDX lub Markdown w repozytorium (proste, ale każdy wpis wymaga commita i wdrożenia), headless CMS (Sanity, Contentful, Strapi, Payload) odpytywany w Server Components albo webhook publikacji, który przyjmuje artykuły z zewnętrznego narzędzia. We wszystkich trzech przypadkach wzorzec SEO jest ten sam: dynamiczna ścieżka app/blog/[slug] z generateStaticParams, generateMetadata, ISR, mapa witryny zasilana z tego samego źródła i strona z listą, która linkuje do każdego wpisu.

Webhook oddziela publikację od cyklu wdrożeń. Route Handler odbiera artykuł, zapisuje go, a następnie rewaliduje odpowiednie strony:

// 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 })
}

Jak SEO w Next.js pomaga zdobywać cytowania od asystentów AI?

Renderowanie na serwerze to pierwszy warunek GEO (optymalizacji pod silniki generatywne). Analiza Vercel z grudnia 2024 roku, The rise of the AI crawler, wykazała, że „żaden z głównych crawlerów AI nie renderuje obecnie JavaScriptu”, wymieniając GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot i PerplexityBot, oraz naliczyła w ciągu miesiąca 569 milionów pobrań przez GPTBot i 370 milionów przez Claude w swojej sieci. Strona w Next.js, która prerenderuje tekst, nagłówki i JSON-LD, jest czytelna dla nich wszystkich; strona renderowana po stronie klienta nie.

Drugi warunek to treść warta cytowania: artykuły, które w każdej sekcji odpowiadają na jedno pytanie, ze źródłami, liczbami i jasnymi definicjami, publikowane regularnie. Tę część automatyzuje Sorank, nasz produkt. Sorank to oprogramowanie SEO i GEO działające w trybie autopilot: znajduje Twoje słowa kluczowe, a Generator artykułów blogowych pisze 20, 60 lub 120 artykułów miesięcznie ze źródłami, linkami wewnętrznymi i obrazami. W witrynie Next.js łączy się przez niestandardowy webhook opisany na stronie instalacji: Twój Route Handler odbiera każdy artykuł, zapisuje go i rewaliduje blog. Śledzenie wzmianek w AI sprawdza potem co tydzień, czy ChatGPT, Claude i Gemini cytują Twoją markę.

W skrócie: prerenderuj każdą stronę, która ma być znaleziona, definiuj metadane na serwerze i zasilaj mapę witryny z tego samego źródła co treść. Next.js daje narzędzia; pozycje i cytowania w AI wynikają z tego, co dzięki nim publikujesz. Aby stale zasilać blog w Next.js artykułami, zobacz plany Sorank, od 49 € miesięcznie z 3-dniowym bezpłatnym okresem próbnym.