×

XPath használata SEO területen

Csentes Zoltán    2019-08-08

Főoldal >  SEO Blog

Csentes Zoltán, SEO szakértő
Csentes Zoltán, SEO szakértő

Az elmúlt 20 évben az online marketing minden területén megfordultam, minden hárombetűs területet kipróbáltam, végül a keresőoptimalizálás és webanalitika szakértője lettem.

Az XPath hasonlóan a korábban bemutatott eszközökhöz, szintén egy elég érdekes területe az AdOpsnak. Viszont ez a programnyelv nem csak ott, hanem a SEO területén is igen hasznos funkciókat nyújthat. Ebben a posztban megismerkedünk az XPath működésével, és konkrét példákon keresztül bemutatom mire is tudja használni egy SEO szakértő, vagy AdOps szakember.

Mi az XPath?

Az XPath egy viszonylag egyszerű, úgynevezett lekérdező programnyelv, amit a webben történő "turkálásra" terveztek. Segítségével egy adott XML vagy HTML forrásból a nekünk kellő elemeket, értékeket tudjuk kinyerni. Hasonlóan működik, mint a CSS Selector, csak ez többet tud. Az XPath segítségével nem csak az oldal struktúráján tudunk végigmenni, hanem az oldalon található szövegeken is.

Mire használható az XPath?

A teljesség igyénye nélkül lássunk néhány példát, amire SEO-ban használni tudjuk ezt a programnyelvet:

  • feltérképezhetjük egy weboldal sitemapjét és kigyűjthetjük csak a linkeket
  • végigmehetünk egy webáruház összes termékén és listázhatjuk az összes terméket árral
  • kigyűjthetjük megadott weboldalak meta tagjeit
  • kigyűjthetjük google keresőből a kulcsszóra éppen aktuális top találatokat
  • kigyűjthetjük az email címeket egy weboldalról

Hogyan működik az XPath

Amikor az XPath ránéz egy weboldal forráskódjára, akkor egy fa szerkezetet lát. A fa gyökere a <HTML>, majd jön a <HEAD>, <BODY>, és azon belül pedig a <DIV>, <H1-2-3...h2> és a <p> elemek. Az elemeken belül pedig jön a tartalom.

Ha tehát egy adott oldal címét szeretnénk kinyerni, akkor ezt az XPath parancsot kell használnunk:

/html/head/title

De ugyanezt érhetjük el ha azt mondjuk, hogy listázzon minden olyan elemet ahol az elem neve "title", mivel az oldalban úgyis csak egy ilyen elemünk van:

//title

Most bonyolítsuk egy kicsit. Tegyük fel, hogy a MOZ.com/blog oldalból szeretnénk listázni az első oldalon lévő posztok címeit:

//h2/a

Ha pedig csak az URL-ekre vagyunk kíváncsiak, akkor ezt a parancsot kell használnunk:

//h2/a/@href

Most, hogy látod milyen egyszerű az XPath használata, ismerkedjünk meg kicsit jobban az XPath eszközökkel, hogy ki is tudd próbálni.

XPath eszközök

Az interneten rengeteg online tool érhető el, ami ezt a programnyelvet használja: XPath tester, XPath online editor, XPath scraper, finder és még sok más. Ezek közül amit én nagyon sokszor használok az XPath scraper böngésző bővítmény.

Telepítsük fel a következő bővítményeket Chromeba. Mindkét kiegészítő hasznos a számunkra. Az XPath Helper egy layert tesz az oldalra amiben szabadon tesztelhetjük az XPath parancsunkat az adott oldalon.

xpath helper teszt

xpath helper teszt

A Scraperrel pedig ha az oldal bármelyik elemén (mondjuk a posztokon) jobb klikket nyomunk, akkor megjelenik a "Scrape similar..." menüpont, amivel kigyűjthetjük az oldalról a hasonló elemeket.

xpath scraper 1

xpath scraper 1

Ha például a blog posztjaira és azok linkjére vagyok kíváncsi akkor így:

xpath scraper 2

xpath scraper 2

A teszteléshez az egyik legjobb eszköz a Google Developer Tools, amit az F12-vel tudsz előhívni. Ezzel a kódsorral például a legfrissebb poszt neveket gyűjtöttem ki:

See the Pen MOZ top10 blog title by Csentes Zoltán (@csenty) on CodePen.

