Archiwa tagu: JavaScript

Google widzi linki JavaScript których Ty nie widzisz

Algorytm

Większość osób zajmujących się SEO wie, że Google rozumie kod JavaScript oraz content w nim zawarty. Wiadomo to nie tylko dlatego, że firma sama to ogłosiła, ale również dzięki testom empirycznym.

Wszyscy to wiemy, a mimo to narzędzia zajmujące się danymi dotyczącymi backlinków widzą tylko klasyczne linki w formacie <a href>.  Nie dają rady zgromadzić informacji dotyczących przekierowań z wykorzystaniem JavaScript, co może być kłopotliwe w prowadzeniu bazy backlinków.

Czy jest to problem?

Brak możliwości zobaczenia linków opartych na JavaScript może być problemem dla webmasterów. Google daje radę przetworzyć skrypt, więc tego rodzaju linki będą również brane pod uwagę przy analizie stron pod kątem spamerskich linków. Brak możliwości sprawdzenia linków JavaScript sprawia, że strony internetowe są narażone na możliwość otrzymania kary od Google, nie wiedząc nawet, skąd się ta kara wzięła.

Przecież Google dostarcza te dane

Niestety, linki wyświetlające się w profilu Google Search Console nie są wszystkim co potrzebujesz aby dokonać porządnej analizy backlinków. Niestety, dane te są mocno ograniczone. Google Search Console wyświetla jedynie 1000 wierszy. Złe linki JavaScript mogą z tego powodu nie być wyświetlone w raporcie.

Są dowody na to, że czarny scenariusz opisywany akapit wyżej może się zdarzyć. Bywało, że linki dostarczony przez Google Webspam Team jako powód otrzymania kary nie znajdował się w żadnym dostępnym narzędzi do analizy backlinków, nawet w Google Search Console. Dlatego komercyjne narzędzia powinny przestawić się na rozumienie linków JavaScript.

Czy linki oparte na JavaScript mają taką samą wartość co tradycyjne odnośniki?

Najprościej mówiąc – tak. Podczas konferencji SMX West 2017 Mariya Moeva, członek zespołu Search Quality Team w Google potwierdziła, że Google nie rozróżnia klasycznych linków od tych opartych o JavaScript. Ich waga jest równa.

Jak wiele backlinków może być niewidocznych dla nas?

Ciężko powiedzieć to ze stuprocentowa pewnością, ale w 2016 roku OverStack przeprowadził badanie ponad 56 tysięcy deweloperów z 173 różnych krajów. Wyniki mówią, że zdecydowana większość webdeweloperów korzysta z JavaScript w codziennej pracy.

Choć linki JavaScript nie są standardową praktyka w projektowaniu stron, to czasem się z nich korzysta, szczególnie na szczeblu komercyjnym. Powszechność wykorzystania JavaScript sprawia, że wiele linków może być w stworzonych z wykorzystaniem tej technologii.

Co mogę zrobić z tą wiedzą?

Cóż, czekać. Musimy uzbroić się w cierpliwość i poczekać, aż twórcy narzędzi do analizy backlinków dodadzą możliwość skanowania również linków JavaScript. Nawet Google zajęło to dużo czasu, a przecież mają oni niewspółmiernie większe zasoby.

Dmitry Gerasimenko, CEO Ahrefs, powiedział, że wykonywanie skryptów JavaScript na wymaganą skalę zmusiłoby ich do zakupienia dodatkowych 10000-15000, a jego zdaniem klienci nie są jeszcze gotowi na zapłacenie za taką usługę.

Cóż, w przypadku linków JavaScript wszystko rozbija się o pieniądze, gromadzenie tego rodzaju danych jest po prostu zbyt kosztowne. Czy jakakolwiek firma zajmująca się tworzeniem narzędzi SEO zdecyduje się na taki odważny krok? Moim zdaniem w najbliższej przyszłości raczej nie ma na to szans.

W międzyczasie musimy po prostu poradzić sobie z mniejszą dostępnością danych dotyczących backlinków. Warto na swoich stronach zrezygnować z linków JavaScript żeby ułatwić analizę backlinków innym, ale chyba nie co liczyć na to, że webmasterzy masowo zrezygnują z wygody JavaScript do wstawiania linków.

JavaScript i SEO – jak połączyć te kwestie?

Pozycjonowanie

