Lista SEO dla App Router: metadata i generateMetadata, metadataBase, szablony tytułów, canonical, hreflang, sitemap.ts, robots.ts i obrazy OG, z kodem.
W App Router tagi SEO pochodzą z eksportowanego obiektu metadata lub funkcji generateMetadata w plikach layout i page, które działają tylko w Server Components. Ustaw metadataBase raz w głównym layoucie, dodaj app/sitemap.ts i app/robots.ts, nadaj każdej trasie canonical przez alternates i umieść plik opengraph-image obok stron, które go potrzebują.
Gdzie znajduje się każdy element
App Router ma wbudowane rozwiązania niemal każdego technicznego zadania SEO, ale są one rozrzucone po kilkunastu stronach dokumentacji. Ta lista zbiera je w kolejności, z kodem do skopiowania dla każdego punktu, a pola wyboru pozwalają śledzić postępy we własnym projekcie.
Nie. Obiekt metadata i generateMetadata są obsługiwane tylko w Server Components, bo Next.js musi je rozwiązać na serwerze przed renderowaniem. Zostaw stronę jako Server Component i zaimportuj komponent kliencki dla części interaktywnych.
Obecne wersje Next.js przekazują params i searchParams jako obiekty Promise, więc wewnątrz asynchronicznej generateMetadata piszesz const { slug } = await params. Kod napisany dla starszych wersji, który odczytuje params.slug bezpośrednio, wymaga aktualizacji.
Użyj generateSitemaps w pliku sitemap.ts. Zwraca ona listę identyfikatorów, a domyślny eksport buduje jedną mapę witryny na każdy identyfikator. W Next.js 16 identyfikator przychodzi jako Promise. Pliki są serwowane pod ścieżkami takimi jak /product/sitemap/1.xml.
Nie, chyba że go ustawisz. Dodaj alternates.canonical w metadata każdej trasy, zwykle jako ścieżkę względną, na przykład /blog/my-post, i pozwól metadataBase zamienić ją w pełny URL.
Nie, segment trasy może eksportować jedno albo drugie. Używaj statycznego obiektu, gdy nic nie zależy od żądania ani pobranych danych, a generateMetadata, gdy zależy.
Ustawiane raz w app/layout.tsx. Strony potomne eksportujące title: "Pricing" wyświetlają się jako Pricing | Northside.
Na params czekamy przez await. getPost oznacza Twoją własną funkcję pobierającą dane.
Zwraca jeden wpis na każdy URL. changeFrequency i priority są opcjonalne i Google je ignoruje, więc zostały pominięte.
Generuje robots.txt w katalogu głównym strony.
Rysuje obraz do udostępniania 1200 na 630 z tytułu wpisu za pomocą ImageResponse z next/og. Eksporty alt, size i contentType stają się tagami og.
Obrazy do udostępniania oparte na plikach
metadataBase ustawione w app/layout.tsx
Pozwala, by każde inne pole URL było ścieżką względną
Szablon tytułu i wartość domyślna w głównym layoucie
Daje każdej stronie spójną końcówkę, na przykład | Acme
Unikalny tytuł i opis na każdej stronie
Statyczne metadata lub generateMetadata dla każdej trasy
Canonical na każdej indeksowanej trasie
hreflang dla przetłumaczonych tras
alternates.languages albo w mapie witryny
app/sitemap.ts wymienia tylko działające adresy canonical
Przy dużej liczbie podziel za pomocą generateSitemaps
app/robots.ts z linią sitemap
Blokuje tylko obszary takie jak /admin lub /api
Obraz Open Graph dla kluczowych tras
Plik opengraph-image z tekstem alternatywnym
noindex na ubogich lub prywatnych trasach
robots: { index: false } w metadata tej trasy
Treść renderowana na serwerze
Sprawdź źródło strony, a nie tylko widok w przeglądarce
Gotowe: {count} z {total}
Zacznij za darmo · Bez karty kredytowej