Az eredmény pedig a console-ban így néz ki:

xpath google dev-tool

xpath google dev-tool

Egy érdekesség még a consol-hoz: ha az XPath kódot ebben a formában írod be a consolba, akkor könnyedén végre tudsz hajtani bármilyen parancsot:

	$x("/html/head/ title/text()")	

Most, hogy megismerkedtünk az alapvető dolgokkal, nézzünk néhány érdekes példát.

Google Top 10 találat listázása

Tegyük fel, hogy szeretnénk kilistázni a Google SERP első oldalán megjelenő találatokat egy adott kulcsszóra. Keressünk rá a kulcsszóra, F12 és a Console-ba írjuk be ezt:

See the Pen Google Top 10 results by Csentes Zoltán (@csenty) on CodePen.

XPath használata Google Spreadsheetben

A feladat egy olyan Google táblázat készítése, ami a versenytársaink blogjából listázza a legújabb posztokat. A táblázatot és a benne lévő képleteket itt tudod megnézni: XPath táblázatban.

Ha csak az eredményre vagy kíváncsi íme:

ImportXML használata google spreadsheet-ben

ImportXML használata google spreadsheet-ben

Mi is történt itt. A spreadsheetnek van egy ImportXML függvénye, amivel komplett XML-eket tudunk behúzni. Esetünkben itt annyit módosítottunk, hogy nem XML fájlt adtunk meg, hanem a céloldalt, továbbá XPath segítségével megadtuk, hogy mely elemeket listázza.

Listázzuk ki a lap.hu keresőmarketing dobozának tartalmát

Ehhez a legegyszerűbb, ha használjuk a Scraper bővítményt. Keressük meg a dobozt és jobb klikkel válasszuk ki az első elemet. Rögtön meg is kapjuk, hogy mi az XPath parancs, ami ezeket kilistázza:

//div[3]/div[9] /div/a

Most indítsuk el az XPath Helper kiegészítőt és írjuk be ezt a query részbe. És voilá! A results részben a lista a megjelenő cégekről. Ha linket is szeretnénk látni, akkor az XPath részt így módosítsuk:

//div[3]/div[9]/ div/a/@href

Az XPath használatával nem csak a napi SEO munkánkat tudjuk megtámogatni, hanem mint láthattuk a konkurencia figyelésben is hasznos lehet. Amikor az Edigitalnál dolgoztam, volt egy kimondottan a versenytársak árait figyelő scriptünk, ami ugyanezen az elven működött. Részben ennek is köszönhette a cég, hogy az árakkal mindig sikerült a versenytársak alá menni, és mára az ország legnagyobb webshopja lett.

Hasznos Xpath parancsok

Végül összegyűjtöttem a legfontosabb Xpath parancsokat, amiket a leggyakrabban használunk:

	//*[@class='classname'] - Azokat az elemeket listázza, amik a classname class-t használják	//*[@class='r']/a/@href - Azokat a linkeket listázza, amik 'r' classban vannak	//comment() - csak a kommenteket listázza	//text() - csak a szöveges tartalmat listázza	//* - minden elemet listáz kivéve a comment és text elemeket	//p/text() - minden p elemen belüli szöveget listáz	//li[position() = 1] - csak az első li elemet listázza	//li[last()] - csak az utolsó li elemet listázza	//li[position()%2=0] - csak a páros li elemeket listázza	//li[a or h2] - azokat a li elemeket listázza amik tartalmaznak vagy a-t vagy h2-t	//li[ a [ text() = "link" ] ] - li elemeket listáz amik a elemet tartalmaznak aminek a szövege "link"	//a | //h2 - listázza mindkét elemet	//a/@href - az összes link url-t listázza	//a[starts-with(@href, "https")] - csak a https linkeket adja vissza	

Hasznosnak találtad? Oszd meg mással is:

Nézz körül SEO / PPC és Analitika ajánlataink között!

Havidíjas SEO és PPC ajánlatok Kis- és Középvállalkozások számára.

HAVIDÍJAS SEO AJÁNLATOK    PPC AJÁNLATOK    GA4 ANALITIKA BEÁLLÍTÁS

Iratkozz fel hírlevelünkre!

A hírlevélre feliratkozóknak heti rendszerességgel küldjük meg a legfrissebb SEO híreket, cikkeket és újdonságokat.