Jedną z ważnych umiejętności przy zajmowaniu się SEO jest zrozumienie potencjalnego wpływu JavaScipt na pozycjonowanie strony. Jeśli algorytmy crawlujące nie dadzą rady zindeksować Twojej witryny ani zrozumieć zamieszczonego na niej contentu, strona nie zostanie wypozycjonowana w wynikach wyszukiwania.

Czym jest JavaScript?

Gdy tworzysz stronę internetową, będzie się ona prawdopodobnie składała z trzech głównych komponentów:

  1. HTML – kręgosłup każdej strony, to w kodzie HTML znajdują się wszelkie informacje o strukturze strony (nagłówki, akapity, listy itp.), w skrócie wszystkie statyczne elementy strony.
  2. CSS – na tę część składa się design, wykorzystana skórka, ogólnie wszystkie elementy dotyczące graficznej prezentacji strony.
  3. JavaScript – Interaktywne elementy dynamicznej części strony.

JavaScript umieszcza się albo w dokumentacji HTML pod tagiem <script>, albo się linkuje do jej elementów. Istnieje mnóstwo różnych bibliotek i środowisk, najbardziej znane to jQuery, AngularJS, ReactJS.

Dlaczego JavaScript jest wyzwaniem dla SEO?

Istnieją trzy główne kwestie, na które trzeba spojrzeć przy tworzeniu elementów JavaScript:

  1. Możliwość crawlowania strony przez boty wyszukiwarek
  2. Zdolność botów do uzyskania informacji na temat umieszczonego przez Ciebie contentu
  3. Opóźnienie działania strony, czyli ścieżka krytyczna renderowania zawartości.

Możliwość crawlowania

Czy boty mogą przeczesać URLe i zrozumieć strukturę Twojej strony? Należy zwrócić uwagę na dwie kwestie. Po pierwsze, należy zastosować odpowiednią strukturę linkowania wewnętrznego w taki sposób, żeby JavaScript nie stosował zamiennika dla tagów HTML. Po drugie trzeba uważać, żeby przypadkiem nie zablokować wyszukiwarkom dostępu do elementów JavaScript.

Jeśli dojdzie do takiej blokady, algorytmy szukające nie otrzymają pełnych informacji na temat zawartości Twojej strony. Oznacza to, że wyszukiwarka nie będzie widzieć Twojej strony w taki sam sposób co użytkownik końcowy. Może to znacznie obniżyć pozycję witryny w wynikach wyszukiwania. Warto przebadać stronę pod tym względem i sprawdzić, jak widzą ją wyszukiwarki.

Z kolei linkowanie wewnętrzne musi zostać zaimplementowane z normalnym tekstem zakotwiczenia w kodzie HTML, nie należy w tym przypadku korzystać ze skryptów JavaScript. Jest to bardzo istotne dla algorytmów szukających, które w ten sposób rozumieją w pełni strukturę Twojej strony i odpowiednio ją indeksują.

Dostępność i szybkość

Algorytmy szukające crawlują stronę „bez opamiętania”, Google na przykład potrafi przetworzyć pewne elementy JavaScript. Mimo to często zdarza się, że mają problem z uzyskaniem dostępu do wielu elementów na stronie, co ponownie sprawia, że nie zostaną one zindeksowane.

Istnieje kilka przypadków, gdy wyszukiwarka może mieć problem z uzyskaniem dostępu do treści na Twojej stronie.

Jeśli użytkownik musi dokonać jakiejś złożonej interakcji by zobaczyć rozszerzoną zawartość, wyszukiwarka prawdopodobnie to zignoruje. Algorytmy Google są w tym względzie leniwe. Jeśli czegoś nie da się kliknąć czy przewinąć, prawdopodobnie zostanie to pominięte.

Jeśli skrypt JavaScript jest ustawiony w taki sposób, żeby uruchomić się po paru sekundach (prawdopodobnie więcej niż 5), wyszukiwarka może ruszyć już dalej i zignorować pojawiającą się treść.

W tym przypadku ciężko określić dokładny czas potrzebny na zładowanie pełnej wersji strony. John Mueller wspomniał kiedyś, że nie ma dokładnej wartości, ale dobrze jeśli cała strona ładuje się w ciągu 5 sekund. Screaming Frog przeprowadził kiedyś testy dotyczące tej kwestii i otrzymane przez nich wyniki również wynoszą około 5 sekund.

5 sekund (+normalny czas ładowania) to również wartość wykorzystywana przez narzędzia Google typu PageSpeed, Mobile Friendliness Tool czy Fetch as Google.

W jaki sposób Google radzi sobie z ukrytym tekstem CSS i JavaScript?

