SEO pro Next.js: vykreslování, metadata, mapy webu a blog, který se umisťuje

Rychlý kvíz

Hodí se vám SEO a jak začít?

Otázka 1 z 425%

Hledají lidé na Googlu to, co prodáváte?

Ano, myslím siNe, je to nové nebo velmi úzkéNevím

SEO pro Next.js je z velké části o správné volbě pro každou trasu: co se vykresluje na serveru, co se cachuje a co se dostane do HTML dřív, než se spustí jakýkoli skript. Google ve své příručce Základy SEO pro JavaScript vysvětluje, že aplikace v JavaScriptu zpracovává ve třech fázích (procházení, vykreslení, indexace) a že „vykreslování na serveru nebo předrenderování je pořád skvělý nápad“. Next.js to dělá ve výchozím nastavení. Tento průvodce pokrývá App Router (Next.js 13 a novější) s poznámkami ke starší verzi Pages Router.

Je Next.js dobrý pro SEO?

Ano. Obyčejná aplikace v Reactu s vykreslováním na straně klienta odešle téměř prázdný soubor HTML a stránku sestaví až v prohlížeči; vyhledávače ji musejí vykreslit a mnoho robotů to nikdy neudělá. Next.js vykresluje React na serveru, takže odpověď HTML už obsahuje nadpisy, text, odkazy a metadata. Náš průvodce SEO pro JavaScript vysvětluje, proč na tom při indexaci záleží.

V App Router jsou komponenty ve výchozím stavu Server Components. I komponenty označené 'use client' se předrenderují do HTML na serveru. Slabé místo jsou data: cokoli, co načtete uvnitř useEffect nebo co se načte až po kliknutí, v počátečním HTML chybí. Obsah načítejte v Server Components a klientské komponenty si nechte pro interaktivitu.

SSG, SSR, ISR nebo CSR: který režim vykreslování zvolit?

Next.js umožňuje kombinovat režimy po jednotlivých trasách. Volba ovlivňuje aktuálnost, rychlost a to, co dostanou crawlery.

Dokumentace Next.js k ISR uvádí přínosy: aktualizovat statický obsah „bez přestavění celého webu“ a zvládat velké množství stránek bez dlouhých časů sestavení. Trasa s export const revalidate = 3600 se obnoví nejvýš jednou za hodinu; pro přesnou kontrolu zavolejte revalidatePath nebo revalidateTag, když se obsah změní. Počítejte s tím, že ISR nefunguje se statickým exportem (output: 'export'). Pro aplikace, které musejí zůstat vykreslované na klientovi, popisuje náš průvodce SEO pro jednostránkové aplikace obcházení těchto omezení.

Jak nastavit titulky, popisy a kanonické značky pomocí Metadata API?

Metadata API v App Router nahrazuje next/head. Podle dokumentace Next.js k metadatům exportujete statický objekt metadata z layoutu nebo stránky, nebo funkci generateMetadata, když hodnoty závisí na datech, a Next.js vygeneruje značky v hlavičce. Obojí je podporováno jen v 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] },
  }
}

Pět pravidel, která zabrání většině problémů:

• Nastavte metadataBase v kořenovém layoutu (vaše produkční doména), aby se relativní kanonické a Open Graph URL staly absolutními.
• Použijte šablonu titulku v kořenovém layoutu, například '%s | Značka', aby každá stránka měla jedinečný titulek se značkou uvedenou jednou.
• Dejte každé stránce, která má být indexována, kanonickou značku odkazující na sebe přes alternates.canonical; chrání před duplicitami vzniklými parametry dotazu a lomítky na konci. Naše heslo ve slovníku o kanonické značce popisuje pravidla.
• Napište popis pro každou stránku, generovaný z obsahu v generateMetadata, nikdy ne jeden výchozí pro celý web.
• Přidejte obrázky Open Graph pomocí souboru opengraph-image ve složce trasy a výsledek zkontrolujte nástrojem pro náhled Open Graph.

U dynamických stránek Next.js streamuje metadata až po prvních bajtech, aby urychlil vykreslení. Dokumentace uvádí, že streamování je vypnuto pro roboty, které očekávají metadata v hlavičce, rozpoznané podle user agenta (mezi příklady patří Bingbot, Twitterbot a Slackbot), a že volba htmlLimitedBots přizpůsobuje seznam. Pokud vám záleží na crawleru, který v seznamu není, přidejte ho. U Pages Router je ekvivalentem komponenta Head z next/head s atributem key, aby se zabránilo duplicitním značkám.

Jak v Next.js generovat sitemap.xml a robots.txt?

Obojí jsou speciální soubory ve složce app. Soubor sitemap.ts, který exportuje funkci vracející URL adresy, se stane /sitemap.xml; soubor robots.ts se stane /robots.txt. referenční příručka k mapě webu uvádí, že soubor je ve výchozím stavu cachován a že limit Google je 50000 URL na jednu mapu webu; nad tuto hranici generateSitemaps rozdělí mapu do několika souborů.

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

