Optymalizacja: kreatywnie chowamy linki przed użytkownikiem

Tym wpisem chciałbym zacząć cykl artykułów na temat optymalizacji stron. Nie będę nawet ruszał takich tematów jak „długość title” czy „sensowność stosowania meta-keyword„. Chodzi raczej o wykorzystanie dostępnych technologii do poprawienia przepływu PageRank na stronie internetowej co może (powinno) skutkować pośrednio lub bezpośrednio większym ruchem na stronie z wyszukiwarki Google.

Wyobraźmy sobie stronę która swoje usługi kieruje do różnych miast Polski. Mamy stronę główną – „niezlokalizowaną” oraz 16 linków do stron zlokalizowanych. Jak zaprezentować te linki użytkownikowi w taki sposób aby jednocześnie zadowolić użytkownika i GoogleBoty?

miastaNajprościej będzie po prostu wrzucić 16 linków jeden pod drugim, tak jak na obrazku z boku. Najlepiej jeszcze dać te linki gdzieś w dole strony, żeby nie przeszkadzały użytkownikowi w nawigowaniu strony. (ironia!)

Druga opcja wymagająca trochę więcej wysiłku, to stworzenie z pomocą CSS pojawiającego się po najechaniu/kliknięciu dymku w którym znajdować się będą linki. W przypadku 16 linków dymek będzie trochę duży ale do zaakceptowania. Gdy linków pojawi się na przykład 100… powodzenia :-)

Trzecia opcja jest Wam zapewne znana. Widzieliście ją pewnie nie raz, ale obstawiam, że mało kto pomyślał aby można było ten mechanizm wykorzystać przy optymalizacji.

Google-Analytics-menu

Gdyby ktoś nie widział, jest to pole dostępne podczas tworzenia nowego kodu śledzącego Google Analytics. Samo pole nie jest niestety w ogóle przystosowane pod SEO (bo i po co).

It’s some kind of magic

Krótkie wyjaśnienie powyższego kodu:

  • WyborMiasta – ot coś co będzie nam trzymało całość.
  • AktualneMiasto – div w którym wyświetlamy aktualnie przeglądane miasto.
  • <a href… – To link ze stylem display:block na cały div AktualneMiasto. Kliknięcie w ten link prowadzi do wyświetlenia diva ListaAlternatywnychMiast w którym znajduje się lista linków do innych miast.
  • <p> – Jakiś tekst.
  • <h1> – Nazwa aktualnie przeglądanego miasta.

Kolejną sekcję omówiłem już tak naprawdę przy linku.

Co nam da takie rozwiązanie? Z punktu widzenia SEO, nie jest ono idealne. Nie mamy szczególnie dużej kontroli nad przepływem PageRanku poprzez te linki. Czasem jednak jest to najlepsze wyjście aby pogodzić „widzimisię” webmastera/UXa z wymaganiami SEO. Weźcie pod uwagę, że kod wklejony powyżej zajmuje tutaj kilkanaście linijek. Po wyrenderowaniu strony będą to w porywach 3 słowa za którymi kryje się 16 linków.

deal-with-it
A co w przypadku gdy chcemy dodać 32 linki, albo 64 albo nawet 1000? Jako, że dymek pojawiać się będzie za pomocą JavaScriptowej akcji, nic nie stoi na przeszkodzie aby dodać jeszcze trochę JavaScriptu lub jQuery. Możemy sobie na przykład w takim dymku dodać paginację. Nie chcemy paginacji? To dodajemy funkcjonalność dynamicznego doładowywania danych przy scrollowaniu. Nikt nie każe nam upychać w kodzie wszystkich dziesiątek linków. Część z nich może pokazać się dopiero po wyraźnym wskazaniu przez użytkownika.

Pamiętajcie, że dymek musi zostać tak ostylowany, aby po wyłączeniu JavaScript bez problemu pojawiał się on w widocznej części strony! Przede wszystkim div wraz z całą zawartością musi mieć ustawiony selektor display:block;. Ogólna zasada jest prosta – rzeczy do których może dostać się użytkownik, powinny być osiągalne przez GoogleBoty.

Na tą chwilę tyle. Do tematu na 100% jeszcze wrócę! Zapraszam do dyskusji. Podzielcie się przykładami gdzie już zastosowaliście/widzieliście podobne rozwiązanie.