Next.js SEO: renderelés, metaadatok, sitemapek és egy blog, amely rangsorol

Gyors kvíz

Neked való a SEO, és hogyan kezdd el?

1. kérdés, összesen 425%

Keresik az emberek a Google-ben, amit eladsz?

Igen, szerintem igenNem, új vagy nagyon speciálisNem tudom

A Next.js SEO főleg arról szól, hogy útvonalanként jól döntsd el: mi renderelődik a szerveren, mi kerül gyorsítótárba, és mi kerül be a HTML-be, mielőtt bármilyen szkript lefutna. A Google a JavaScript SEO alapjaiban leírja, hogy a JavaScript-alkalmazásokat három fázisban dolgozza fel (bejárás, renderelés, indexelés), és hogy „a szerveroldali vagy előre renderelt megjelenítés továbbra is nagyon jó ötlet”. A Next.js ezt alapértelmezetten megteszi. Ez az útmutató az App Routerrel foglalkozik (Next.js 13-tól), a régebbi Pages Routerhez tartozó megjegyzésekkel.

Jó a Next.js SEO-szempontból?

Igen. Egy sima, kliensoldali renderelésű React-alkalmazás szinte üres HTML-fájlt küld, és az oldalt a böngészőben építi fel; a keresőmotoroknak ezt renderelniük kell, és sok robot soha nem teszi meg. A Next.js a szerveren renderel Reactot, így a HTML-válasz már tartalmazza a fejléceket, a szöveget, a linkeket és a metaadatokat. A JavaScript SEO útmutatónk elmagyarázza, miért fontos ez a különbség az indexeléshez.

Az App Routerben a komponensek alapértelmezetten Server Components. Még a 'use client' jelöléssel ellátott komponensek is előre renderelődnek HTML-re a szerveren. A gyenge pont az adat: minden, amit a useEffect-ben kérsz le, vagy csak egy kattintás után töltesz be, hiányzik a kezdeti HTML-ből. A tartalmat Server Components-ben kérd le, a kliens komponenseket pedig az interaktivitásra tartsd meg.

SSG, SSR, ISR vagy CSR: melyik renderelési módot válaszd?

A Next.js útvonalanként keverheti a módokat. A választás hat a frissességre, a sebességre és arra, amit a robotok kapnak.

A Next.js ISR-dokumentációja felsorolja az előnyöket: a statikus tartalom frissíthető „az egész oldal újraépítése nélkül”, és nagy mennyiségű oldal kezelhető hosszú build-idő nélkül. Az export const revalidate = 3600 beállítású útvonal legfeljebb óránként regenerálódik; pontos vezérléshez a tartalom változásakor hívd meg a revalidatePath vagy a revalidateTag függvényt. Figyelj arra, hogy az ISR nem működik statikus exporttal (output: 'export'). Azoknak az alkalmazásoknak, amelyeknek kliensoldalon kell maradniuk, az egyoldalas alkalmazások SEO-ja útmutatónk tartalmazza a megkerülő megoldásokat.

Hogyan állíthatod be a címeket, leírásokat és canonical címkéket a Metadata API-val?

A Metadata API az App Routerben a next/head helyét veszi át. A Next.js metaadat-dokumentációja szerint egy layoutból vagy oldalból statikus metadata objektumot exportálsz, vagy generateMetadata függvényt, ha az értékek adattól függnek, és a Next.js generálja a fejléc címkéit. Mindkettő csak Server Components-ben támogatott.

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

Öt szabály, amely a legtöbb problémát megelőzi:

