SEO w Nuxt
Nuxt domyślnie renderuje po stronie serwera, ale to ustawienie per-route, a nie gwarancja — pełny HTML dla botów tylko na trasach, które to zachowują. Tryby renderowania, useSeoMeta(), zestaw narzędzi @nuxtjs/seo, uwagi o hydracji i Nitro, Core Web Vitals oraz błędy, które po cichu kosztują.
1 sygnał dowodowy na tej stronie
- Powiązane działające narzędzieCore Web Vitals History & Competitor Comparison
Nuxt domyślnie renderuje strony po stronie serwera, więc trasa, która zachowuje ten domyślny tryb, daje botom kompletny dokument HTML zamiast pustej skorupy, jaką wysyła zwykła aplikacja Vue SPA — ale to ustawienie per-route: routeRules lub globalne ssr:false może przełączyć dowolną trasę na CSR, więc zweryfikuj faktyczną trasę, a nie zakładaj na podstawie nazwy frameworka. Podstawową decyzją jest tryb renderowania dla każdej trasy — SSR (domyślnie), SSG przez nuxt generate lub hybrydowe reguły tras — ponieważ meta tagi, schema i sitemapy pojawiają się po tym. Użyj useSeoMeta() dla meta, traktuj pakiet @nuxtjs/seo Harlana Wiltona jako opcjonalny zestaw narzędzi firm trzecich (nie rdzeń Nuxt) dla robots/sitemap/OG/schema/canonical, nigdy nie sięgaj po dynamiczne renderowanie (Google je wycofał), zweryfikuj hydrację/payload i zachowanie presetów wdrożeniowych/pamięci podręcznej Nitro niezależnie od HTML serwera i pamiętaj, że kontrakty renderowania botów AI różnią się w zależności od dostawcy — SSR/SSG umieszcza treść w surowym HTML i maksymalizuje zasięg.
TL;DR — Nuxt to framework zbudowany na Vue, który jest dobry dla SEO z jednego głównego powodu: na trasie, która zachowuje ustawienie domyślne, buduje strony na serwerze, więc wyszukiwarki otrzymują gotowy plik HTML zamiast pustego, który musiałyby wypełnić same. To ustawienie per-trasa, a nie gwarancja dla całej witryny —
routeRuleslub globalnessr: falsemoże zamienić dowolną trasę z powrotem w pustą skorupę w stylu czystego Vue. Sprawdź faktyczną trasę, a nie tylko nazwę projektu. Najważniejszy wybór, jakiego dokonasz, to jak każda trasa jest renderowana; wszystko inne (meta tagi, sitemapy) jest drugorzędne.
Dlaczego Nuxt jest dobry dla SEO — na trasach, które zachowują ustawienie domyślne
Vue, sam w sobie, buduje aplikację jednostronicową: serwer wysyła prawie pustą powłokę HTML, a JavaScript wypełnia treść, gdy uruchomi się w przeglądarce. To utrudnia indeksowanie, ponieważ strona wygląda na pustą, dopóki JavaScript się nie wykona.
Nuxt to “meta-framework” Vue — pełniejszy zestaw narzędzi zbudowany wokół Vue — a jego
domyślne ustawienie rozwiązuje ten problem. Nuxt renderuje Twoje strony najpierw na serwerze
(renderowanie po stronie serwera, czyli SSR), więc gdy Google lub odwiedzający poprosi o stronę
na trasie, która nie została wyłączona z SSR, otrzyma kompletny HTML od
razu. Dowód potwierdzający to twierdzenie Nuxt universal rendering returns server-rendered HTML to the browser by default. Zakres: Nuxt default universal rendering. Poziom ufności: wysoki · Zweryfikowano: Nuxt: Rendering modes Bez czekania na JavaScript. To jest najważniejszy
powód, dla którego witryna Nuxt może być łatwiejsza do zaindeksowania niż zwykła aplikacja Vue —
ale to wynik per-trasa, a nie coś, co gwarantuje nazwa frameworka.
Trasa z ssr: false lub taka, która polega na <ClientOnly> dla swojej głównej
treści, traci tę przewagę i ma ten sam problem pustej powłoki, co zwykły
Vue.
Najważniejsza decyzja: renderowanie, per trasa
Gdy ktoś prosi o konkretną stronę, gdzie budowane jest jej HTML? To pytanie na poziomie
routeRules, a nie całego projektu — aplikacja Nuxt może mieszać tryby
między trasami. Nuxt daje kilka opcji:
- Renderowanie po stronie serwera (SSR) — ustawienie domyślne. Serwer buduje pełną stronę przy każdym żądaniu. Świetne dla SEO.
- Generowanie statyczne (SSG) — uruchom
nuxt generate, a Nuxt zbuduje wszystkie Twoje strony jako zwykłe pliki HTML z wyprzedzeniem. Również świetne dla SEO i idealne dla blogów i dokumentacji, które nie zmieniają się co minutę. - Tryb SPA — strona jest budowana w przeglądarce, jak zwykły Vue. Unikaj tego dla czegokolwiek, co ma być znalezione w wyszukiwarce.
Dobra wiadomość jest taka, że ustawienia domyślne są już skierowane we właściwą stronę. W większości musisz tylko unikać wyłączania ich.
Dodawanie tytułów i meta tagów
W Nuxt ustawiasz tytuł strony i meta opis za pomocą wbudowanej funkcji o nazwie
useSeoMeta(). Dowód potwierdzający to twierdzenie Nuxt provides useSeoMeta for defining SEO and social metadata. Zakres: Current Nuxt composable. Poziom ufności: wysoki · Zweryfikowano: Nuxt: useSeoMeta Umieszczasz ją na stronie i przekazujesz tytuł, opis oraz
obrazek do udostępniania społecznościowego:
useSeoMeta({
title: 'My Page Title',
description: 'A concise, page-specific summary with the key information first',
})To jest nowoczesny, zalecany sposób. (Istnieje starsza funkcja o nazwie useHead(),
która nadal działa i jest używana do innych rzeczy w <head> strony, ale do
meta tagów SEO sięgaj po useSeoMeta().) Google nie ma stałego limitu znaków dla meta opisu;
fragmenty zależą od zapytania i są przycinane do rozmiaru urządzenia, więc podglądaj
ważne strony w ich zamierzonym języku i skrypcie, zamiast kodować do limitu.
Opcjonalny dodatek: moduły SEO Nuxt
Rdzeń Nuxt nie generuje robots.txt, mapy witryny XML, obrazków do udostępniania społecznościowego,
danych strukturalnych ani kanonicznych URL-i — to zadania dla osobnych, opcjonalnych
pakietów, a nie coś, co nuxt.config.ts daje domyślnie. Deweloper o imieniu
Harlan Wilton utrzymuje darmowy, społecznościowy zestaw tych pakietów — instalowany jako
@nuxtjs/seo — który obejmuje je wszystkie naraz. To narzędzie firm trzecich, nie
część samego Nuxt, więc jego instalacja nie sprawia automatycznie, że jakiekolwiek z tych
wyników jest poprawne; nadal musisz potwierdzić, że sitemap, reguły robots i schema, które
generuje, odpowiadają temu, czego faktycznie chcesz.
Rzecz, którą ludzie rozumieją źle
Ludzie zakładają, że “Vue/Nuxt nie może być w Google”. To było częściowo prawdą dla czystego Vue lat temu — nie jest to prawdą dla Nuxt z jego renderowaniem po stronie serwera. Prawdziwe błędy to takie rzeczy jak przypadkowe wyłączenie SSR off, lub blokowanie plików JavaScript, tak że Google nie może zbudować strony.
Chcesz głębszą wersję — pełne menu trybów renderowania, szczegółowy ekosystem modułów, Core Web Vitals i typowe błędy z poprawkami? Przełącz się na zakładkę Zaawansowane.
TL;DR — Domyślnym ustawieniem Nuxt jest renderowanie po stronie serwera, więc trasa, która zachowuje to ustawienie domyślne, otrzymuje kompletny DOM zamiast pustej skorupy, którą wysyła zwykła aplikacja Vue SPA — ale to jest wynik per trasa:
ssr: falselub nadpisanierouteRulesmoże zamienić dowolną trasę na CSR lub hybrydową, więc przetestuj faktyczną trasę, a nie nazwę projektu. Strategia renderowania jest fundamentalną decyzją — SSR (domyślnie), SSG (nuxt generate) lub hybrydowerouteRules— ponieważ meta, schema i sitemapy pojawiają się po niej. UżyjuseSeoMeta()dla tagów meta (useHead()dla reszty head, warianty tylko serwerowe, gdy nie potrzebujesz reaktywności) i traktuj pakiet@nuxtjs/seoHarlana Wiltona jako opcjonalny zestaw narzędzi firm trzecich dla robots/sitemap/OG/schema/canonical — nie część rdzenia Nuxt i nie dowód, że jego wynik jest poprawny, dopóki tego nie sprawdzisz. Nigdy nie używaj dynamicznego renderowania (Google je wycofał). Renderowanie przez AI-crawler różni się w zależności od dostawcy — SSR/SSG maksymalizuje pokrycie surowego HTML. Poza początkowym HTML, zweryfikuj hydratację/payload, presety wdrożeniowe Nitro i cache, oraz bezpośrednio status HTTP niezależnie — sam HTML serwera nie dowodzi żadnego z tych. Zwykłe zasady JS-SEO nadal obowiązują: prawdziwe linki<a href>, nie blokuj JS/CSS, obserwuj wyrenderowany vs. surowy HTML.
Nuxt jest odpowiedzią Vue na problem SPA
Vue, samo w sobie, wysyła aplikację jednostronicową: skorupę HTML plus JavaScript, który buduje DOM w przeglądarce. Nuxt to meta-framework na bazie Vue (działający na silniku serwera Nitro w Nuxt 3, z Nuxt 4 w 2025 roku), a jego cały powód istnienia — z punktu widzenia SEO — polega na tym, że domyślnie renderuje po stronie serwera. Każda strona dociera jako w pełni uformowany dokument HTML, co jest dokładnie tym, co Googlebot chce przeczytać bez konieczności wykonywania JavaScriptu najpierw. Czyste SEO Vue to osobny temat z własnymi trybami awarii; tutaj zakładam, że wybrałeś Nuxt właśnie po to, aby nie musieć walczyć z problemem SPA.
To ten sam punkt, który podnoszę ogólnie o JavaScript: każda poprawna konfiguracja SSR, renderowania statycznego lub prerenderowania może być odpowiednia dla wyszukiwarek; dotyczy to między innymi Gatsby, Next i Nuxt. Domyślne ustawienia Nuxt są skierowane we właściwą stronę. Większość problemów SEO w Nuxt to ludzie wyłączający te ustawienia domyślne lub nakładający błędy na nie.
Strategia renderowania jest fundamentem — decydowana per trasa, nie per projekt
Przed tagami meta, przed schema, przed sitemapami, pytanie, które decyduje o wszystkim,
to jak HTML jest produkowany dla tej konkretnej trasy? Nuxt
dokumentuje uniwersalne (serwerowe) renderowanie jako domyślne dla całej aplikacji, ale to domyślne
nie jest gwarancją na poziomie trasy: globalne ssr: false przełącza całą aplikację na
renderowanie klienckie, a routeRules może przypisać inny tryb do dowolnego wzorca
URL. “To jest aplikacja Nuxt” nie mówi ci nic o tym, jak jedna konkretna strona
się renderuje — musisz sprawdzić trasę. Nuxt daje ci pięć strategii:
| Tryb | Jak to ustawiasz | Wpływ na SEO | Najlepsze dla |
|---|---|---|---|
| Uniwersalny / SSR | Domyślnie (ssr: true) | Doskonały — pełny HTML przy każdym żądaniu | Dynamiczne, spersonalizowane treści |
| Statyczny / SSG | nuxt generate | Doskonały — HTML zbudowany w czasie wdrożenia | Blogi, dokumentacja, marketing |
| Hybrydowy | routeRules per trasa | Doskonały — mieszanka per trasa | Duże strony z mieszaną treścią |
| SPA / CSR | ssr: false | Słaby dla indeksowanych treści | Panele, panele administracyjne |
| Po stronie edge | Cel wdrożenia | Doskonały — niski TTFB | Globalna wydajność |
Oficjalna dokumentacja Nuxt wyjaśnia bezpośrednio, dlaczego renderowanie po stronie klienta jest złym wyborem dla treści: indeksowanie i aktualizowanie takich materiałów zajmuje więcej czasu, podczas gdy przy renderowaniu uniwersalnym roboty mogą bezpośrednio indeksować zawartość strony. Dowód potwierdzający to twierdzenie Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Zakres: Nuxt rendering; no indexing guarantee. Poziom ufności: wysoki · Zweryfikowano: Nuxt: Rendering modes
(Dokumentacja renderowania Nuxt.) CSR
(ssr: false) jest przeznaczone do systemów back-office, pulpitów nawigacyjnych i gier — a nie do czegokolwiek, co chcesz indeksować.
Renderowanie hybrydowe to najlepsze rozwiązanie dla dużych witryn. Reguły tras w
nuxt.config.ts pozwalają ustawić tryb renderowania i buforowania dla każdego wzorca URL:
routeRules: {
'/blog/**': { prerender: true }, // SSG for the blog
'/product/**': { swr: 3600 }, // ISR-style: regenerate hourly
'/admin/**': { ssr: false }, // SPA for the admin area
'/checkout/**': { ssr: true }, // always-fresh SSR
}swr (stale-while-revalidate) i isr (incremental static regeneration) generują
stronę statycznie, a następnie odświeżają ją w tle — idealne rozwiązanie dla e-commerce z dużą liczbą stron lub serwisów informacyjnych, gdzie pełna przebudowa przy każdej zmianie nie jest praktyczna. Nuxt
Islands (<NuxtIsland>) renderują komponenty bez wysyłania JavaScriptu po stronie klienta,
zmniejszając koszt hydratacji i pomagając wskaźnikowi INP — najczęściej problematycznej metryce Core Web Vitals w aplikacjach Nuxt.
Jak zweryfikować to, co faktycznie wdrożyłeś: View Source pokazuje surowy HTML, który wysłał serwer; jeśli Twoja treść tam jest, renderujesz po stronie serwera. Panel Elements w DevTools pokazuje wyrenderowany DOM. A narzędzie URL Inspection w GSC pokazuje, co Google faktycznie pobrał i wyrenderował — źródło prawdy. Nie ufaj stwierdzeniu “w mojej przeglądarce wygląda dobrze”.
Jak Googlebot obsługuje aplikację Nuxt
Google przetwarza każdą aplikację JavaScript w trzech fazach — crawl, render, index — a problemem jest czas: renderowanie odbywa się w kolejce, a nie natychmiast. Jak ująłem to w moim przewodniku po JavaScript SEO, renderer jest cierpliwy — “there is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (tłumaczenie) „Nie ma ustalonego limitu czasu dla renderera… Jest naprawdę cierpliwy i nie powinieneś się martwić.” Ale cierpliwość to nie to samo co szybkość w przypadku świeżych treści. Jeśli dostarczasz stronę renderowaną po stronie klienta, Twoja treść nie istnieje dla Google, dopóki nie nastąpi ta fala renderowania; SSR i SSG eliminują tę lukę, ponieważ HTML jest kompletny przy pierwszym pobraniu.
Dwie kolejne rzeczy mają znaczenie na dużą skalę. Renderowanie JavaScriptu jest kosztowne — z mojej prelekcji JavaScript SEO (Ungagged) z 2019 roku, koszty indeksowania wzrastają o około 20×, gdy Google musi renderować
(szacunkowo, ale rząd wielkości pozostaje aktualny). Google stosuje najbardziej
restrykcyjną dyrektywę spośród surowego i wyrenderowanego HTML — więc noindex wstrzyknięty przez
JavaScript wygra z index w surowym HTML i odwrotnie. Kanoniczny adres URL wstrzyknięty
za pomocą JavaScriptu jest respektowany tylko wtedy, gdy w surowym HTML nie ma już kanonicznego adresu URL.
Trzymaj sygnały robots i canonical w HTML renderowanym po stronie serwera, co
Nuxt robi za Ciebie, gdy włączone jest SSR.
Rzeczywistość botów AI
To nowość roku 2026. Boty AI — GPTBot, ClaudeBot, PerplexityBot i inne — zazwyczaj w ogóle nie wykonują JavaScriptu. Indeksują surowy HTML i nic więcej. Więc strona Nuxt renderowana po stronie klienta jest praktycznie niewidoczna dla silników odpowiedzi AI. SSR lub SSG to tutaj nie tylko lepsze rozwiązanie dla Google; to warunek wstępny dla optymalizacji pod kątem silników odpowiedzi również. Jeśli chcesz, aby Twoje treści były cytowane przez ChatGPT, Perplexity lub Claude, muszą być w HTML przy pierwszym pobraniu.
Poza początkowym HTML: payload, hydratacja i kody statusu
Uzyskanie HTML serwera z Twoją treścią jest konieczne, ale niewystarczające — kilka rzeczy może nadal pójść źle po tej pierwszej odpowiedzi, a “sprawdziłem View Source” ich nie obejmuje:
- Ładunek i hydratacja. Renderowanie uniwersalne wysyła HTML oraz serializowany ładunek danych, który klient wykorzystuje do hydratacji — dołączenia nasłuchiwaczy zdarzeń i przejęcia tam, gdzie serwer zakończył — bez ponownego pobierania. To, że HTML serwera wygląda dobrze, nie dowodzi, że hydratacja się powiodła, że nawigacja po stronie klienta odtwarza tę samą treść ani że ładunek nie jest nieaktualny. Jeśli strona działa dobrze przy pierwszym ładowaniu, ale psuje się po zmianie trasy po stronie klienta, to problem z hydratacją/ładunkiem, a nie z trybem renderowania.
<ClientOnly>i treść tylko dla przeglądarki. Opakowanie czegoś w<ClientOnly>— często stosowane w przypadku widżetów zależnych od API przeglądarki — oznacza, że element jest nieobecny w odpowiedzi serwera nawet na trasie w innym przypadku uniwersalnej. Jeśli Twoja główna treść, kluczowy link lub tagi meta znajdą się wewnątrz granicy tylko dla klienta, roboty indeksujące i boty AI, które czytają tylko surowy HTML, je pominą, niezależnie od ustawienia trybu renderowania. Sprawdź faktyczną odpowiedź, a nie tylko konfigurację trybu renderowania.- Kody statusu i przekierowania nie są samopotwierdzające. Strona błędu
Nuxt renderowana w przeglądarce lub przekierowanie sterowane przez
navigateTo()/composable nie dowodzi samo w sobie, jaki kod statusu HTTP wysłała bezpośrednia odpowiedź serwera. Wytyczne Google są jednoznaczne, że znaczące kody statusu mają znaczenie dla indeksowania i crawlowania — potwierdź faktyczny nagłówek za pomocącurl -I, a nie to, co wyświetla strona błędu renderowana po stronie klienta.
Nic z tego nie jest argumentem przeciwko renderowaniu uniwersalnemu — to przypomnienie, że „HTML jest renderowany po stronie serwera” to pierwsza kontrola, a nie ostatnia.
Nitro, presety wdrożeniowe i granice pamięci podręcznej
Wyjście serwera Nuxt jest budowane przez Nitro, a Nitro kompiluje się inaczej w zależności od presetów wdrożeniowych, które wybierzesz (serwer Node, Cloudflare, Vercel, Netlify, statyczny i inne). Ma to znaczenie dla SEO, ponieważ presety i adaptery mogą różnić się dostępnymi API środowiska uruchomieniowego, zachowaniem pamięci podręcznej, obsługą strumieniowania, wdrożeniem regionalnym i dostępem do systemu plików — reguła trasy lub handler serwera, który działa pod jednym presetem, nie ma gwarancji, że będzie działać identycznie pod innym. Dwie konsekwencje, które warto przetestować jawnie, a nie zakładać:
- Klucze pamięci podręcznej i unieważnianie są specyficzne dla trasy, a nie
automatyczne. Reguły tras
swriisrbuforują i regenerują wyjście, ale błędny klucz pamięci podręcznej, brak unieważnienia lub nagłówek buforowania ustawiony przez platformę wdrożeniową mogą serwować nieaktualny, spersonalizowany lub niespójny HTML robotom indeksującym. Sprawdź faktyczny wiek odpowiedzi i wszelkie nagłówkiCache-Control/Agena żywym adresie URL, a nie tylko konfiguracjęrouteRules. - Parytet produkcyjny nie jest gwarantowany przez zachowanie środowiska przejściowego. Trasa renderująca się poprawnie w lokalnym środowisku deweloperskim lub we wdrożeniu podglądowym nie potwierdza, że preset produkcyjny daje to samo wyjście — trasy serwera, przekierowania i obsługa błędów żyją w warstwie serwera Nitro, a ta warstwa najprawdopodobniej różni się w zależności od celu. Przetestuj produkcyjny adres URL bezpośrednio po każdej zmianie wdrożeniowej, tak samo jak weryfikowałbyś tryb renderowania.
Tagi meta: useSeoMeta() i useHead()
Zarządzanie nagłówkami w Nuxt działa na Unhead i daje dwa composable do różnych zadań.
useSeoMeta() to narzędzie, po które warto sięgnąć do tagów meta SEO i
społecznościowych. To płaskie, bezpieczne typowo API z typowanymi
parametrami. Dowód potwierdzający to twierdzenie useSeoMeta is a typed Nuxt API for SEO and social meta tags. Zakres: Current Nuxt composable. Poziom ufności: wysoki · Zweryfikowano: Nuxt: useSeoMeta Pomaga uniknąć klasycznego błędu Open Graph
polegającego na użyciu name, gdy potrzebne było property:
useSeoMeta({
title: 'My Page Title',
ogTitle: 'My Page Title',
description: 'Concise page-specific description with the key information first',
ogDescription: 'Concise social description tailored to this page',
ogImage: 'https://mysite.com/og-image.png', // must be an absolute URL
twitterCard: 'summary_large_image',
})useHead() to ogólne narzędzie do nagłówków dla wszystkiego innego — skryptów,
tagów link, atrybutów body i szablonów tytułów:
useHead({
titleTemplate: '%s · My Site Name',
htmlAttrs: { lang: 'en' },
})Niezawodny wzorzec warstwowy to: statyczne wartości domyślne (charset, viewport, favicon) w
nuxt.config.ts → szablon tytułu dla całej witryny i globalne domyślne ustawienia OG w app.vue →
nadpisania specyficzne dla strony przez useSeoMeta() w komponencie strony. Częstym błędem jest
umieszczenie useSeoMeta() w layoucie zamiast na stronie, co nadpisuje specyficzne tagi strony
tagami ogólnymi. A ponieważ wyszukiwarki czytają początkowy stan, meta SEO
zazwyczaj nie musi być reaktywne — useServerHead() pomija ponowne wykonanie po stronie klienta.
Które API i co faktycznie dowodzi:
| API | Zakres | Reaktywne? | Co dowodzi o wyniku |
|---|---|---|---|
useSeoMeta() | Płaskie, typowane meta SEO/social tylko | Tak (domyślnie) | Ustawia typowane właściwości poprawnie — nie to, że trasa jest unikalna, kanoniczna lub indeksowalna; nadal odpowiadasz za tę logikę |
useHead() | Wszystko w <head> — skrypty, linki, atrybuty, szablon tytułu | Tak (domyślnie) | Ogólna kontrola nad head; to samo zastrzeżenie — użycie API nie jest dowodem poprawnej odpowiedzi serwera |
useServerHead() / wywołania tylko serwerowe | Jak wyżej | Nie — tylko serwer, pomija ponowne wykonanie po stronie klienta | Potwierdza, że tag jest wysyłany raz w HTML serwera; nie potwierdza, że nawigacja po stronie klienta ustawia go ponownie, jeśli na nim polegasz |
Wywołanie jednego z tych composables mówi ci, że API zostało uruchomione — samo w sobie nie mówi,
co faktycznie emituje bezpośrednia odpowiedź serwera lub zmiana trasy po stronie klienta.
Potwierdź to przez View Source lub curl, a nie tylko „wywołałem useSeoMeta()”.
Ekosystem modułów @nuxtjs/seo (Harlan Wilton) — opcjonalny, nie podstawowy
Rdzeń Nuxt nie dostarcza sitemap, robots.txt, generowania obrazów OG ani
Schema.org po wyjęciu z pudełka — to poza prymitywami Nuxt (useHead,
useSeoMeta, reguły tras, tryby renderowania). Społeczność wypełnia tę lukę
@nuxtjs/seo Harlana Wiltona — osobno instalowany, zewnętrzny pakiet
parasolowy (nuxtseo.com, obecnie w wersji v5.x, aktywnie utrzymywany, kierowany do Nuxt
3,16+ i Nuxt 4), który łączy sześć modułów. Jego instalacja daje sitemap,
robots, obrazy OG i generowanie schematu — samo w sobie nie gwarantuje, że
wynik jest poprawny dla twoich tras; zweryfikuj to, co generuje, tak samo, jak
zweryfikowałbyś cokolwiek innego:
| Moduł | Co robi |
|---|---|
@nuxtjs/robots | robots.txt + meta robots + nagłówki X-Robots-Tag |
@nuxtjs/sitemap | Automatyczne sitemapy XML ze stron + dynamicznych tras |
nuxt-og-image | Dynamiczne obrazy OG (szablon Vue → obraz) |
nuxt-schema-org | Dane strukturalne Schema.org JSON-LD |
nuxt-seo-utils | Kanoniczne URL, breadcrumbs, wartości domyślne |
nuxt-link-checker | Wykrywanie zepsutych linków w czasie budowania |
Zainstaluj cały pakiet przez npx nuxt module add seo lub pobierz pojedyncze moduły
(npx nuxt module add sitemap robots). Kilka zachowań, które warto znać:
@nuxtjs/sitemapautomatycznie generuje z katalogupages/plus dynamiczne trasy, dzieli na indeks sitemap automatycznie powyżej 50 000 URL, obsługuje i18n wielojęzyczne sitemapy i ma wbudowane wsparcie IndexNow. Jedna rzecz do zrobienia dobrze: Google ignorujechangefreqipriority; liczy się tylko dokładnylastmod, i to tylko wtedy, gdy treść faktycznie się zmienia.@nuxtjs/robotsgenerujerobots.txt, meta tag robots i nagłówekX-Robots-Tag— a domyślnie blokuje wszystkich crawlerów w środowiskach nieprodukcyjnych, co jest dokładnie pułapką indeksacji stagingowej, która dotyka headless buildów. Daje też reguły per-bot, więc możesz zablokować GPTBot konkretnie, zostawiając wszystkich innych w spokoju (bądź świadomy — zablokuj crawlera AI, a nie będzie cytować ciebie).nuxt-seo-utilsobsługuje kanoniczne URL i, co przydatne, automatycznie usuwa parametry śledzenia (utm_*,fbclid,gclid) z kanonicznych.
nuxt/image i Core Web Vitals
@nuxt/image to moduł obrazów: automatyczny responsywny srcset, nowoczesne formaty
(WebP/AVIF), wbudowana optymalizacja przez dostawców CDN i leniwe ładowanie. Dwie
zasady niosą większość wartości SEO:
- Nigdy nie leniwie ładuj obrazu LCP. Twój obraz hero powinien ładować się eagerly; leniwe ładowanie opóźnia Largest Contentful Paint.
- Zawsze ustaw
widthiheight, aby przeglądarka zarezerwowała miejsce i nie poniosła straty z powodu Cumulative Layout Shift.
<NuxtImg
src="/hero.jpg"
width="1200"
height="630"
alt="Descriptive alt text"
:loading="isHeroImage ? 'eager' : 'lazy'"
format="webp"
/>Cele na 2026 rok, do których należy dążyć (p75): LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1. W aplikacjach Nuxt
INP jest tym, który zwykle cierpi, ponieważ hydratacja powoduje opóźnienie wejścia — dokładnie do tego
służą Nuxt Islands i <NuxtIsland>.
Nuxt Content + SEO
Jeśli używasz @nuxt/content (modułu markdown/MDX), integracja
z @nuxtjs/seo jest prosta, ale ma jedną pułapkę dotyczącą kolejności: załaduj @nuxtjs/seo
przed @nuxt/content w tablicy modułów. Następnie możesz ustawić SEO w frontmatter treści
(title, description, robots, ogImage, schemaOrg) i pobrać je
do swojego szablonu [slug].vue za pomocą useSeoMeta() po pobraniu treści. To
natywna dla Nuxt wersja wzorca headless-CMS i obowiązuje ta sama dyscyplina „przebuduj to, co
zrobił wtyczka”.
Częste błędy SEO w Nuxt
- Używanie trybu aplikacji jednostronicowej (
ssr: false) dla treści, które chcesz indeksować. Najdroższy błąd — i ten, który czyni cię niewidocznym dla robotów modeli generatywnych. - Względne adresy obrazów Open Graph.
ogImagemusi być adresem bezwzględnym, w przeciwnym razie podglądy społecznościowe się psują. useSeoMeta()w layoutcie zamiast na stronie — ogólne tagi nadpisują te specyficzne dla strony.- Nieweryfikowanie wyrenderowanego HTML — źródło strony ≠ DevTools ≠ to, co wyrenderował Google. Użyj narzędzia do sprawdzania adresów URL.
- Blokowanie JS/CSS w
robots.txt— Google nie wyrenderuje z zablokowanych plików. - Pozostawienie stagingowego
noindex/disallow po starcie (lub odwrotnie, zapomnienie, że@nuxtjs/robotsdomyślnie blokuje nie-produkcyjne środowiska i zastanawianie się, dlaczego produkcja działa, a niestandardowe środowisko nie). - Leniwie ładowanie obrazu LCP — obniża LCP.
- Brak
width/heightna obrazach — CLS. changefreq/priorityw sitemapach — Google je ignoruje; liczy się tylkolastmod.- Sięganie po dynamiczne renderowanie. Google zdeprecjonował je jako obejście, a nie rozwiązanie długoterminowe — i służy ono tylko silnikom, dla których je skonfigurujesz, pomijając Bing i każdego bota AI. Z Nuxt nigdy tego nie potrzebujesz: SSR i SSG już dają botom pełny HTML.
llms.txt i AEO
llms.txt to plik tekstowy — kuzyn robots.txt — który pomaga narzędziom AI nawigować po
treści. Moduł nuxt-llms automatycznie generuje /llms.txt i /llms-full.txt
z Nuxt Content. Od końca 2025 roku jego głównymi odbiorcami są serwery MCP i narzędzia do kodowania AI
(Cursor, Claude Code), a nie bezpośrednio ChatGPT czy Perplexity, i jest najbardziej
przydatny dla stron dokumentacji i blogów technicznych — mniej dla e-commerce czy wiadomości.
Warto dodać, jeśli jesteś stroną docs/dev; w przeciwnym razie nie jest to priorytet.
Gdzie to pasuje
SEO w Nuxt to tak naprawdę konkretne zastosowanie JavaScript SEO poprzez własne konwencje Nuxt — i mocno pokrywa się z tematem SEO dla headless CMS, gdy twój frontend Nuxt pobiera dane z headless backendu. Zasady się nie zmieniają; Nuxt po prostu daje dobre domyślne ustawienia i silny ekosystem modułów do ich wdrożenia.
Podsumowanie AI
Skrócona wersja wersji zaawansowanej:
- Nuxt to meta-framework Vue, a jego przewaga SEO to jeden domyślny:
renderowanie po stronie serwera. Trasa, która zachowuje ten domyślny, dostarcza pełny HTML,
a nie pustą skorupę, którą dostarcza zwykła aplikacja Vue SPA — ale to wynik per trasa, a nie
gwarancja dla całego projektu.
ssr: falselub nadpisanierouteRulesmoże przełączyć dowolną trasę na CSR lub hybrydę, więc zweryfikuj faktyczną trasę. - Strategia renderowania to podstawa, decydowana per trasa — decyduje
o wszystkim przed meta, schematem czy mapami witryny. Tryby: SSR (domyślny), SSG
(
nuxt generate), hybrydowy (routeRules), SPA (ssr: false, unikaj dla indeksowanych treści), edge. - Hybrydowe
routeRulesmieszają tryby per URL;swr/isrregenerują w tle; Nuxt Islands obniżają koszt hydratacji i pomagają INP. - Googlebot indeksuje → renderuje (w kolejce, nie natychmiast) → indeksuje; przyjmuje najbardziej restrykcyjną dyrektywę między surowym a wyrenderowanym HTML. Renderowanie to ~20× koszt indeksowania. SSR/SSG zamykają lukę czasową.
- Renderowanie przez boty AI jest zależne od dostawcy — CSR zależy od wykonania po stronie klienta, które nie jest objęte jednym wspólnym kontraktem, więc SSR/SSG maksymalizuje widoczność w AI.
- Poza pierwszym ładowaniem HTML: zweryfikuj hydratację/ładunek niezależnie (HTML serwera
≠ dowód udanej hydratacji lub parytetu nawigacji po stronie klienta), uważaj na
<ClientOnly>ukrywające treść przed botami indeksującymi nawet na uniwersalnych trasach, i potwierdź bezpośredni status HTTP/przekierowania za pomocącurl -I, zamiast ufać stronie błędów renderowanej po stronie klienta. - Nitro i presety wdrożeniowe (Node, Cloudflare, Vercel, Netlify, statyczne) mogą różnić się API środowiska wykonawczego, buforowaniem, strumieniowaniem i regionami — testuj nagłówki pamięci podręcznej i parytet produkcyjny per trasa, nie zakładaj, że presety zachowują się identycznie.
- Znaczniki meta:
useSeoMeta()dla SEO/społecznościowych (bezpieczne typowo),useHead()dla reszty head, warianty tylko serwerowe, gdy reaktywność nie jest potrzebna. Warstwa:nuxt.config.ts→app.vue→ strona. Nie umieszczajuseSeoMeta()w układzie. Obrazy OG wymagają bezwzględnych URL-i. Wywołanie API dowodzi, że API działało, a nie co bezpośrednia odpowiedź emituje — potwierdź przez View Source/curl. @nuxtjs/seo(Harlan Wilton) to opcjonalny zestaw narzędzi zewnętrznych (v5.x, aktywnie utrzymywany, Nuxt 3,16+/4.x) — nie część rdzenia Nuxt. Zawiera robots, sitemap, obraz OG, Schema.org, canonical i link-checker, ale jego instalacja sama w sobie nie dowodzi poprawnego wyniku. Sitemap: tylkolastmodma znaczenie. Robots: domyślnie blokuje nieprodukcyjne; reguły AI per bot.@nuxt/image+ CWV: nigdy nie leniwie ładuj obrazu LCP; zawsze ustawwidth/height(CLS). Cele: LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1.- Nie używaj dynamicznego renderowania — Google je wycofał; SSR/SSG Nuxt już serwuje pełny HTML.
Oficjalna dokumentacja
Dokumentacja źródłowa od Nuxt i wyszukiwarek.
Nuxt
- Nuxt — Koncepcje renderowania — renderowanie uniwersalne, po stronie klienta i hybrydowe (
routeRules) oraz dlaczego boty indeksujące preferują trasy renderowane po stronie serwera. - Nuxt — SEO i meta (pierwsze kroki) —
useSeoMeta(),useHead()i zarządzanie head. - Nuxt — kompozycja
useSeoMeta— dokumentacja API bezpiecznego typowo, w tym użycie tylko serwerowe. - Nuxt — silnik serwera (Nitro) — presety wdrożeniowe, wyjście międzyplatformowe i miejsca, gdzie zachowanie środowiska wykonawczego/buforowania może się różnić.
- Nuxt — cykl życia Nuxt — renderowanie serwera, transfer ładunku i hydratacja jako odrębne etapy.
- Nuxt Image —
<NuxtImg>, responsywne formaty i konfiguracja dostawcy dla Core Web Vitals. @nuxtjs/seow Nuxt Modules — wpis w katalogu modułów: aktualna wersja, pobrania i fakt, że to osobno instalowany pakiet.
- Poznaj podstawy SEO dla JavaScriptu — potok crawl → render → index i linki do przeszukiwania (niezależny od frameworka; dokumentacja Google nie wspomina o Nuxt z nazwy).
- Dynamic Rendering (przestarzałe obejście) — dlaczego Google je wycofało i czego użyć zamiast tego (SSR, renderowanie statyczne, hydratacja).
Cytaty ze źródła
Jawne oświadczenia Nuxt, Google i moje własne. Każdy link do wyszukiwarki / Nuxt to link bezpośredni, który przeskakuje do cytowanego fragmentu na stronie źródłowej.
Nuxt — renderowanie dla SEO
- “Indexing and updating the content delivered via client-side rendering takes more time.” (tłumaczenie) „Indeksowanie i aktualizowanie treści dostarczanych przez renderowanie po stronie klienta zajmuje więcej czasu.” — dokumentacja renderowania Nuxt. Przejdź do cytatu
- “Web crawlers can directly index the page’s content, which makes Universal rendering a great choice for any content that you want to index quickly.” (tłumaczenie) „Roboty indeksujące mogą bezpośrednio indeksować treść strony, co czyni renderowanie uniwersalne świetnym wyborem dla wszelkich treści, które chcesz szybko zaindeksować.” — dokumentacja renderowania Nuxt. Przejdź do cytatu
Google — przetwarzanie JavaScriptu i dynamiczne renderowanie
- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (tłumaczenie) „Google przetwarza aplikacje internetowe JavaScript w trzech głównych fazach: 1. Crawling 2. Renderowanie 3. Indeksowanie.” — dokumentacja Google Search Central. Przejdź do cytatu
- “Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.” (tłumaczenie) „Dynamiczne renderowanie to obejście, a nie długoterminowe rozwiązanie problemów z treścią generowaną przez JavaScript w wyszukiwarkach. Zamiast tego zalecamy użycie renderowania po stronie serwera, renderowania statycznego lub hydratacji jako rozwiązania.” — dokumentacja Google Search Central. Przejdź do cytatu
Patrick Stox (moja własna praca — JavaScript SEO: A Definitive Guide)
- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (tłumaczenie) „Każdy rodzaj konfiguracji SSR, renderowania statycznego i prerenderowania będzie odpowiedni dla wyszukiwarek. Gatsby, Next, Nuxt itd. są świetne.”
- “There is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (tłumaczenie) „Nie ma stałego limitu czasu dla renderera… Jest naprawdę cierpliwy i nie powinieneś się martwić.”
- “JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to.” (tłumaczenie) „JavaScript nie jest zły dla SEO i nie jest złem. Jest po prostu inny niż to, do czego przyzwyczaiło się wielu specjalistów SEO.”
Lista kontrolna SEO dla Nuxt
Szybkie sprawdzenie, czy witryna Nuxt jest skonfigurowana pod kątem wyszukiwarek i robotów AI:
- Treść, którą chcesz zaindeksować, jest renderowana na serwerze lub w czasie budowania (SSR lub SSG) — nie w trybie SPA (
ssr: false). - Potwierdzono przez Podgląd źródła, że ważna treść jest w surowym HTML, oraz przez Inspekcję URL, że Google ją renderuje.
-
useSeoMeta()jest w komponentach strony, a nie we wspólnym layoutcie nadpisującym tagi strony. -
ogImageużywa bezwzględnego adresu URL (nie względnego). - Szablon tytułu jest ustawiony raz w
app.vue; tytuły/opisy per strona są unikalne. -
@nuxtjs/sitemapgeneruje mapę XML;lastmodjest dokładny i nie polegasz nachangefreq/priority. -
@nuxtjs/robotsjest skonfigurowany; automatyczne blokowanie poza produkcją nie jest przypadkowo stosowane na produkcji. -
robots.txtnie blokuje Twojego JS/CSS. - Kanoniki są bezwzględne i per strona (
nuxt-seo-utils). - Obraz LCP ładuje się chętnie (nie leniwie); wszystkie obrazy mają
width/height(CLS). - Prawdziwe linki
<a href>/<NuxtLink>do nawigacji — bez routowania przez<div @click>. - Jeśli używasz
@nuxt/content,@nuxtjs/seojest załadowany przed nim w tablicy modułów. - Dynamiczne renderowanie nie jest używane nigdzie.
Modele mentalne
1. Strategia renderowania jest najważniejsza. Tag meta, schema i mapy są zależne od jednej decyzji: jak HTML jest produkowany. Odpowiedz “czy ta treść jest renderowana po stronie serwera, statycznie generowana, czy renderowana po stronie klienta?” zanim debugujesz cokolwiek innego.
2. SSR jest domyślny — Twoim zadaniem jest głównie nie zepsuć go.
Nuxt ustawia domyślne wartości we właściwym kierunku. Większość problemów z SEO w Nuxt to ktoś ustawiający ssr: false, blokujący JS/CSS lub wstrzykujący sygnały przez JavaScript, które kolidują z surowym HTML.
3. Wybierz tryb renderowania według typu treści.
- Głównie statyczna (blog, dokumentacja, marketing) → SSG (
prerender: true). - Zawsze świeża / dynamiczna → SSR.
- Treść godzinowa/dzienna chcąca statycznej szybkości →
swr/isr. - Za loginem, nie indeksowana → SPA (
ssr: false) jest w porządku. - Publiczna treść, którą chcesz pozycjonować lub cytowaną przez AI → nigdy SPA.
4. HTML najpierw, JS drugi dla każdego sygnału. Treść, meta, kanonik, dyrektywy robots i linki należą do renderowanego po stronie serwera HTML. Google bierze najbardziej restrykcyjną dyrektywę między surowym a renderowanym; AI crawlerzy widzą tylko surowy. SEO wstrzykiwane przez JS to zapas, nie plan.
5. Używaj modułów, ale rozumiej, co robią.
@nuxtjs/seo oszczędza pracę, ale automatyczne blokowanie robots poza produkcją, rzeczywistość mapy tylko z lastmod i bezwzględne kanoniki URL to nadal Twoje zadanie do zrobienia dobrze.
Nuxt SEO — ściąga
Tryby renderowania
| Tryb | Konfiguracja | SEO | Najlepszy dla |
|---|---|---|---|
| Universal / SSR | ssr: true (domyślny) | ✅ Najlepszy | Dynamiczny / spersonalizowany |
| Statyczny / SSG | nuxt generate | ✅ Najlepszy | Blogi, dokumentacja, marketing |
| Hybrydowy | routeRules | ✅ Najlepszy | Duże strony z mieszaną treścią |
| SPA / CSR | ssr: false | ⚠️ Słaby do indeksowania | Panele, admin |
| Edge-side | Cel wdrożenia | ✅ Niski TTFB | Globalna wydajność |
Kompozycje
| Użycie | Sięgaj po |
|---|---|
| SEO + tagi meta społecznościowe | useSeoMeta() (type-safe) |
| Szablony tytułów, skrypty, tagi linków, atrybuty html | useHead() |
| Pomiń ponowne wykonanie po stronie klienta dla statycznego meta | useServerHead() |
Moduły @nuxtjs/seo
| Moduł | Zadanie |
|---|---|
@nuxtjs/robots | robots.txt + meta robots + X-Robots-Tag (blokuje poza produkcją domyślnie) |
@nuxtjs/sitemap | Mapa XML (tylko lastmod ma znaczenie; automatyczny indeks powyżej 50k URL) |
nuxt-og-image | Dynamiczne obrazy OG |
nuxt-schema-org | Dane strukturalne JSON-LD |
nuxt-seo-utils | Kanoniczne URL (usuwa utm_*/fbclid/gclid), breadcrumbs |
nuxt-link-checker | Zepsute linki w czasie budowania |
Szybkie zasady
- Zainstaluj wszystko:
npx nuxt module add seo. - Obrazy OG: tylko bezwzględne adresy URL.
- Obraz LCP:
loading="eager"; wszystkie obrazy potrzebująwidth/height(CLS). - Cele CWV: LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1.
- Nigdy nie blokuj JS/CSS w robots.txt.
- Renderowanie dynamiczne: przestarzałe — SSR/SSG Nuxta zastępuje je.
- Crawlery AI: bez JavaScriptu → treść SPA jest dla nich niewidoczna.
Zobacz, co strona Nuxt faktycznie wysyła
Całe pytanie SEO w Nuxt sprowadza się do jednej kontroli: czy Twoja treść jest w surowym HTML, który wysyła serwer, czy dopiero po uruchomieniu JavaScriptu? Jeśli jest w surowym HTML, to renderujesz po stronie serwera i crawlery (oraz boty AI) mogą ją odczytać.
Pobierz surowy HTML i poszukaj swojej treści
macOS / Linux:
# Raw HTML as the server sends it — before any client JS runs
curl -sL -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
https://example.com/page/ -o raw.html
# Is your headline actually in the server HTML? (empty = client-rendered)
grep -o "Your headline text" raw.htmlWindows (PowerShell):
$ua = "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
Invoke-WebRequest -Uri "https://example.com/page/" -UserAgent $ua -OutFile raw.html
Select-String -Path raw.html -Pattern "Your headline text"Jeśli Twój tekst pojawia się w przeglądarce, ale nie ma go w raw.html, strona jest
renderowana po stronie klienta — przełącz trasę na SSR lub wstępnie ją wygeneruj. (Zwykły curl nie uruchomi JS;
aby zobaczyć wyrenderowany DOM, użyj URL Inspection lub crawlera opartego na headless Chrome.)
Potwierdź, że nie blokujesz JS/CSS
macOS / Linux:
curl -sL https://example.com/robots.txt | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_nuxt|_ipx|assets)"Reguła Disallow pasująca do /_nuxt/ (katalog wyjściowy Nuxta) lub /_ipx/ (optymalizator
@nuxt/image) zepsuje renderowanie — to prawie zawsze błąd.
Statyczny fragment konfiguracji (nuxt.config.ts)
export default defineNuxtConfig({
modules: ['@nuxtjs/seo'], // robots, sitemap, og-image, schema-org, utils
site: { url: 'https://mysite.com' }, // required for absolute canonicals + sitemap
routeRules: {
'/blog/**': { prerender: true }, // SSG for content
'/admin/**': { ssr: false }, // SPA for the dashboard (won't be indexed)
},
}) Narzędzia do SEO w Nuxt
- URL Inspection (Google Search Console) — źródło prawdy. Uruchom test na żywo i sprawdź wyrenderowany HTML, zrzut ekranu i zasoby strony, aby potwierdzić, że Twoja treść Nuxt faktycznie się wyrenderowała i nic nie jest zablokowane.
@nuxtjs/seo/ nuxtseo.com — pakiet modułów Harlana Wiltona; panel narzędzi deweloperskich pokazuje wygenerowane robots, sitemap, schema i obrazy OG w środowisku deweloperskim.- Nuxt DevTools — sprawdź tagi head, reguły tras i tryb renderowania używany przez każdą trasę.
- Rich Results Test — potwierdź, że JSON-LD z
nuxt-schema-orgjest obecny w wyrenderowanym wyniku po każdej zmianie renderowania. - Ahrefs Site Audit / Screaming Frog (tryb renderowania JS) — przeszukaj z włączonym i wyłączonym renderowaniem JS, aby porównać surowy i wyrenderowany HTML w całej aplikacji Nuxt i wykryć luki CSR.
- Lighthouse / PageSpeed Insights — Core Web Vitals (LCP, INP, CLS) dla
pracy z
@nuxt/imagei Nuxt Islands. - Bing Webmaster Tools — widok indeksowania i indeksu Binga oraz miejsce, w którym pojawiają się zgłoszenia IndexNow.
Błędy SEO w Nuxt, których należy unikać
Konkretne błędy, które powtarzają się na prawdziwych stronach Nuxt — zapobiegaj im, zanim zostaną wdrożone, zamiast diagnozować je po spadku ruchu.
Ustawianie ssr: false na treści, którą chcesz indeksować
Najdroższy błąd SEO w Nuxt. Tryb SPA wysyła ten sam problem pustej skorupy, co zwykły Vue — wyszukiwarki muszą czekać, aż kolejka renderowania wypełni content. Kontrakty renderowania dla crawlerów AI różnią się w zależności od dostawcy, więc crawler, który pobiera tylko początkowy HTML, może pominąć treść strony.
Dlaczego to błąd: dobrowolnie rezygnujesz z jedynej domyślnej opcji (SSR), która sprawia, że Nuxt jest łatwiejszy do indeksowania niż zwykły Vue.
Co zamiast tego: pozostaw ssr: true (domyślnie) dla wszystkiego, co publiczne i
indeksowalne. Zarezerwuj ssr: false dla powierzchni faktycznie nieindeksowanych — paneli
wymagających logowania, paneli administracyjnych — przez routeRules, a nie globalną zmianę konfiguracji.
Umieszczanie useSeoMeta() we wspólnym layoucie
Ustawianie tytułu/opisu w komponencie layoutu wydaje się efektywne — jedno miejsce,
stosuje się wszędzie — ale oznacza to, że każda strona używająca tego layoutu otrzymuje te same
generyczne tagi, a wywołania useSeoMeta() na poziomie strony mogą zostać nadpisane w zależności od
kolejności renderowania.
Dlaczego to błąd: unikalne, specyficzne dla strony tytuły i opisy to podstawowe sygnały trafności; domyślny layout sprowadza je wszystkie do jednego ciągu znaków.
Co zamiast tego: ustaw globalne wartości domyślne raz w app.vue (szablon tytułu, domyślne
OG), a następnie wywołaj useSeoMeta() wewnątrz każdego komponentu strony z rzeczywistym
tytułem i opisem tej strony.
Wysyłanie względnego adresu URL ogImage
ogImage: '/social.png' wygląda dobrze w przeglądarce, ale całkowicie zawodzi, gdy
Facebook, LinkedIn lub X próbują go pobrać, ponieważ roboty społecznościowe nie rozwiązują
względnych ścieżek względem Twojej witryny.
Dlaczego to błąd: platformy społecznościowe potrzebują bezwzględnego adresu URL, aby pobrać obraz; ścieżka względna nie rozwiązuje się z ich strony.
Co zamiast tego: zawsze podawaj pełny adres URL https:// i ustaw site.url w
nuxt.config.ts, aby moduły @nuxtjs/seo mogły automatycznie budować bezwzględne adresy URL.
Sięganie po dynamiczne renderowanie
Serwowanie wstępnie wyrenderowanego zrzutu znanym botom i SPA wszystkim innym było uzasadnionym obejściem lata temu. Google od tego czasu wprost to skrytykował: “dynamic rendering is a workaround and not a long-term solution.” (tłumaczenie) „Dynamiczne renderowanie to obejście, a nie długoterminowe rozwiązanie.”
Dlaczego to błąd: obsługuje tylko skonfigurowane boty, pomija wszystko inne (Bing, większość botów AI) i dodaje realną infrastrukturę do utrzymania — dla problemu, który SSR/SSG Nuxta już rozwiązuje.
Co zamiast tego: użyj SSR lub nuxt generate i całkowicie pomiń dynamiczne renderowanie.
Nie ma scenariusza, w którym witryna Nuxt tego potrzebuje.
Blokowanie /_nuxt/ lub /_ipx/ w robots.txt
Ogólne Disallow: /assets/ lub zbyt gorliwa reguła robots może przypadkiem złapać
katalog wyjściowy kompilacji Nuxta (/_nuxt/) lub ścieżkę optymalizatora @nuxt/image
(/_ipx/).
Dlaczego to błąd: jeśli Googlebot nie może pobrać JS/CSS, które budują stronę, nie może potwierdzić, że Twój wynik SSR wygląda tak, jak powinien — a wszelkie ulepszenia po stronie klienta po cichu przestają się dla niego renderować.
Co zamiast tego: nigdy nie blokuj ścieżek wyjściowych kompilacji ani optymalizatora obrazów. Sprawdzaj
robots.txt po każdym wdrożeniu, które dotyka routingu lub konfiguracji modułów, nie tylko raz
na starcie.
Pozostawienie aktywnego bloku robots dla środowiska nieprodukcyjnego po starcie
@nuxtjs/robots domyślnie blokuje wszystkie roboty w środowiskach nieprodukcyjnych —
dobra siatka bezpieczeństwa dla środowiska testowego, ale czyta zmienne środowiskowe, aby podjąć decyzję, a
błędnie skonfigurowany NODE_ENV lub ustawienie podglądu wdrożenia może sprawić, że zadziała również w produkcji.
Dlaczego to błąd: witryna wygląda całkowicie dobrze w przeglądarce, podczas gdy robots.txt
po cichu blokuje wszystko, i nic nie jest indeksowane, dopóki ktoś tego nie zauważy.
Co zamiast tego: po każdym wdrożeniu lub zmianie środowiska pobierz bezpośrednio
https://yoursite.com/robots.txt i potwierdź, że nie jest to ogólne
Disallow: /.
Stałe KPI dla SEO w Nuxt
Ciągłe liczby do śledzenia, gdy konfiguracja renderowania jest poprawna — nie jednorazowe kontrolki, ale powtarzające się sygnały, które wykrywają regresje w miarę zmian aplikacji.
Core Web Vitals (LCP, INP, CLS)
Co Ci to mówi: czy prawdziwi odwiedzający otrzymują szybką, stabilną stronę — bezpośrednio zależną od kosztu Nuxt Islands/hydracji (INP) i wyborów ładowania obrazów (LCP, CLS).
Jak to pobrać: dane terenowe z Chrome UX Report przez /tools/crux-tracker/ lub /tools/cwv-checker/; dane laboratoryjne z Lighthouse do kontroli przed wydaniem.
Benchmark / realistyczny zakres: opublikowane przez Google progi „dobrych” wyników to LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1 na 75. percentylu — to są linie zaliczenia/niezaliczenia, których sam CrUX używa, a nie liczba, którą wymyślam. Gdzie wpadniesz w zakres „dobry”, zależy w dużej mierze od wagi obrazów i tego, ile hydratujesz.
Częstotliwość: dane terenowe CrUX aktualizują się w ruchomym oknie 28-dniowym — sprawdzaj co miesiąc, i natychmiast po każdej zmianie obrazów, czcionek lub hydracji.
Zgodność HTML renderowanego z surowym
Co to mówi: czy treść, którą widzą wyszukiwarki i boty AI (surowy HTML), odpowiada temu, co widzi odwiedzający w przeglądarce (renderowany DOM) — to kluczowe ryzyko SEO w Nuxt, jeśli ssr zostanie przełączone lub trasa cofnie się do CSR.
Jak to sprawdzić: /tools/render-gap/ porównuje surowy i renderowany HTML dla adresu URL; aby uzyskać autorytatywny widok od Google, użyj URL Inspection w GSC → “View Crawled Page”.
Benchmark / realistyczny zakres: to sprawdzenie binarne, a nie zakres — Twoje kluczowe treści (nagłówek, treść, linki wewnętrzne) powinny być obecne w surowym HTML, kropka. Jakakolwiek luka na stronie, którą chcesz indeksować lub cytować, to regresja do naprawy, a nie liczba do tolerowania.
Częstotliwość: po każdym wdrożeniu, które dotyka routeRules, layoutów lub konfiguracji ssr; w przeciwnym razie miesięczna kontrola kluczowych szablonów.
Pokrycie indeksu (raport Page Indexing)
Co to mówi: ile z przesłanych adresów URL Google faktycznie zaindeksował i dlaczego pozostałe zostały wykluczone (duplikaty, przeszukane-nieindeksowane, zablokowane itp.) — sygnał końcowy, na który ostatecznie przekładają się problemy z renderowaniem.
Jak to sprawdzić: Search Console → raport Page Indexing, przefiltrowany pod kątem wzorców URL Twojej witryny Nuxt.
Benchmark / realistyczny zakres: nie ma uniwersalnego zdrowego procentu — zależy to od tego, ile prawie zduplikowanych lub cienkich adresów URL generuje struktura Twoich tras. Obserwuj trend i powody wykluczeń, a nie docelową liczbę.
Częstotliwość: co tydzień podczas i po migracji trybu renderowania; w przeciwnym razie miesięcznie.
Dostęp botów AI
Co to mówi: czy GPTBot, ClaudeBot, PerplexityBot i podobne boty AI faktycznie mogą pobierać Twoje strony — niezależnie od Google, ponieważ te boty zazwyczaj nie wykonują JavaScriptu i czytają tylko surowy HTML, do którego dostęp umożliwia im Twój robots.txt.
Jak to sprawdzić: /tools/ai-crawler-checker/, aby potwierdzić, że żaden user-agent AI nie jest zablokowany; logi serwera, aby potwierdzić, że boty faktycznie żądają stron, a nie tylko mają na to pozwolenie.
Benchmark / realistyczny zakres: nie ma wskaźnika cytowalności, który mógłbym Ci uczciwie podać — jak często silnik odpowiedzi AI Cię cytuje, zależy od przestrzeni zapytań i konkurencji, a nie od czegoś, co konfiguracja Nuxt kontroluje bezpośrednio. Śledź dostęp (dozwolony vs. zablokowany), a nie zmyślony procent cytowań.
Częstotliwość: po każdej zmianie robots.txt lub konfiguracji @nuxtjs/robots; w przeciwnym razie miesięczna kontrola logów.
Sprawdź się: Nuxt SEO
Pięć szybkich pytań o optymalizację witryny Nuxt pod kątem wyszukiwania. Wybierz odpowiedź na każde, a następnie sprawdź.
Zasoby warte Twojego czasu
Moje powiązane artykuły
- JavaScript SEO: A Definitive Guide — mój pełny przewodnik po renderowaniu, zgodności DOM, zasadzie najbardziej restrykcyjnej dyrektywy i dlaczego SSR/statyczne/prerenderowanie (w tym Nuxt) są w porządku dla wyszukiwania.
- The Beginner’s Guide to Technical SEO — gdzie renderowanie i crawling wpisują się w szerszy obraz.
Moje wystąpienia
- JavaScript SEO — Ungagged 2019 (SlideShare) — wiecznie zielony Chromium Googlebota, ~20× koszt renderowania w crawlach, History API zamiast routingu hash oraz jak Google obsługuje kanonikaty wstrzykiwane przez JS. (Stałe zastrzeżenie: porady dotyczące dynamicznego renderowania w tej prezentacji są już nieaktualne — Google je wycofało.)
Z branży
- Nuxt — koncepcje renderowania (oficjalne) — renderowanie uniwersalne i po stronie klienta oraz powody, dla których roboty indeksujące preferują SSR.
- Nuxt — SEO i metadane (oficjalne) —
useSeoMeta()iuseHead(), referencja na start. - Nauka SEO z Nuxt (Harlan Wilton / nuxtseo.com) — najbardziej kompleksowy, zorientowany na programistów przewodnik SEO dla Nuxt, na bieżąco aktualizowany.
- harlan-zw/nuxt-seo (GitHub) — źródło pakietu modułów
@nuxtjs/seo. - Nuxt Image (oficjalne) —
<NuxtImg>i optymalizacja Core Web Vitals. - Optimize Nuxt Performance (DebugBear) — praktyczny przewodnik po poprawkach Core Web Vitals w Nuxt.
- Nuxt 3 Rendering Modes (RisingStack) — techniczne porównanie renderowania SSR, SSG i hybrydowego.
- r/TechSEO — społeczność do debugowania renderowania i indeksowania.
Filmy
- Google Search Central (YouTube) — seria JavaScript SEO Martina Splitta to najlepszy oficjalny przewodnik po tym, jak Google indeksuje, renderuje i skanuje aplikacje JS; jest niezależna od frameworka, ale ma bezpośrednie zastosowanie do Nuxt. Kanał
Dziennik zmian
Zaktualizowano 27 lip 2026.
Podsumowanie redakcyjne i zapisane szczegóły zmian.Szczegóły zmian
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
Pełne porównanie jest niedostępne — dla tej wersji nie zarchiwizowano wcześniejszej migawki.
Zaktualizowano 18 lip 2026.
Podsumowanie redakcyjne i zapisane szczegóły zmian.Szczegóły zmian
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
-
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
Pełne porównanie jest niedostępne — dla tej wersji nie zarchiwizowano wcześniejszej migawki.