Astro SEO: hogyan rangsoroljon egy Astro oldal a Google-ben és kerüljön be az AI-válaszokba

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

Az Astro SEO annak a munkának a neve, amellyel ezt a tiszta HTML-t olyan oldalakká alakítod, amelyek rangsorolnak. A Google saját JavaScript SEO alapjai útmutatója szerint a JavaScript-oldalakat három fázisban dolgozza fel (bejárás, renderelés, indexelés), és kimondja, hogy „a szerveroldali vagy előrenderelés továbbra is nagyszerű ötlet”, mert nem minden bot tud JavaScriptet futtatni. Az Astro alapértelmezetten ebből az állapotból indul. Ez az útmutató a többit tárgyalja, beállításonként, minden viselkedést a hivatalos Astro-dokumentációval ellenőrizve. Háttérinformációként: a sorank.com oldal, amelyet most olvasol, Astro-n fut.

Jó az Astro az SEO szempontjából?

Technikai szempontból igen. Az Astro a komponenseket build időben HTML-lé rendereli, és eltávolítja azt a JavaScriptet, amelyet olyan keretrendszerek, mint a React vagy a Vue, általában a böngészőnek küldenének. Ezzel elkerüli azokat a klasszikus problémákat, amelyeket a JavaScript SEO útmutatónk ír le: üres HTML-vázak, olyan tartalom, amely csak a renderelés után jelenik meg, olyan linkek, amelyek nem valódi horgony-elemek. Elkerüli a egyoldalas alkalmazások útválasztási csapdáit is, mert minden Astro-útvonal valódi URL, saját HTML-fájllal.

Az, amit az Astro nem csinál, ugyanilyen fontos. Nincs beépített SEO-bővítmény, nincs automatikus meta-leírás, nincs automatikus kanonikus címke és nincsenek strukturált adatok. Az alábbi táblázat elkülöníti, amit ingyen kapsz, attól, amit neked kell megépíteni.

Statikus vagy szerveroldali renderelés: melyik mód a legjobb SEO-hoz?

Az Astro kérésre renderelésről szóló dokumentációja egyértelmű: alapértelmezetten az oldalak, útvonalak és API-végpontok build időben statikus oldalakká renderelődnek. SEO szempontból a statikus kimenet a legbiztonságosabb alapértelmezés: minden URL egy kész HTML-fájl, amelyet CDN-ről szolgálnak ki, gyorsan, és minden látogatónak és botnak ugyanaz.

A kérésre (szerveroldali) renderelés egy adaptert igényel a hostodhoz (például Node, Netlify, Vercel vagy Cloudflare). Egyetlen útvonalat az export const prerender = false sorral vehetsz ki az előrenderelésből, vagy az egész projektet a output: 'server' beállítással szerveroldalira kapcsolhatod, a statikus oldalakat pedig visszakapcsolhatod. Mindkét mód teljes HTML-t ad, így a Google ugyanazt látja. A különbségek máshol vannak:

• Sebesség: egy statikus fájl azonnal kiszolgálódik; egy szerveroldalian renderelt oldal a szervered válaszidejétől függ, ami rontja a Largest Contentful Paint értéket.
• Frissesség: a szerveroldali renderelés azoknak az oldalaknak felel meg, amelyek folyamatosan változnak (készlet, árak, keresési eredmények), és ahol az egész oldal újraépítése túl lassú lenne.
• Eszközök: egyes integrációk, például az oldaltérkép, nem látják a dinamikus szerveroldali útvonalakat (lásd lentebb).

A gyakorlati szabály: a marketing oldalak, blogbejegyzések és dokumentáció maradjon statikus, és csak azokat az útvonalakat rendereld kérésre, amelyeknek élő adatra van szükségük. Az Astro dokumentációja ugyanezt javasolja: tartsd meg az alapértelmezett statikus módot, amíg az oldalaid nagy része nem igényel kérésre renderelést.

Hogyan állíts be meta-címkéket és kanonikus URL-eket Astro-ban?

Hozz létre egy SEO-komponenst (gyakran BaseHead vagy Seo néven), és illeszd be minden elrendezés fejrészébe. Kap egy címet, egy leírást, egy opcionális képet és egy opcionális noindex jelzőt, és ezeket adja ki:

1. a title címkét, oldalanként egyedit, a fő kulcsszóval a kezdet közelében;
2. a meta-leírást, oldalanként kézzel írva (ez a keresési találatod szövegrészlete);
3. a kanonikus címkét, amelyet az Astro.url.pathname és a konfiguráció site értéke alapján abszolút URL-ként építesz;
4. az Open Graph és közösségimédia-címkéket (cím, leírás, kép, URL) a linkek előnézetéhez;
5. robots meta címkét, ha egy oldalnak ki kell maradnia az indexből.