Google

Czy Google traktuje treści znajdujące się pod przyciskami „Przeczytaj więcej” z taką samą istotnością co tekst, który nie jest ukryty? Krótka odpowiedź brzmi „nie”, ale znajduje się tu kilka niuansów. W poniższym artykule postaram się w skrócie wyjaśnić, jak Google patrzy na ukryty tekst stworzony w CSS i JavaScript.

Ukryty tekst na stronie

Kiedy mówimy o ukrytym tekście, wcale nie mamy na myśli spamerskich metod służących oszukiwaniu przeglądarek na przełomie XX i XXI wieku. Nie chodzi o strategie dotyczące umieszczania na stronie białego tekstu na białym tle ani nic z tych rzeczy. Mowa o kodzie CSS i JavaScript wykorzystywanych na stornie w celu zakrycia części treści, w związku z czym potrzebna jest interakcja użytkownika do odkrycia jej. Jest to bardzo popularna w ostatnich latach metoda zaangażowania czytelników w działanie na Twojej stronie.

Takie praktyki powodują dużo problemów dla Google i pozycjonowania. Jeśli spojrzy się w cache Google można zauważyć, że crawlery wyszukiwarki bez problemu radzą sobie z kliknięciem w dany link i przeczytaniem reszty zawartości. Problem więc nie leży po stronie technologii wyszukiwarki. Chodzi raczej o to, że ukryta treść nie jest traktowana tak samo jak reszta contentu.

Po co stosować ukryty tekst?

Wiele osób stosuje takie zabiegi w celu zdobycia statystyk na temat tego jak wielu użytkowników czyta link w który kliknęło. Inni korzystają z tego rozwiązania w celu zaserwowania reklam lub śledzenia czegoś. Inni po prostu wykorzystują ukryty tekst dla wygody użytkowników, którzy mogą zwijać i rozwijać poszczególne sekcje na stronie.

Nierówne traktowanie ukrytego tekstu

Moz.com przeprowadził eksperyment dotyczący pozycjonowania ukrytego tekstu. Umieścił podobną treść na podobnych witrynach, z podobną bazą backlinków i całą resztą. Do jakich wniosków doszli?

  • Strona bez ukrytego tekstu znajdzie się wyżej dla najważniejszych słów kluczowych nawet jeśli znajdują się one w odkrytym tytule. Ponieważ tekst dotyczy również tego słowa kluczowego, Google pozycjonuje wyżej stronę, która nie stosuje takich praktyk.
  • Nie ma znaczenia, w jaki sposób ukryjemy tekst. Czy skorzystamy z CSS, JavaScriptu, czy nawet odpowiedniej manipulacji HTML, nie ma to znaczenia. Google i tak mniejszą wagę przypisze tekstowi ukrytemu, jest on uważany za mniej znaczący dla całości.
  • Co ciekawe, Bing i Yahoo nie mają takiej zależności. Traktują treść ukrytą i otwartą niemal równie. Według obecnych danych jedynie algorytmy Google różnicują rodzaj contentu.

Dobre praktyki dla SEO i ukrytego tekstu

Jak specjaliści SEO powinni patrzeć na ukryty tekst?

Należy się spodziewać, że za każdym razem gdy ukryje się tekst za pomocą CSS czy JavaScript, będzie on miał mniejszy wpływ na rankingi wyszukiwarki. Nie oznacza to, że nie będzie się w ogóle liczył. Google wie, że tekst tam jest, po prostu przywiązuje mu mniejszą wagę.

Warto rozważyć kreatywne alternatywy. Możliwe jest ustawienie tekstu jako widocznego domyślnie, a następnie nałożenie na niego jakiegoś zakrywającego elementu, który łatwo zamknąć po kliknięciu w odpowiedni komunikat. W ten sposób osiągniemy zarówno nasze cele, ale również nie ukryjemy tekstu. Możemy również wykorzystać inne rozwiązania mierzące zaangażowanie użytkowników w nasz content, ukryty tekst to nie jedyna metoda.

Jeśli naprawdę musisz korzystać z ukrytego tekstu, polecam umiejscowienie najbardziej kluczowych informacji poza nim, w tym słowa kluczowe oraz najbardziej skojarzone z nimi frazy i terminy. W ten sposób będą one równie istotne dla rankingów. Minusem takiego rozwiązania może być konieczność nienaturalnego tworzenia contentu, który będzie niezbyt przyjemny w odbiorze dla użytkownika.