Zahrnujte jen kanonické, indexovatelné URL, které vracejí 200, a do lastModified uvádějte skutečné datum aktualizace. Mapa webu přijímá také alternates.languages pro vícejazyčné weby. V robots.ts odkažte na mapu webu a rozhodněte, které AI roboti smějí web procházet; náš článek o souboru robots.txt pro AI crawlery je uvádí. Více o formátu najdete v našem hesle ve slovníku o XML mapě webu.

Které technické detaily nejčastěji rozbíjejí SEO v Next.js?

Všechny tyto problémy snižují procházitelnost: crawler musí být schopen objevit každou URL přes odkazy a dostat čistý stavový kód.

Jak přidat strukturovaná data v Next.js?

Dokumentace Next.js doporučuje vykreslovat JSON-LD jako značku script typu application/ld+json přímo v komponentě stránky nebo layoutu, sestavenou ze stejných dat jako stránka, a ošetřit znak < v serializovaném JSON, aby se zabránilo vložení nežádoucího kódu. Protože se vykresluje na serveru, vidí ho v surovém HTML jak Google, tak AI crawlery. Použijte Article (nebo BlogPosting) pro příspěvky, Organization v kořenovém layoutu, BreadcrumbList pro hluboké stránky a Product pro e-commerce. Generátor schema vám dá platný výchozí blok; stránku pak ověřte nástrojem Google Rich Results Test.

Jak zrychlit web v Next.js natolik, aby prošel Core Web Vitals?

Next.js přináší komponenty, které řeší obvyklé příčiny špatných Core Web Vitals:

• next/image: mění velikost obrázků, nabízí moderní formáty, ve výchozím stavu je líně načítá a vyžaduje rozměry, což brání posunům rozvržení. Hlavní obrázek nad záhybem označte jako prioritní, aby se nenačítal líně (obvykle je to prvek Largest Contentful Paint).
• next/font: hostuje písma sám a brání posunu způsobenému pozdním nahrazením písma.
• next/script: načítá skripty třetích stran podle strategie (afterInteractive, lazyOnload), místo aby blokovaly stránku.
• Méně JavaScriptu na klientovi: každá hranice 'use client' přidává kód ke stažení a hydrataci, což tíží Interaction to Next Paint na mobilu.

Měřte terénní data, ne jen laboratorní skóre: náš průvodce PageSpeed Insights ukazuje, jak číst obojí.

Jak provozovat blog v Next.js, který se umisťuje?

Blog v Next.js obvykle přijme jednu ze tří podob: soubory MDX nebo Markdown v repozitáři (jednoduché, ale každý příspěvek vyžaduje commit a nasazení), headless CMS (Sanity, Contentful, Strapi, Payload) načítané v Server Components, nebo publikační webhook, který přijímá články z externího nástroje. Ve všech třech případech je vzor SEO stejný: dynamická trasa app/blog/[slug] s generateStaticParams, generateMetadata, ISR, mapou webu napojenou na stejný zdroj a indexová stránka, která odkazuje na každý příspěvek.

Vzor s webhookem drží publikování mimo váš cyklus nasazení. Route Handler přijme článek, uloží ho a poté revalidní dotčené stránky:

// 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 v Next.js pomáhá, abyste byli citováni AI asistenty?

Vykreslování na serveru je první podmínkou pro GEO (optimalizaci pro generativní vyhledávače). Analýza Vercel z prosince 2024 The rise of the AI crawler zjistila, že „žádný z hlavních AI crawlerů v současnosti nevykresluje JavaScript“, jmenovala GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot a PerplexityBot a v jednom měsíci napočítala na své síti 569 milionů stažení GPTBot a 370 milionů stažení Claude. Stránka v Next.js, která předrenderuje text, nadpisy a JSON-LD, je pro všechny čitelná; stránka vykreslovaná na klientovi nikoli.

Druhou podmínkou je obsah, který stojí za citování: články, které odpovídají na jednu otázku v každé sekci, s zdroji, čísly a jasnými definicemi, publikované pravidelně. To je část, kterou automatizuje Sorank, náš produkt. Sorank je SEO a GEO software na autopilotu: najde vaše klíčová slova a jeho generátor článků pro blog napíše 20, 60 nebo 120 článků měsíčně se zdroji, interními odkazy a obrázky. Na webu v Next.js se připojí přes vlastní webhook popsaný na stránce instalace: váš Route Handler přijme každý článek, uloží ho a revalidne blog. Sledování zmínek v AI pak každý měsíc kontroluje, zda ChatGPT, Claude a Gemini citují vaši značku.

Stručně: předrenderujte každou stránku, kterou chcete nalézt, definujte metadata na serveru a napojte mapu webu na stejný zdroj jako obsah. Next.js vám dá nástroje; umístění a citace v AI pocházejí z toho, co s nimi publikujete. Chcete-li blog v Next.js pravidelně zásobovat články, podívejte se na tarify Sorank, od $49 měsíčně s 3denní bezplatnou zkušební verzí.