Először az astro.config.mjs fájlban állítsd be a site opciót: a kanonikus, az oldaltérkép és a közösségimédia-címkék mind erre épülnek. Ezután válassz egy trailingSlash szabályt ('always' vagy 'never'), és tartsd is meg, hogy a /blog/post és a /blog/post/ soha ne versenyezzen mint két változat ugyanarról az oldalról. A kanonikusból le kell vágni a lekérdezési paramétereket, hogy a követőparaméterek ne hozzanak létre duplikátumokat.

Hogyan készíts oldaltérképet és robots.txt-t Astro-val?

Használd a hivatalos integrációt, amelyet a @astrojs/sitemap oldalon dokumentáltak. Az npx astro add sitemap parancs telepíti, és hozzáadja a konfigurációdhoz. Szüksége van a site opcióra, és build időben egy sitemap-index.xml fájlt ír, amely számozott fájlokra mutat (sitemap-0.xml, nagy oldalaknál további fájlokkal). Minden fájl alapértelmezetten legfeljebb 45 000 bejegyzést tartalmaz, amelyet az entryLimit opció állít be. Ha még nem ismered a formátumot, a XML-oldaltérkép szószedeti bejegyzésünk elmagyarázza, mit kezd vele a Google.

Három beállítás számít SEO szempontjából:

• filter: egy függvény, amely minden oldal URL-jét megkapja; adj vissza false értéket a köszönőoldalakra, a belső keresésre, a piszkozatokra vagy bármire, aminek noindex jelzője van, hogy az oldaltérkép csak indexelhető URL-eket soroljon fel.
• i18n: a nyelvi mappáidat nyelvi kódokhoz rendeli, és minden bejegyzéshez hreflang alternatívákat ad.
• customPages: olyan URL-eket ad hozzá, amelyeket az integráció nem tud önmagától felfedezni.

A robots.txt-hez a legtöbb oldalon elég egy statikus fájl a public mappában. Ha a tartalom eltér a staging és az éles környezet között, generáld egy végpontból (src/pages/robots.txt.ts). Mindkét esetben adj hozzá egy Sitemap sort, amely a sitemap-index.xml fájlra mutat, és az indulás előtt tesztelj egy robots.txt ellenőrzővel. Ugyanez a végpont-technika llms.txt fájlt is előállíthat; ennek tartalmáról a llms.txt fájl telepítéséről szóló útmutatónk ír.

Hogyan kezeld a hreflangot és a többnyelvű oldalakat Astro-ban?

Az Astro beépített i18n-útválasztása az URL-oldalt kezeli. A konfigurációban megadod a defaultLocale értéket és a nyelvek listáját, és eldöntöd, hogy az alapértelmezett nyelv is kapjon-e előtagot (prefixDefaultLocale). Az olyan segédfüggvények, mint a getRelativeLocaleUrl, lokalizált linkeket építenek, az Astro.currentLocale pedig megmondja minden oldalnak, melyik nyelven van.

Az útválasztási útmutató nem tárgyalja a fejrészbe kerülő hreflang címkéket, ezért tervezd meg, hogy magad írod meg őket a SEO-komponensben: minden oldalhoz egy alternatív linket nyelvi változatonként, plusz egy x-default linket, mind abszolút URL-ként, és minden változatnak fel kell sorolnia az összes többit (visszalinkek). Ha ugyanabból a nyelvlistából generálod őket, mint az útválasztást, elkerülheted a leggyakoribb hibát: egy alternatívát, amely nem létező oldalra mutat. A logika néhány URL-en való ellenőrzéséhez a hreflang generátorunk egy oldalhoz a teljes címkekészletet kiadja. Ezután második jelzésként kapcsold be az oldaltérkép i18n opcióját.

Hogyan hatnak a képek és az szigetek a sebességre és a Core Web Vitals-ra?

A sebességben nyeri a legtöbbet az Astro, és ez a Core Web Vitals mutatókon látszik. Az Astro képekről szóló útmutatója az astro:assets Image komponensét írja le: optimalizálja a helyi képeket, átalakítja a formátumukat, lusta betöltést és aszinkron dekódolást ad, és a képméreteket kikövetkezteti, hogy elkerülje a Cumulative Layout Shift jelenséget. Az alt attribútum kötelező rajta, ami a képek SEO-jának egyik alapszabályát érvényesíti. A Picture komponens tovább megy: AVIF vagy WebP formátumot szolgál ki tartalék formátummal.

