XPath használata, AdOps trükkök

Csentes Zoltán    2018-02-02

A korábban bemutatott AdOps eszközökhöz hasonlóan, most is egy elég érdekes dologról lesz szó. Pontosabban az XPath programnyelvről és arról, hogy ezt mire tudja használni egy AdOps vagy SEO szaki.

Mi az XPath?

Az XPath egy viszonylag egyszerű 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.

Mielőtt belevágunk, kedvcsinálónak íme néhány dolog amire használhatjuk:

  • 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

Az alapok

Az XPath egy fa szerkezetként látja a weboldalt. A fa gyökere a <html>, majd jön a <body>, azon belül pedig a <div>, <h2> és <p> elemek. Az elemeken belül pedig jön a tartalom valahogy így:

Ha tehát az 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. Ezzel a paranccsal listázhatjuk az ad-ops.hu főoldalán található utolsó 10 cikk címét:

//h2/a

Így pedig listázhatjuk a címekhez tartozó url-t:

//h2/a/@href

De mielőtt jobban bele mennénk megmutatom hogyan tudod ezt tesztelni.


XPath eszközök

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.

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.

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

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:


var headings = document.evaluate('//h2/a', document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();
var alertText = 'A 10 legújabb blog bejegyzés:\n'
while (thisHeading) {
 alertText += thisHeading.textContent + '\n';
 thisHeading = headings.iterateNext();
}
console.log(alertText);

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

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 konkrét példát.


Egy Spreadsheet, ami a top 10 oldalt listázza egy kulcsszóra

A feladat egy olyan google spreadsheet készítése, ami az "adops" kulcsszóra kigyűjti az aktuális top 10 google találatot. A feladat végtelenül egyszerű, írd be ezt a spreadsheet A1 cellájába:


=ImportXML("https://www.google.hu/search?q=adops&source=lnt&tbs=ctr:countryHU&cr=countryHU","//h3")

És íme az eredmény:

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 google keresési találatát, továbbá XPath segítségével megadtuk, hogy csak a "h3" elemeket listázza ki.


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

Mindezt pedig ugyanúgy behúzhatjuk egy rendszeresen frissülő spreadsheetbe és akkor mindig lesz egy aktuális friss listánk az itt megjelenőkről.

Az XPath használatával nem csak a napi SEO munkánkat tudjuk megtámogatni, hanem akár a konkurencia figyelésben is hasznos lehet. Amikor az Exreme Digitalnál dolgoztam, volt egy kimondottan a versenytársak árait figyelő script, 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.


A leggyakrabban használt Xpath parancsok

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


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

Megosztani ér:


Mennyire volt hasznos számodra a cikk?

Értékelések száma: 2
Átlagos értékelés : 4.5

Kíváncsi vagyok a véleményedre is: