Szukaj

Czy JavaScript uniemożliwia pozycjonowanie?

Na to pytanie nie ma niestety prostej odpowiedzi. Im jest go na stronie więcej tym trudniej, zwłaszcza kiedy zawartość strony generowana jest dynamicznie. Zacznijmy jednak od krótkiego przedstawienia technologii, która zrewolucjonizowała wygląd stron internetowych dając podstawy serwisom WEB 2.0

JavaScript (JS) – jest po prostu kolejnym językiem programowania. W odróżnieniu do języków takich, jak PHP, RUBY, PYTHON czy JAVA,  język JavaScript został stworzony po to by mógł być wykonywany po stronie przeglądarki. Zastąpił tym samym wszechobecny FLASH, który wymagał ciągłego aktualizowania wtyczek i często załadowania sporej ilości danych. JavaScript jest przetwarzany przez silnik przeglądarki, co pozwala na przesłanie konkretnych instrukcji i stworzenie u użytkownika wrażenia, że strona jest interaktywna. JavaScript jest odpowiedzialny np. za ładowanie galerii zdjęć, przewijanie sliderów, wyskakujące na stronie pływające okienka itp. JavaScript posiada wiele bibliotek ułatwiających korzystanie z niego takich jak: JQuery, Mootols, Prototype, Ext i wiele innych.

AJAX – technologia wykorzystująca JavaScript by dynamicznie ładować treść. Dzięki niej, nie trzeba ładować całej zawartości strony. Klikając w odpowiedni odnośnik (np. nazwę książki) możemy bez przeładowania strony, załadować jej opis i pokazać poniżej odnośnika. Dzięki AJAX-owi strony stały się dużo szybsze w działaniu, ponieważ dodatkowa treść może być załadowana w każdej chwili. Tak naprawdę wystarczy, jako HTML przesłać sam layout zaopatrzony w odpowiednie skrypty JavaScript.

ajax1

Chyba najlepszym przykładem na działanie AJAX’a jest przeglądarka Google. Podpowiadanie dynamiczne do wyszukiwanych fraz – wpisując część słowa w wyszukiwarce, często Google podpowiada nam całą resztę. Dzieje się tak za sprawą JavaScriptu, który ładuje tabelę przygotowaną przez PHP (lub inny język programowania odpowiadającego za backend), zawierającą proponowane wyrażenia będące rozwinięciem już wpisanej frazy.

 

 

Ok. Ale jak to się ma do robotów indeksujących treść?

Niestety tekst ładowany dynamicznie (ładowany za pomocą JavaScriptu) nie jest widoczny dla robotów. Tym samy strona będzie dla nich pusta i uboga, mimo że posiadamy na niej np. kolorowe okienka z unikalnym tekstem, które ukazują się po kliknięciu w zdjęcie produktu.

 

Przykład Pierwszy: „Wrzucamy wszystko na jedną stronę! Przecież ładnie się scrolluje.”

http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html

W tym przypadku nie tyle utrudniamy pracę robota, co całemu SEO. Pomimo że tekst jest widoczny w źródle, to upchniecie tu więcej jak 3 fraz graniczy z cudem. Przechodząc pomiędzy boxami, adres strony się nie zmienia, co powoduje, że nie ulegają zmianie również takie elementy jak: title, meta-description, nagłówki h1, h2… Nie mówiąc już o tym, że zawartość ostatniego pudełka (w tym przypadku Box 4) znajduje się w kodzie na samym dole i jej treść ma już marginalne znaczenie (w myśl zasady „Im wyżej, tym lepiej”).

Rozwiązanie takie może sprawdzi się jako strona studia designu, czy ładnego portfolio, jednak z punktu widzenia marketingu internetowego, będzie rankingowała niżej niż postawiona na 4 plikach .html witrynka z podobnym tekstem.

 

Przykład drugi: Magicznie zmieniający się tekst.

http://css-tricks.com/examples/AJAXReplaceSamePart/#about.html