Két szokás teszi teljessé a képet. A optimalizálandó képeket az src mappában tartsd (a public mappa fájljait feldolgozás nélkül szolgálja ki). A főkép az oldal tetején ne legyen lusta betöltésű: adj neki eager betöltést, hogy ne lassítsa a Largest Contentful Paint értéket.

Az szigetarchitektúra tartja kontroll alatt a JavaScriptet. Egy komponens statikus HTML, amíg nem adsz hozzá kliens-direktívát: a client:load azonnal hidratálja, a client:idle akkor, amikor a böngésző szabad, a client:visible pedig csak akkor, amikor belép a látható részbe. A client:load fenntartása azokra az elemekre, amelyeknek azonnal reagálniuk kell (menü, kosár), a legegyszerűbb módja az Interaction to Next Paint védelmének. A szerveroldali szigetek (server:defer) lehetővé teszik, hogy egy személyre szabott blokk a gyorsítótárazott oldal után töltsön be, anélkül hogy lassítaná a fő tartalmat.

Hogyan adj strukturált adatokat egy Astro oldalhoz?

Az Astro-nak nincs sémafunkciója, így teljes kontrollod van. Építs egy JavaScript-objektumot minden oldaltípushoz (Article, Product, Organization, BreadcrumbList, FAQPage), és add ki egy application/ld+json típusú script-elemben a set:html direktívával, a JSON.stringify függvénnyel, hogy a JSON ne legyen escape-elve. A jelölés ugyanabból a frontmatter vagy gyűjteményi adatból származzon, mint a látható oldal, így a jelölés mindig egyezik azzal, amit a felhasználók látnak. Ez a Google sémajelölésre vonatkozó irányelveinek követelménye.

Egy új oldaltípus JSON-jának vázlatához az ingyenes sémagenerátorunk érvényes kiindulási blokkot ad, amelyet aztán sablonná alakítasz. A sablon minden módosítása után ellenőrizz néhány kiépített oldalt a Google Rich Results Test eszközével.

Hogyan kezeld az átirányításokat, amikor Astro-ra költözöl?

A WordPressről vagy Next.js-ről történő migráció a legkockázatosabb pillanat egy Astro oldal számára. Tarts meg minden URL-t, amelynek van forgalma vagy backlinkje, a többit pedig egyenként feleltesd meg a legközelebbi megfelelőjüknek állandó átirányításokkal, ahogy azt a SEO-átirányításokról szóló útmutatónk leírja.

Az Astro konfigurációja elfogad egy redirects objektumot, amely a régi útvonalakat az újakhoz rendeli. Szerveres adapterrel ezek valódi HTTP-átirányításokká válnak. Tisztán statikus buildnél az Astro ehelyett egy meta refresh címkét tartalmazó HTML-oldalt ír, amelyet a Google követ, de a szerveroldali 301-nél gyengébb jelzésnek tekint. Statikus oldalnál deklaráld az átirányításokat a hostod saját formátumában (_redirects fájl Netlify vagy Cloudflare Pages esetén, vercel.json fájl Vercel esetén), hogy a bejárók valódi 301-et kapjanak.

Hogyan segít az Astro az SEO-ban és a GEO-ban?

Ahhoz, hogy a ChatGPT, a Perplexity vagy a Gemini idézzen, az oldalnak olvashatónak kell lennie. Sok AI-bejáró a nyers HTML-t tölti le, és nem futtat JavaScriptet, így az a oldal, amely az első válaszban már a teljes szöveget küldi, mint alapértelmezetten az Astro, olyan akadályt szüntet meg, amellyel a kliensoldalon renderelt oldalak még küzdenek. A tiszta címsorok, a válaszközpontú bekezdések, a strukturált adatok és egy llms.txt fájl pedig könnyebben idézhetővé teszi minden oldalt.

Indulás után mérj, ne találgass. A Sorank GEO- és SEO-irányítópult összehozza a Search Console adataidat és az AI-asszisztensektől érkező látogatásaidat, így látod, hogy az új oldal megtartja-e a pozícióit.

A technikai minőség csak tartalommal hozza meg a gyümölcsét. A Sorank AI-blogcikk-generátora a Google-re és az AI-asszisztensekre optimalizált cikkeket ír és publikál, és egy egyedi oldalhoz, például egy Astro-projekthez webhookon keresztül kapcsolódik.

Az Astro alapértelmezetten bejárható, gyors HTML-t ad; a rangsorolás továbbra is attól függ, milyen fejléc-címkéket, oldaltérképet, hreflangot, strukturált adatokat és átirányításokat adsz hozzá. Állítsd be először a közös SEO-komponenst és az oldaltérképet, majd indulás előtt dolgozd végig a fenti táblázatot.