Hogyan működik a saját SEO Ellenőrző eszközöm?

Az SEO (Keresőoptimalizálás) elemzése gyakran bonyolult és drága eszközöket igényel. Ebben a bejegyzésben megmutatom, hogyan készítettem el egy saját, villámgyors és privát SEO ellenőrző eszközt, amelynek elemzése a böngésződben fut.

A legnagyobb kihívás: A CORS probléma

Amikor egy böngészőből próbálunk lekérni egy másik weboldalt (például a fetch() függvénnyel), a böngésző biztonsági okokból letiltja azt, ha a céloldal nem engedélyezi kifejezetten a hozzáférést (ez a Cross-Origin Resource Sharing). Ezt a problémát egy saját, szerveroldali lekérő végponttal hidaltam át.

Az eszköz a megadott URL-t a saját /api/page-fetch végpontomnak küldi el. A szerver lekéri az oldal nyilvános HTML-jét, és visszaadja a böngészőnek. A végpont szigorúan védett: csak nyilvános címeket enged (SSRF védelem), és korlátozza a válasz méretét, az időt és a kérések számát.

// Így kérjük le a nyers HTML-t
const response = await fetch("/api/page-fetch", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ url: targetUrl }),
});
const { html } = await response.json();

A HTML feldolgozása DOMParser-rel

Miután megvan a nyers szöveges HTML, azt valahogy értelmezni kell. Ahelyett, hogy bonyolult reguláris kifejezésekkel (RegEx) próbálnám kibányászni az adatokat, a beépített DOMParser API-t használom. Ez létrehoz egy virtuális dokumentum fát, amin éppen úgy navigálhatok, mint a valódi weboldalon a document.querySelector segítségével.

const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");

// Adatok kinyerése
const title = doc.querySelector("title")?.textContent;
const description = doc.querySelector('meta[name="description"]')?.getAttribute("content");
const h1Count = doc.querySelectorAll("h1").length;

Mit ellenőriz az audit?

Az eszköz jelenleg a következő kritikus SEO faktorokat vizsgálja:

• ✅ Meta adatok: Megvan-e a Title és a Description?
• ✅ Címsor struktúra: Pontosan egy H1 van az oldalon? Megfelelő a H2-H6 hierarchia?
• ✅ Képek optimalizálása: Minden kép rendelkezik-e alt szöveggel az akadálymentességhez?
• ✅ Technikai tagek: Be van-e állítva a viewport mobilbarát nézethez és a charset a karakterkódoláshoz?
• ✅ Canonical URL: Jelölve van-e az eredeti tartalom forrása?
• ✅ Linkek: Hány belső és külső link található az oldalon?

Személyes és Biztonságos

Az elemzés a böngésződben fut: a szerver csak a megadott oldal nyilvános HTML-jét kéri le, és semmit nem ment el a kereséseidről. Ez a "Lab Tech" filozófiám lényege: erőteljes eszközök, amelyek tiszteletben tartják a magánéletet.

Próbáld ki te is az eszközt a Labor részlegben, és nézd meg, hogyan teljesít a saját weboldalad!