Pro analýzu struktury webu jde částečně použít soubor sitemap, který může dát poměrně dobrou představu o struktuře, pokud je zachycena v URL (např. /osobni-automobily/yeti - lze předpokládat, že je zde nějaká sekce osobni-automobily). Hlavním problémem je však to, že zde zachycená struktura nemusí odpovídat skutečnosti. Pokud budeme mít například nějakou osamělou sekci, kam nevedou žádné odkazy, tak v sitemapě bude uvedena, ale lidé ani vyhledávače se k ní neproklikají. Lepším způsobem je analýza reálného stavu, kde projdeme všechny odkazy a zjistíme jak jsou provázané. Zjistíme také, jak jsou některé sekce reálně hluboko ve struktuře webu - např. že z hlavní stránky jde odkaz na náš seriál článků, který je reálně až na sté stránce.
Čeká nás několik úkolů:
- získat seznam propojení
- vyčištění seznamu od cyklů a nalezení nejkratších cest
- vizualizace do myšlenkové mapy
Abychom to zvládli, budeme potřebovat vhodné nástroje:
- Xenu Link Sleuth (Wild)
- Plaintextový editor (preferuji PSPad)
- GraphViz
- Xmind
- plus pomocníky z tools.lynt.cz
Programátoři mohou část programů nahradit za scrapy, který využíváme v některých našich interních nástrojích.
Získání seznamu odkazů
Analýzu provedeme na našem webu lynt.cz. Použijeme nástroj Xenu Wild, který oproti normální verzi umožňuje nadefinování částí URL, která bude přeskakovat.
Pro tuto analýzu nás nezajímají obrázky, javascripty, css, soubory ke stažení, jiné protokoly než http, proto je vyjmeme pomocí "Do not check any URsL with this:"
- *.jpg
- *.jpeg
- *.png
- *.gif
- *.css*
- *.js*
- *.xml
- *.zip
- *.rar
- mailto:*
- tel:*
- geo:*
Až Xenu dokončí práci, tak můžeme výsledek exportovat do GraphViz formátu (jazyk DOT): File - Export to GraphViz file...
Výsledný soubor bude vypadat nějak takto:
digraph G
{
"/" -> "kontakty";
"infrastruktura" -> "kontakty";
"web" -> "kontakty";
...
Výsledný soubor však obsahuje mnoho cyklů, takže výsledný graf bude velmi nepřehledný. Můžeme se pokusit jej vizualizovat pomocí příkazu dot ve složce GraphVizu (u mě v: c:\Program Files (x86)\Graphviz2.38\bin).
dot -Tpng -o x:\out1.png x:\lynt.gv
Příkazem říkáme, že chceme exportovat výsledek ve formátu PNG , máme je zapsat do souboru x:\out1.png a soubor ke zpracování je x:\lynt.gv - výsledkem je ohromné (15MB) PNG. Pro zájemce je celé k prohlédnutí zde (podařilo se mi ho zkomprimovat na 5MB).
Pokud bychom chtěli tento seznam zobrazit lépe, mohli bychom použít nástroj Gephi, o kterém se budeme bavit v některém dalším článku, kde ho budeme používat hlavně na zkoumání vztahů mezi stránkami. Pokud chceme zjistit jaké stránky jsou na analyzovaném webu nejlinkovanější (budou to ty z menu, ale je možné je odfiltrovat), můžeme ho použít i pro účely analýzy jednoho webu. Výsledek může být například takový:
Odstranění smyček
Dalším krokem je tedy odstranění smyček. To provedeme pomocí Dijkstrova algoritmu pro hledání nejkratších cest (určitě by se našly lepší algoritmy pro tento účel, ale dijkstra je přímo v GraphVizu, tak ji využijeme).
Na anglické wikipedii jsem nalezl pěknou animaci, jak algoritmus funguje:
Podrobnější příklad najdete v prezentaci:
Před použitím algoritmu je vhodné si zdrojový soubor trochu upravit. Soubor je zpracováván řádek po řádku a není rozlišováno, co je opravdu začátek. Proto musí být hlavní stránka jako první spoj v našem seznamu. Většinou je nejvýhodnější ze souboru jednoduše odstranit první blok spojení, které ukazují zpět na hlavní stránku. Pokud bychom to neudělali, tak by se nic vážného nestalo, jen by náš graf nemusel začínat hlavní stránkou.
Po úpravách již můžeme použít příkaz dijkstra:
dijkstra.exe "/" x:\lynt.gv > x:\lynt2.gv
Říkáme mu, z jakého node má počítat vzdálenost, co je zdrojový soubor a kam uložit výsledek.
Ve výsledném souboru jsou nejkratší cesty do jednotlivých bodů označeny anotací [dist=x.000]:
Spojení, které tuto anotaci nemají nás nezajímají a je třeba je odstranit. Pokud to nechceme dělat ručně, je možné použít náš nástroj - odstranění nodů bez distance. Výsledný vyčištěný kód si překopírujeme do nového souboru.
Vizualizace grafu
Vyčištěný soubor si opět zobrazíme pomocí příkazu dot:
dot -Tpng -o x:\out2.png x:\lynt3.gv
GraphViz má k dispozici i další renderovací nástroje jako je neato nebo circo, které se liší výsledným rozložením grafu. Pokud použijeme neato, je vhodné doplnit parametr overlap=false, který zabrání překryvu jednotlivých nodů.
neato -Goverlap=false -Tpng -o x:\out3.png x:\lynt3.gv
Oficiální dokumentace k příkazům:
Vizualizace v mindmapě
Abychom mohli soubor zobrazit v software pro tvorbu myšlenkových map, je třeba jej převést do jiného formátu. Rozšířené nástroje pro mindmapy jsou především Xmind a FreeMind. Osobně nejvíce pracuji v Xmind, protože má více možností jak s mapou pracovat, nicméně jeho firmát je poměrně složitý. Formát FreeMind je však velmi jednoduché XML. Dobrá zpráva je, že Xmind umí soubory z FreeMind (.mm) číst.
Ukázka formátu FreeMind:
Úkolem je tedy převést seznam spojení do hierarchie v tomto formátu. K tomu použijeme rekurzivní funkci, která nám k jednotlivým node najde podřízené a pro ně udělá to samé. Opět k tomu máme dostupný nástroj - DOT na FreeMind XML.
Výsledný kód si zkopírujeme a uložíme do souboru s koncovkou .mm.
Nyní už stačí tento soubor importovat do programu Xmind a můžeme se strukturou dále pracovat.
V myšlenkové mapě si všimněte, že některé podstránky jsou "špatně" zařazené - u nás jsou například články z blogu pod sekcí kontakty. Je to proto, že v sidebaru máme výpis nejnovějších článků a Disjikstrův algoritmus našel dříve tyto odkazy než odkazy ze sekce blog. Toto chybné zobrazení však může být žádoucí, protože vidíme, jak reálnou hloubku položek ve struktuře tak, jak ji vidí vyhledávače i návštěvníci.
Všechny zdrojové soubory si můžete stáhnout na GitHubu.