Na tej stronie zaprezentowana jest konwencja ładowania zewnętrznych plików.html jako treści na stronie, zaraz po tym, jak tylko użytkownik odwiedzi odpowiedni link. Używając łącza ABOUT, do <div id=”content”> zostaje załadowany plik about.html. Brzmi nieźle, ale przyjrzyjmy się źródłu strony. Nic się tam nie zmieniło, co znaczy że nie będzie to również widoczne dla robota sieciowego.

Problem pojawia się, gdy chcemy pozycjonować stronę, na której zaciągamy menu, z jednego pliku, obrazki z innego, a treść z kolejnego. Tak samo, gdy strona ładuje sobie zawartość z bazy danych za pomocą AJAXa, wtedy nie ma już żadnej szansy aby robot Google przeczytał nasz wartościowy tekst.

To samo dotyczy stron, które podmieniają np. produkty na stronie zaraz po wybraniu kategorii (bez przeładowania strony, zmiany adresu). Każda strona jest tak naprawdę statyczna, a lista produktów jest pusta. Nie ma się co dziwić, że roboty nie mogą wtedy zaindeksować naszych produktów, a strona wygląda jak książkowy przykład spamu i nie ma co liczyć na wbicie jej do pierwszej dziesiątki wyników.

Dynamicznego ładowania treści musimy unikać jak ognia, jeżeli myślimy o pozycjonowaniu strony. O ile w przypadku zdjęć nie stanowi to problemu, o tyle brak treści w źródle będzie już zabójczy.

Jeśli macie wątpliwości czy wasza strona korzysta z technik, które dla Google są na razie nieczytelne, wystarczy wyłączyć w przeglądarce obsługę JavaScript i odświeżyć witrynę. Jeżeli przestaną pokazywać się teksty, zdjęcia, bądź co gorsza strona zupełnie opustoszeje – wiedzcie, że nie jest ona przyjazna dla robotów i Google na pewno się nią nie zainteresuje ;) A przecież chodzi o to, żeby strona nie tylko ładnie wyglądała, ale też przynosiła zyski.

 

„To po co mi takie diabelskie narzędzie?!”

JavaScript jest w pewnych przypadkach bardzo przydatnym narzędziem. Wbrew temu, co pewnie w tej chwili myślicie, strony wykorzystujące JS czasami mogą oszczędzić nam dobrych parunastu minut przekopywania się przez kod.

  1. Sortowanie – sklepy internetowe często wykorzystują sortowanie produktów za pomocą określonych kryteriów, np. po cenie lub alfabetycznie. Standardowo można wykorzystać rozwiązanie „noindex, follow”, jeśli w linku znajdzie się odpowiedni parametr. O wiele prostsze jest jednak użycie JS. Google go nie zauważa, więc nie musimy się martwić, że nagle pojawią się nam duplikaty strony.
  2. Tworzenie JavaScriptowej paginacji – przykład z życia: mam tekst do wdrożenia na stronę, ale za mało miejsca by go tam umieścić, czcionka 5px nie wchodzi w grę, a suwaczek wygląda bardzo źle… Z pomocą przychodzi nam nic innego jak JS. Dzielimy tekst na 2 lub więcej div-ów, umieszczamy linki z numeracją i podpinamy odpowiednie funkcje, które będą pokazywać tylko konkretny tekst.
    Co więcej! Matt Cutts sam przyznał, że techniki mające na celu ukrycie części tekstu, w zwijanym menu, tak by strona była czytelniejsza, jest do zaakceptowania do momentu aż nie służy spamowaniu (zobacz artykuł >>).
  3. Pop-upy – Niestety ostatnimi czasy serwisy zaczęły przesadzać z reklamami wyskakującymi z dołu, góry, czy boku strony. Jednak bez wykorzystania JavaScriptu, takie informacje jak banner promocyjny, czy zdjęcie reklamowe, musielibyśmy umieszczać w treści strony, co denerwowałoby jeszcze bardziej.

 

Dochodząc do krótkiej konkluzji