• Állítsd be a metadataBase értékét a gyökérlayoutban (az éles domained), hogy a relatív canonical és Open Graph URL-ek abszolútak legyenek.
• Használj címsablont a gyökérlayoutban, például '%s | Brand' formában, hogy minden oldal egyedi címet kapjon, a márkanév pedig egyszer szerepeljen benne.
• Adj minden indexelhető oldalnak önhivatkozó canonical címkét az alternates.canonical beállítással; ez véd a lekérdezési paraméterek és a záró perjelek miatt keletkező duplikációk ellen. A canonical címke szószedeti szócikkünk elmagyarázza a szabályokat.
• Írj leírást minden oldalhoz, amelyet a generateMetadata-ban a tartalomból generálsz, soha ne használj egységes, webhelyszintű alapértelmezettet.
• Adj Open Graph képeket az útvonal mappájában lévő opengraph-image fájllal, és ellenőrizd az eredményt egy Open Graph előnézeti eszközzel.

Dinamikus oldalaknál a Next.js az első bájtok után streamelve küldi a metaadatokat, hogy gyorsítsa a renderelést. A dokumentáció szerint a streamelés azoknál a robotoknál le van tiltva, amelyek a fejlécben várják a metaadatokat, ezt a user agent alapján ismeri fel (például a Bingbot, a Twitterbot és a Slackbot), és a htmlLimitedBots beállítással testreszabható a lista. Ha egy nem szereplő robot számít neked, add hozzá. A Pages Routerben a megfelelő megoldás a next/head Head komponense, a key attribútummal, hogy elkerüld a duplikált címkéket.

Hogyan generálhatsz sitemap.xml és robots.txt fájlt Next.js-ben?

Mindkettő speciális fájl az app mappában. Egy sitemap.ts fájl, amely URL-eket visszaadó függvényt exportál, a /sitemap.xml címet kapja; egy robots.ts fájl a /robots.txt címet. A sitemap-referencia megjegyzi, hogy a fájl alapértelmezetten gyorsítótárazott, és hogy a Google határa sitemapenként 50 000 URL; efölött a generateSitemaps több fájlra bontja.

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

Csak a kanonikus, indexelhető, 200-as választ adó URL-eket vegyél bele, a lastModified mezőben pedig a valódi frissítési dátumot használd. A sitemap többnyelvű oldalaknál az alternates.languages beállítást is elfogadja. A robots.ts fájlban mutass a sitemapre, és döntsd el, mely AI-robotok járhatják be az oldalt; az AI-robotok robots.txt-jéről szóló cikkünk felsorolja őket. A formátumról bővebben az XML-sitemap szószedeti szócikkünkben olvashatsz.

Mely technikai részletek törik el leggyakrabban a Next.js SEO-t?

Ezek a problémák mind csökkentik a bejárhatóságot: a robotnak minden URL-t el kell tudnia érnie linkeken keresztül, és tiszta státuszkódot kell kapnia.

Hogyan adhatsz strukturált adatokat egy Next.js oldalhoz?

A Next.js dokumentációja azt javasolja, hogy a JSON-LD-t application/ld+json típusú script-címkeként rendereld közvetlenül az oldal vagy a layout komponensében, az oldallal azonos adatokból építve, és a sorosított JSON-ban escape-eld a < karaktert, hogy megelőzd a befecskendezést. Mivel a szerveren renderelődik, a Google és az AI-robotok is látják a nyers HTML-ben. Cikkekhez használj Article (vagy BlogPosting) típust, a gyökérlayoutban Organization-t, mély oldalaknál BreadcrumbList-et, webáruházaknál pedig Product-ot. A sémagenerátor érvényes kiindulópontot ad, utána a Google Rich Results Test eszközével ellenőrizd az oldalt.

Hogyan teheted elég gyorssá a Next.js oldalt a Core Web Vitals-hoz?

A Next.js olyan komponenseket szállít, amelyek kezelik a gyenge Core Web Vitals szokásos okait:

