Mapa strony – kiedyś było łatwiej…

Zapewne wiele osób powie, że to już dawno i nieprawda. Faktem jest, że kiedyś plik z opisem struktury strony (sitemap) miał spore znaczenie w kwestii pozycjonowania strony w wynikach wyszukiwarek. Stanowiła niejako element nawigacji i była tym, czym spis treści jest dla książki.

Rozróżnia się dwa rodzaje map stron, jeden to czytelna dla użytkownika i często ostylowana strona z listą podstron. Drugi natomiast to plik xml, zrozumiały dla informatyków i robotów internetowych, zawierający jednak dokładnie te same informacje.

Czasy się trochę zmieniły i dzisiaj trzeba się bardziej postarać by wujek google przyznał nowe punkty dla Gryffindoru (ba-dum tss…). W ocenie strony mocne kryterium stanowi treść strony i zainteresowanie (ruch) jakie wzbudza strona jako całość. Nie jestem ekspertem od SEO ale tyle kiedyś słyszałem od szwagra, więc musi być w tym ziarno prawdy.

I mógłbym żyć szczęśliwie z tą wiedzą lub bez niej, gdyby nie klienci. Parafrazując jednego z moich dawnych wykładowców:

„Uczelnia działałaby perfekcyjnie, gdyby nie ci przeklęci studenci!”

Takie też utrzymuję zdanie na temat wielu zleceń z dziedziny IT, przy czym studenci mi nie wadzą, ale niektórzy klienci owszem. Oczywiście wszystko w żartach!

Na poważnie, realizując zlecenie dla pewnej firmy w wymaganiach absolutnych pojawiło się zadbanie o to by strona zawierała mapę strony. Łatwe, pomyślałem niewiele właściwie myśląc…

Pierwsza myśl, po skończeniu strony wrzucamy ją w automatyczny generator, od których aż robi się w sieci. Całe pokolenia tak robiły przede mną, prawda? Przeszkodą okazały się dwie rzeczy. Po pierwsze strona do czasu odpalenia jej przez zamawiająca firmę była utrzymywana w tajemnicy, pod hasłem więc żadna zewnętrzna strona generatora nie mogła jej zbadać. Oczywiście można przecież na chwilę zdjąć hasło, nikt się przecież nie połapie a fajrant zając, ucieknie. 🙂

Ale pomyślałem, że zamiast działać niezgodnie z klientem, mogę przecież na pewno ściągnąć program na pulpit, który zrobi co trzeba na lokalnej wersji strony (czyli na mojej maszynie deweloperskiej). Pierwszych kilka programików zdawało się nie działać, inne generowały pusty plik. W końcu jeden z nich zadziałał, pomimo interfejsu z lat 30. XX wieku. Nic z tego jak się okazuje!

Moja strona to zasadniczo aplikacja złożona z jednej strony i wielu widoków. Single Page Application, angular i wszystko jasne. Cała nawigacja pomiędzy podstronami sterowana przez tę bibliotekę sprawiła, że na stronie nie ma ani jednego „naturalnego” linka…


<a href="/inna_podstrona">naturalny link</a>

Oczywistością zdaje się, że aplikacje sprzed ery angulara i SPA nie będą wiedziały jak się za to zabrać. Gdzieś z tyłu głowy korciło już żeby napisać samemu jakieś szybkie rozwiązanie, jakiś podstawowy crawler. Szukałem jednak wytrwale i znalazłem, pomiędzy wieloma porzuconymi lub nie działającymi projektami:

https://www.npmjs.com/package/phantomjs-sitemap-generator

To co prawda moduł do Node, ale jego obsługa jest banalnie prosta. Cały projekt i tak był składany przy użyciu npm, więc po dodaniu do paczki mogłem używać do woli w późniejszych etapach tworzenia strony. Zgodnie z instrukcją autora tworzymy dowolny plik js (np. sitemap.js) :


var PSG = require("phantomjs-sitemap-generator");
var p = new PSG( 'http://www.nasza-strona.pl', { verbose: true } );
p.crawl();

Następnie w linii komend uruchamiamy NodeJS z naszym plikiem, a wynik działania wrzucamy do pliku. Zrobione!

$ node sitemap.js > sitemap.xml

Opisywany moduł doskonale poradził sobie z faktem, że obsługiwana strona to angularowa aplikacja i wygenerował perfekcyjną, klasyczna sitemapę. Ten wpis ma służyć innym szukającym prostego rozwiązania tego banalnego problemu, jak i mi samemu, gdybym kiedyś zapomniał i szukał od nowa. 🙂