- Dlaczego web developer i SEOwiec powinni ze sobą współpracować?
- Co web developer powinien wiedzieć o SEO?
- Co programista powinien wiedzieć o SEO? Podsumowanie
Dlaczego web developer i SEOwiec powinni ze sobą współpracować?
Optymalizacja strony pod wymagania algorytmu Google w dużej mierze jest obecnie tożsama ze stworzeniem takiej witryny, która wpisuje się w oczekiwania użytkownika. Internauta chce, aby serwis szybko się ładował, miał prostą nawigację, łatwo można było na nim odnaleźć wszystko to, czego potrzebuje. Zależy mu na tym, aby bez problemów mógł przeglądać witrynę na urządzeniach mobilnych oraz żeby nie była przepełniona błędami, które utrudniają poszukiwania. To tylko przykładowe potrzeby, które może mieć internauta – są one w dużej mierze spójne z tym, czego wymaga od serwisu algorytm Google. Z jednej strony warto więc, aby podstawy SEO dla web developera nie były obce, a z drugiej - aby SEOwiec miał podstawową wiedzę z zakresu tworzenia stron. Warto, aby obaj eksperci co nieco wiedzieli o swoich specjalizacjach, gdyż ułatwi im to dążenie do osiągnięcia celu w postaci witryny, która spełnia wymagania algorytmu Google. Ponadto muszą oni mieć świadomość, jakich działań nie mogą podejmować bez konsultacji z drugą stroną. Możliwe, że witryna ma już zbudowaną widoczność, ale poprzez zmiany wprowadzone bez wcześniejszych ustaleń z SEOwcem, utraci ją. Przykładowe błędy, do których może dojść w takiej współpracy to m.in.:- Umieszczenie kopii projektu na różnych serwerach bez blokady indeksacji. Efekt? Pojawienie się w Google kilku wersji tego samego serwisu, jeszcze zanim został on ukończony.
- Publiczna dostępność strony na etapie projektu bez odpowiedniego zabezpieczenia – znane są już przypadki, gdzie taka witryna stała się przedmiotem ataku hackerskiego realizowanego przez boty. Efekt? Włamanie, które doprowadziło do zindeksowania setek spamerskiej treści, w dodatku podlinkowanej przez automaty z niskiej jakości serwisów.
- Zmiana struktury strony – modyfikacja adresów URL, nawigacji, brak przekierowań 301, co w połączeniu może doprowadzić do drastycznego spadku widoczności.
- Pozostawienie tagu noindex na stronie po jej przeniesieniu, co oczywiście blokuje możliwość pojawienia się witryny w SERP-ach.
Co web developer powinien wiedzieć o SEO?
Oczywiście idealnie, jeśli na etapie realizacji projektu programista konsultuje się z SEOwcem w poszukiwaniu najlepszych rozwiązań – z punktu widzenia SEO witryny, jak i użytkownika. Skupmy się jednak na tym, co web developer powinien wiedzieć o SEO, aby jego działania miały pozytywny wpływ na widoczność strony w wynikach wyszukiwania.Czas ładowania strony
Google docenia witryny, które szybko się ładują – to jeden z czynników rankingowych. Oczywiście o pozycji decyduje wiele parametrów, ale jeśli jeden serwis jest dostępny do przeglądania dwa razy szybciej niż inny, to może to pozytywnie wpływać na jego widoczność. To nie wszystko. Szybkość ładowania strony ma również wpływ na wskaźnik odrzuceń. Zerknij na poniższy wykres – im dłużej internauta musi czekać na dostępność strony WWW, tym wyższy jest bounce rate. Jeśli witryna ładuje się w 2 sekundy, to wynosi on 6 proc. Natomiast przy 10 sekundach – aż 65 proc.! Jeśli Google widzi, że internauci wracają z takiej strony do wyników wyszukiwania i klikają kolejny wynik, to prawdopodobnie oceni, że nie jest ona wartościowa, co może negatywnie wpłynąć na jej widoczność. [caption id="attachment_46346" align="aligncenter" width="604"] źródło: https://www.pingdom.com/blog/page-load-time-really-affect-bounce-rate/[/caption] Jako web developer pamiętaj o Core Web Vitals, czyli czynniku rankingowym, który wprowadziło Google w 2021 roku. Są to wskaźniki dotyczące wydajności i szybkości strony WWW. Do tych podstawowych wskaźników internetowych zaliczamy:- Largest Contentful Paint (LCP) – czas potrzebny przeglądarce do załadowania największego elementu na stronie (pomiar ma miejsce w sekcji Above The Fold).
- First Input Delay (FID) – czas od rozpoczęcia ładowania strony do momentu, w którym witryna będzie w pełni interaktywna.
- Cumulative Layout Shift (CLS) – stabilność wizualna serwisu.
Właściwe korzystanie z przekierowań stron
Na stronach wciąż zachodzą jakieś zmiany. Pojawiają się nowe treści, artykuły są łączone, dochodzi do modyfikacji adresów URL, a w tym wszystkim ogromną rolę odgrywają przekierowania, które mają duże znaczenie zarówno dla internauty, jak dla pozycji witryny w Google. Jeśli dany materiał zmienił adres na stałe albo doszło do połączenia różnych artykułów, to należy zastosować przekierowanie 301. Po pierwsze: internauta trafi wtedy do materiału docelowego, a po drugie: dzięki temu przekierowaniu przekazujesz moc SEO – wprawdzie nie 100 proc., ale rzeczywiście dochodzi do jej przekazania. Nie zapominajmy również o przekierowaniu 302, które ma zastosowanie, gdy zmiana jest tymczasowa – tzn. zamierzasz przywrócić stary adres. Używa się go np. w sytuacji, gdy produkt jest chwilowo niedostępny i go wyłączamy (wtedy ustawiamy przekierowanie 302 na inny, podobny produkt) - ale za, powiedzmy, tydzień mamy dostawę i staje się ponownie dostępny - więc ponownie go włączamy, a przekierowanie usuwamy.
Uwaga! Choć przekierowanie 302 znajduje w tej sytuacji zastosowanie, to - z perspektywy SEO - nie zalecamy wyłączania produktów! Jeśli danego produktu nie ma w magazynie, zaznacz na stronie, że jest on “out of stock” / “niedostępny”, możesz też dodatkowo zaproponować klientowi inny, podobny produkt. Więcej na ten temat piszemy w artykule: Produkt niedostępny w sklepie – jak sobie z nim poradzić bez zabijania SEO?
Nieodpowiednie wdrożenie przekierowań 301 albo ich brak może mieć duży wpływ na widoczność witryny – niestety negatywny.
Czy strona prawidłowo wyświetla się na urządzeniach mobilnych?
Większość korzystających z internetu robi to na smartfonach i innych urządzeniach mobilnych. Według Oberlo zawartość sieci za pomocą takich sprzętów przegląda już ponad 56 proc. internautów na świecie. [caption id="attachment_46348" align="aligncenter" width="604"] źródło: https://www.oberlo.com/statistics/mobile-internet-traffic[/caption] Dlatego strona WWW powinna się dostosowywać do urządzeń mobilnych nie tylko ze względu na to, że takie są oczekiwania Google – to jedyny słuszny krok w stronę zapewnienia internautom serwisów, które spełniają ich potrzeby. Przed udostępnieniem witryny koniecznie sprawdź, czy aby na pewno jest ona dopasowana do urządzeń mobilnych. Wykorzystaj do tego narzędzie od Google – test optymalizacji mobilnej.Plik robots.txt
Być może na czas wdrażania zmian w projekcie strony WWW zablokowałeś poprzez plik robots.txt możliwość indeksowania witryny przez roboty (jest to jedna z metod - inną możliwością zablokowania indeksowania jest dodanie tagu “noindex” w sekcji <head> strony). Po pierwsze – to nie jest skuteczna metoda na zablokowanie indeksacji i mimo dodania odpowiedniego kodu do pliku możliwe, że dany materiał trafi do indeksu. Po drugie – pamiętaj o wprowadzaniu zmian w pliku przed uruchomieniem strony, bo może być tak, że kod ten będzie rzeczywiście blokować indeksację. Jego zawartość możesz sprawdzić nawet bez logowania się na serwer. Skorzystaj z testera pliku robots.txt od Google.Dane strukturalne
Web developerzy mają duże pole do popisu, jeśli chodzi o wdrażanie danych strukturalnych. Dzięki temu w Google przy wyniku wyszukiwania danej strony mogą pojawić się gwiazdki, cena, stan magazynowy i wiele innych elementów. Kwestia tego, jakie dane strukturalne zostaną wdrożone powinna być uzgodniona pomiędzy SEOwcem, web developerem, ale również właścicielem strony. Poprawność zapisu można łatwo przetestować przed uruchomieniem witryny – wykorzystaj do tego test wyników z elementami rozszerzonymi.Poprawność wdrożenia wersji językowych
Błędy w tym przypadku mogą doprowadzić nawet do wyindeksowania strony. Wersje językowe można wprowadzać na różnych domenach, korzystając z subdomen, a najprostszym sposobem jest postawienie na podkatalogi w domenie głównej. W każdym przypadku ważne jest skontrolowanie poprawności wdrożenia atrybutu hreflang, czyli metody, która jest rekomendowana przez Google do definiowania języków strony dla poszczególnych lokalizacji. Implementacji możesz dokonać na różne sposoby – najczęściej stosuje się dodanie hreflang w sekcji <head> strony. Należy zastosować następujący kod:
<link rel=”alternate” hreflang=”kod języka kod regionu” href=”url”>
Może to być np.
<link rel=”alternate” hreflang=”de-DE” href=”https://delante.pl/de” />
Musi się on znaleźć na każdej podstronie serwisu, dla każdej wersji językowej. Tzn. może się pojawić kolejna linia kodu dla wersji angielskiej:
<link rel=”alternate” hreflang=”en” href=” https://delante.pl/en”>
Ułatwieniem przy realizacji tego zadania może być hrefslang tag generator. Warto dodać również hreflang x-default, który wskazuje defaultowy język np. angielski, jeżeli na stronę wejdzie osoba spoza bazy języków, które mamy w hreflangach.
<link rel=”alternate” href=”https://delante.pl/en” hreflang=”x-default” />
Do przetestowania poprawności wprowadzenia hreflangów możesz wykorzystać stronę hreflangtest.com.