• next/image: átméretezi a képeket, modern formátumokat szolgál ki, alapértelmezetten lusta betöltést alkalmaz, és megköveteli a méreteket, ami megakadályozza az elrendezés-eltolódást. A hajtás feletti fő képet jelöld prioritásként, hogy ne legyen lusta betöltésű (általában ez a Largest Contentful Paint elem).
• next/font: saját szerverről szolgálja ki a betűtípusokat, és elkerüli az elrendezés-eltolódást, amelyet a későn cserélt betűtípusok okoznak.
• next/script: a harmadik féltől származó szkripteket stratégiával tölti be (afterInteractive, lazyOnload), ahelyett hogy blokkolná az oldalt.
• Kevesebb kliensoldali JavaScript: minden 'use client' határ újabb letöltendő és hidratálandó kódot ad, ami mobilon terheli az Interaction to Next Paint mutatót.

Valós felhasználói adatot mérj, ne csak laboratóriumi pontszámot: a PageSpeed Insights útmutatónk megmutatja, hogyan olvasd mindkettőt.

Hogyan futtass rangsoroló blogot Next.js-en?

Egy Next.js blog általában három formában létezik: MDX vagy Markdown fájlok a repositoryban (egyszerű, de minden poszthoz commit és telepítés kell), egy headless CMS (Sanity, Contentful, Strapi, Payload), amelyet Server Components-ben kérdezel le, vagy egy publikáló webhook, amely egy külső eszköztől fogadja a cikkeket. Mindhárom esetben az SEO-minta ugyanaz: egy dinamikus app/blog/[slug] útvonal generateStaticParams, generateMetadata és ISR beállítással, a sitemap ugyanabból a forrásból táplálva, és egy indexoldal, amely minden posztra linkel.

A webhook-minta kiveszi a publikálást a telepítési ciklusból. Egy Route Handler fogadja a cikket, elmenti, majd újravalidálja az érintett oldalakat:

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

Hogyan segít a Next.js SEO abban, hogy az AI-asszisztensek idézzenek?

A szerveroldali renderelés a GEO (generatív motoroptimalizálás) első feltétele. A Vercel 2024. decemberi elemzése, a Az AI-robotok felemelkedése megállapította, hogy „a nagy AI-robotok közül egyik sem renderel jelenleg JavaScriptet”, név szerint a GPTBotot, a ChatGPT-Usert, az OAI-SearchBotot, a ClaudeBotot és a PerplexityBotot említette, és egy hónap alatt 569 millió GPTBot-lekérést és 370 millió Claude-lekérést számolt a hálózatán. Egy Next.js oldal, amely előre rendereli a szövegét, a fejléceit és a JSON-LD-jét, mindegyikük számára olvasható; egy kliensoldalon renderelt oldal nem.

A második feltétel az idézésre érdemes tartalom: olyan cikkek, amelyek szakaszonként egy kérdésre válaszolnak, forrásokkal, adatokkal és világos definíciókkal, rendszeresen publikálva. Ezt a részt automatizálja a Sorank, a termékünk. A Sorank autopilot SEO- és GEO-szoftver: megtalálja a kulcsszavaidat, a blogcikk-generátora pedig havi 20, 60 vagy 120 cikket ír forrásokkal, belső linkekkel és képekkel. Egy Next.js oldalhoz az telepítési oldalon leírt egyéni webhookon keresztül csatlakozik: a Route Handler fogadja minden cikket, elmenti, és újravalidálja a blogot. Az AI-említések követése ezután havonta ellenőrzi, hogy a ChatGPT, a Claude és a Gemini idézi-e a márkádat.

A lényeg röviden: renderelj előre minden olyan oldalt, amelyet meg akarsz találni, határozd meg a metaadatokat a szerveren, és a sitemapet ugyanabból a forrásból táplálod, mint a tartalmat. A Next.js megadja az eszközöket; a rangsorolás és az AI-idézések abból jönnek, amit ezekkel publikálsz. Hogy a Next.js-es blogod folyamatosan kapjon cikkeket, nézd meg a Sorank csomagjait, havi $49-tól, 3 napos ingyenes próbaidőszakkal.