JavaScript jest dla ludzi! Można, a nawet wypada go stosować, o ile nie przekroczymy pewnej granicy. Ta najczęściej znajduje się w miejscu, w którym chcemy zacząć dynamicznie ładować treści. Jednak odpowiednio zastosowany język JavaScript sprawia, że strona staje się bardziej estetyczna, user-friendly i cieszy oko wieloma „bajerami”. Wykorzystujmy go jednak z głową, a gwarantuję, że żaden SEOwiec nie zadzwoni na skraju załamania nerwowego.

, , ,

Adam Graliński

Stereotypowy informatyk. Sympatyk SEO , programista. Wolny czas spędzam przy komputerze zgłębiając tajniki "Mocy".

zobacz posty autora

Spodobał ci się ten post? 2 0

11 komentarzy

  • Sławek

    Generalnie wszystko by było spoko, gdyby nie brak wiedzy autora co do tego, że treści ładowane AJAXem bez problemu da się indeksować, że strony scrollowane również da się podzielić i zaindeksować…
    (albo przynajmniej takie mam odczucie po przeczytaniu tego artykułu)

    20.09.2013, g.20:04

    • Adam Graliński

      Poradzić sobie z tym możemy, tworząc substytut strony, sam Ajax jest natomiast wciąż nieobsługiwany – mylę sie?

      Jeśli mówisz o poradach Google dot. AJAX – Trzeba dostarczyć pod odpowiednim adresem stronę html – a indeksowanie htmla nie jest żadną nowością. Dodatkowo zadbanie o update snapshotów nie jest proste i przyjemne.

      Co do scrollowania – nie słyszałem o możliwości takiego podziału by 13x h1 spotkało się z aprobatą Google. Proszę napisz coś więcej.

      23.09.2013, g.09:29

      • Sławek

        Zasadniczo proponuję się po prostu edukować poczytać o push state, bibliotekach typu pjax, dalej na pewno przyda się wiedza dotycząca frameworków przydatnych przy stronach flash (jeśli ktokolwiek jeszcze to robi).
        Jeśli czyta się odpowiedź „indeksowanie htmla nie jest żadną nowością” no to ja nie wiem generalnie co byś jeszcze chciał indeksować? Ja zawsze myślałem, że chodzi o zaindeksowanie htmla, który powstaje po zaczytaniu treści dynamicznie doładowanej przez js, ale może Ty specjalnie ukrywasz tekst i obciążasz dodatkowo serwer doczytując treści dynamicznie i chciałbyś, żeby wyszukiwarki zgadywały gdzie było Twoją intencją zrobić dynamiczny slider z 500 zdjęciami, a gdzie blok z 5 zdaniami tekstu i gdzie traktować to jako stronę ważącą 300MB, a gdzie jako pustą stronę. Sory, ale akurat jako programista mógłbyś mi to wyjaśnić po prostu logicznie – co wg, Ciebie znaczy „zaindeksować ajax” jeśli właśnie nie „indeksowanie htmla”?

        O 13 nagłówkach nawet mi się nie chce pisać, bo to nie ja tutaj występuję w roli eksperta, polecę jedynie poszukać przykładów scrollowanych stron, przy których ktoś zadbał o seo, niewiele tego, bo każdy wychodzi z podobnego założenia jak Ty, ale warto szukać :)

        24.09.2013, g.21:26

  • Adam Graliński

    Postaram się poszukać takich stron. Tak jak mówisz – większość osób wychodzi z podobnego założenia i głupio mi, ale się przyznaję że otrzymując stronę zrobioną na scrollowaniu, od razu przechodzę do tworzenia podstron.

    Co do indeksowania htmla – źle się trochę wyraziłem. Chodziło mi raczej o to że indeksuje się statyczne strony *.html będące zrzutem dynamicznej struktury. Koniec końców użytkownikowi nie robi to różnicy bo trafia na stronę zawierającą Ajaxa, ale nie wydaje mi się to najlepszym pomysłem ze względu chociażby na to co opisałem w komentarzu powyżej.

    „ale może Ty specjalnie ukrywasz tekst i obciążasz dodatkowo serwer doczytując treści dynamicznie” – Sławku właśnie z takim czymś próbujemy walczyć, a nie stosować :D Artykuł napisałem na bazie własnych doświadczeń i godzin spędzonych nad kodem – według mnie prościej jest zadbać o pewne rzeczy od samego początku i nie przesadzać z wykorzystywaniem technologii Ajaxa i JSa.
    Cieszy mnie niezmiernie to że znalazł się również ktoś kto chce pokazać iż przy odpowiednim wysiłku można poradzić sobie ze wszystkim. Pozdrawiam Cię i wracam do „zgłębiania tajników mocy” – jeszcze kawał drogi przede mną :)

    25.09.2013, g.13:21

  • Piotrek

    Bardzo dobry artykuł, dobrze dobrane przykłady oraz wytłumaczone, kiedy najkorzystniej korzystać z JS.

    30.09.2013, g.15:53

  • Proadax

    Witam, mam problem z indeksowaniem strony
    Tzn. strona główna jak najbardziej zaindeksowana, ale podstrony już nie.
    Linki wyglądają w ten sposób http://www.profesjonalneszkolenie.pl/#!Zarzadzanie-stoiskiem-mieso-wedliny.html
    w Narzędziach w Pobierz jako google wyrzuca mi te linki
    Zrobiłem teraz jeszcze mape strony – może to pomoże.. a jeśli nie macie jakieś rady?

    no właśnie.. google ich nie widzi…:/
    google zindeksowało tylko z przesłanej mapy wityny jeden URL :/

    a jabić tak.. że..
    dodać do indeksu google takie odnośniki..
    http://profesjonalneszkolenie.pl/pages/Oferta-szkolen.html
    jest to czysty html.. a w htacces zrobić przekierowanie na prawdiłową formę tj. http://profesjonalneszkolenie.pl/#!Oferta-szkolen.html
    google coś takiego zaakceptuje?

    26.10.2013, g.19:41

    • Adam Graliński

      Strona główna nie jest niestety zindeksowana. za to masz stronę : o mnie :)
      Moja propozycja która zadziała na 100%. Utwórz wersje html strony, i daj odnośnik w wersji JSowej. Pozycjonuj htmlkę, i dołącz do niej kod JSa który będzie tworzył przekierowania na odpowiedniki JS.
      np: http://www.lonet.eu/java-script/przekierowanie-strony-w-javascript/
      Tak żeby po przejściu z serpów wyświetlała się dynamiczna stronka. Jest to najłatwiejszy sposób który daje efekty. Tak samo jak przy flashowych stronach (tyle że tam nie robimy przekierowań).
      I pamiętaj – bardzo ważny będzie odnośnik z głównej do wersji html.

      Propozycja którą przedstawiłeś nie zadziała ponieważ interpretowaniem .htaccessa zajmuje się apache na serwerze. Zawsze wyrzuci on w tym wypadku adres na stronę w JS.

      16.12.2013, g.08:38

  • k

    Sławek konkrety, a nie taka pyskówka bez pokrycia w faktach.
    Argumenty odbijasz tak, ze nie chce Ci się o czymś pisać, bo nie ty jesteś ekspertem. Jak piszesz, że w sieci są przykłady stron danego typu, to je pokaż, itp.

    Zarzuciłeś bez wielkiego namysłu autorowi, że się nie zna, a z twoich dwóch postów ciężko wyciągnąć cokolwiek użytecznego poza ogólnikami. Do poprawy ego jest plotek.

    02.12.2013, g.11:50

  • Tremot

    Adamie co myślisz na temat stron postawionych na kreatorze wix.com
    Mam dylemat, czy się pchać w taką stronę ponieważ podejrzewam, że pozycjonowanie tego może nie być zbyt proste.

    Taka strona wychodzi w końcowym efekcie (nie jest moja) – http://sebastiansektorband.wix.com/sektor/

    19.12.2013, g.13:13

  • Pozycjonowanie stron www

    JavaScript oraz Ajax jeśli nie umożliwia to na pewno utrudnia poprawne dodanie strony do indeksu. Odradzam przede wszystkim konstrukcję w tej technologii menu z odnośnikami do podstron. Poza tym wiele efektów można wykonać za pomocą CSS3. Pozdrawiam.

    06.06.2014, g.09:48

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>