Jak zaimplementować zmiany w SEO korzystając z Google Tag Managera

Google

W swojej karierze zawodowej często trafiałem na problemy z implementacją zmian po stronie technicznego SEO. Działo się tak z wielu powodów – zazwyczaj strony miały dziwne CMS-y bez możliwości dopasowania poszczególnych opcji.

W takich przypadkach nie ma znaczenia jaką pracę wykonaliśmy przy identyfikacji błędów w SEO i ile rozwiązań znaleźliśmy, jeśli nie da się ich wdrożyć, są one bezużyteczne. Na szczęście istnieją alternatywne sposoby na przeprowadzenie zmian. Jedna z nich to działanie bezpośrednio na meta-CMS, czyli nadrzędnej platformie na której dopiero właściwy CMS jest zainstalowany.

Jeśli nie jest to możliwe, można wykorzystać system zarządzania tagami. W Poniższym artykule skupię się na Google Tag Manager, który jest najczęściej wykorzystywanym narzędziem tego typu (72,6% rynku). Programy do zarządzania tagami wykorzystują pojedynczy folder JavaScript, który można zapełnić tagami dla strony. Aby dodać czy edytować tagi, nie trzeba przeprowadzać żadnych zmian bezpośrednio na stronie, można to robić w ramach folderu, a tagi następnie zostaną zaimplementowane.

Jako że programy do zarzadzania tagami korzystają z JavaScipt, w przeszłości nie były widziane jako efektywny sposób do przeprowadzania zmian w technicznym SEO. Tradycjonaliści byli zdania, że Google oraz inne wyszukiwarki nie są w stanie skanować JavaScript, więc wszelkie zmiany w kodzie będą ignorowane. Jednak pojawiły się dowody na wpływ wprowadzonych zmian przez Google, również w implementacji tagów przez Google Tag Manager.

Jak przeprowadzić zmiany w HTML korzystając z Google Tag Manager

Jeśli chodzi o przeprowadzanie zmian, zazwyczaj jesteśmy zainteresowani dodawaniem nowych elementów na stronie, ich edycją lub aktualizacją oraz usuwaniem. Do każdej z tych rzeczy potencjalnie trzeba znać HTML lub obsługę CMS-a (np. WordPressa), dzięki temu wiesz którymi elementami masz się zająć. Przydatna jest również znajomość JavaScript (szczególnie jQuery) w celu dodawania elementów na stronie.

Aby dodać element na stronie HTML, musisz stworzyć odpowiedni tag HTML w Google Tag Manager. Możesz na przykład stworzyć tag noindex dla poszczególnych podstron, dzięki czemu nie będą indeksowane przez algorytmy wyszukiwarek. W przypadku Google Tag Manager każdy tag ma dodane również informacje dotyczące tego, w jakich okolicznościach ma być wdrożony. Jeśli chcemy by Google jak najszybciej zanotowało zmiany, musimy ustawić ich włączenie od razu po załadowaniu się strony. Możemy również wybrać które tagi mają się ładować na których podstronach.

Ekstrakcja danych znajdujących się na stronie

Istnieją dwa podejście co do wyciągania danych ze strony internetowej. Możesz skorzystać z wbudowanych w Google Tag Manager zmiennych, które pozwalają na ekstrakcję tekstu czy atrybutu znajdującego się na stronie. Drugim podejściem jest wykorzystanie JavaScript i/lub jQuery w tagu HTML.

W kontekście zmian w SEO, najczęściej będziesz chciał wyciągnąć dane ze strony za pomocą struktury danych wykorzystujących JSON-LD. Istnieje kilka metod pozwalających na tego rodzaju interakcję. Prostym i skutecznym sposobem jest wykorzystanie selektora CSS do zaznaczania elementów których szukasz. Istnieją odpowiednie rozszerzenia możliwe do zainstalowania w przeglądarce.

Jeśli korzystasz ze zmiennych Google Tag Manager do wyciągania danych ze strony, musisz utworzyć zmienną dla każdego interesującego Cię elementu. Wystarczy przejść do menu zmiennych i wybrać opcję utworzenia nowej pozycji.

Dla każdego elementu należy następnie stworzyć zmienną typu „DOM Element”, odpowiednie elementy wybiera się za pomocą ich ID lub wspomnianego wyżej selektora CSS. Pole atrybutu zazwyczaj pozostawia się puste, jedynym wyjątkiem są zdjęcia, gdzie wyciąga się również atrybut „src”.

Gotowe!