Zrób To Sam - Optymalizacja Strony

Ostatnio wiele słyszy się o optymalizacji, zwłaszcza w kontekście stron internetowych, ale o co tak właściwie chodzi? Czym jest optymalizacja? Mówiąc krótko, optymalizacja, to szereg działań prowadzonych na stronie internetowej, które mają na celu polepszenie jej widoczności w wyszukiwarkach. Jakiego rodzaju są to działania? Zaliczamy do nich, np. poprawienie tytułów, meta opisów, dopisanie słów kluczowych czy usunięcie niedziałających linków.

To, co na pierwszy rzut oka brzmi skomplikowanie, w rzeczywistości nie jest wcale trudne, zwłaszcza jeśli w zasięgu ręki ma się odpowiednie narzędzia i dobry przewodnik. Zatem spójrzmy bliżej na te zawiłe hasła i samodzielnie zoptymalizujmy stronę.

Spis treści

1. Treść
2. Dane meta
3. Zasoby
4. Linki
5. Szybkość strony
6. Podsumowanie

TREŚĆ

Zacznijmy od najważniejszego: treść. Chociaż zrobienie listy, np. słów kluczowych, a potem obudowanie jej zdaniami i uznanie, że artykuł jest gotowy jest kuszące, absolutnie nie należy tego robić. Teksty na stronie powinny być tworzone dla użytkownika, odpowiadać na zadane pytania, być aktualne i wyczerpywać temat. Dodatkowo, co również jest bardzo istotne, należy wystrzegać się duplikatów. Teksty na stronie muszą być unikalne, tj. pisane tylko na potrzeby wybranej strony.

Umieszczenie na podstronach opisów pozyskanych od producenta może spowodować, że strona nie będzie indeksowana przez wyszukiwarki, czyli strona nie będzie widoczna w Google. Wyszukiwarki mają duże zasoby, ale nie są nieograniczone. W przypadku gdy wyszukiwarka natrafi na opis, który powtarza się na dziesiątkach innych stron może go zwyczajnie zignorować jako bezwartościowy. Jeśli większość treści w sklepie internetowym będzie nieoryginalna, to najprawdopodobniej strona internetowa takiego sklepu nie będzie dobrze widoczna w Google.

Czasem można spotkać konkurencyjne strony, które pomimo braku unikalnej treści są wysoko w wynikach wyszukiwania. Często jest to tymczasowy wynik. Fakt, że strona jest w obecnej chwili wysoko nie powoduje, że tak samo będzie za kilka miesięcy. Należy też wspomnieć, że w wyniku wyszukiwania widzimy tylko część stron internetowych. W sytuacji gdy 100 sklepów internetowych ma identyczny opis produktu, to w wynikach wyszukiwania zobaczymy kilka stron, a pozostałych nie będzie widać. Google odfiltruje te strony, aby pokazać tylko najlepszą i unikalną treść.

Przykłady duplikacji treści w obrębie strony zostały opisane w tym artykule.

Może to być trudne w przypadku stron sklepów internetowych gdzie napotykamy wiele identycznych lub bardzo podobnych treści. Na przykład w takich sytuacjach:

Może to wyglądać tak:

1) ta sama strona, ale w różnych wersjach

    www.sklep.pl/zielone-skarpetki.html

    www.sklep.pl/skarpetki.php?kolor=zielone

Zdarza się, że parametry znajdujące się w adresie strony skutkują dostępnością tej samej treści pod wieloma URL'ami. To dość powszechne przy filtrowaniu lub sortowaniu treści. Wykorzystanie tagu kanonicznego pomoże ograniczyć dostęp do filtrowanych treści.

2) strona dostępna w wersji HTTP i HTTPS

Strony http://www.sklep.pl i https://www.sklep.pl wyszukiwarka odbiera jako dwie różne, ale z identyczną zawartością. Najlepiej ograniczyć się jedynie do wersji szyfrowanej strony.

3) strony www.sklep.pl i http://sklep.pl

W jaki sposób wybrać lepszą wersję strony, z www. czy bez, napisaliśmy też tutaj

Najlepszym i polecanym przez nas rozwiązaniem jest tworzenie unikalnych treści na stronach produktowych. Co jednak zrobić w sytuacji kiedy mamy duplikaty? Przede wszystkim musimy wybrać najlepszy wariant strony, w większości przypadków ograniczając się do:

stron z dodatkowymi parametrami:

    https://sklep.pl/skarpetki?color=zielone

zredukowania widoczności stron z sortowaniem:

    https://sklep.pl/akcesoriaX/sort-by/name/sort-direction/asc/

zredukowania widoczności stron z filtrowaniem:

    https://sklep.pl/akcesoriaX/price/2529-9828/

Żeby dać znać wyszukiwarkom, które adresy strony wybraliśmy, korzysta się z tagu kanonicznego lub przekierowania stałego.

Na przykład: 

    https://sklep.pl/akcesoriaX/sort-by/name/sort-direction/asc/

to sortowanie według nazwy (name - nazwa):

sort-by/name/

z wynikami pokazywanymi rosnąco (asc - ascending)

sort-direction/asc/

Strona https://sklep.pl/akcesoriaX/ - bez względu na wybrane filtrowanie czy sortowanie ma prawdopodobnie identyczną treść, dlatego sugerujemy ustawienie dodatkowego meta tagu na wszystkich stronach z sortowaniem:

<link rel="canonical" href="https://sklep.pl/akcesoriaX/" />

Tak dajemy znać wyszukiwarkom, że bez względu na sortowanie, filtrowanie czy inne jeszcze parametry, mają indeksować tylko tą jedną podstronę.

Wyszukiwarki podczas analizy treści mogą zwracać uwagę na takie elementy jak:

• data w stopce - zalecamy umieszczanie aktualnej daty
• brak fraz “domena na sprzedaż”, “domena zaparkowana” świadczących o sprzedaży lub porzuceniu strony internetowej
• “lorem ipsum” - to wypełniacz treści, który nie powinien znajdować się na zadbanej stronie internetowej

Pulno sprawdza wszystkie wybrane podstrony i wykrywa elementy mogące negatywnie wpływać na widoczność w Google.

Słowa kluczowe

Pozornie świetnym pomysłem wydawałoby się umieszczenie słów kluczowych w treści, meta opisach, nagłówkach <h1>, tytułach <title>, nazwach plików graficznych oraz w ich opisach alternatywnych. Pozornie. Bardzo łatwo może to prowadzić do przedobrzenia, czyli do przeoptymalizowania strony. Nie oznacza to, że należy ze słów kluczowych zrezygnować. W żadnym razie! Zalecamy unikanie umieszczenia słowa kluczowego jednocześnie w tagu tytułowym, nagłówku, treści, meta opisie, w alt grafik. Najlepiej jest, po prostu, zastosować wiele odmian frazy.

DANE META

Meta opisy

Meta opis to nic innego jak krótki tekst - opis strony - pojawiający się pod tytułem strony w wynikach wyszukiwania.  

W tej kwestii można zdać się na Google ponieważ wyszukiwarka stosuje dwie metody podczas tworzenia tego typu tekstów:

• jeżeli opis danej strony zawiera słowa kluczowe (czyli dokładnie takie, jakich poszukuje użytkownik) Google prawdopodobnie wyświetli zdefiniowany meta opis
• jeżeli fraz kluczowych w opisie strony nie ma, wówczas Google przypuszczalnie wybierze inny fragment treści strony - taki, który wyszukiwane słowa zawiera.

Czy i w tym drugim przypadku można zdać się na Google? Nie. Najlepszym rozwiązaniem jest samodzielne przygotowanie meta opisów i wykorzystanie ich na reklamę strony. Kilka prostych wskazówek pomoże się z tym szybko uporać.

• Po pierwsze - słowa kluczowe. Jak już wspomnieliśmy wcześniej, warto dodać frazy kluczowe do meta opisów. W wynikach wyszukiwania słowa kluczowe są pogrubione i łatwo zwracają uwagę.

• Umieszczenie Call to Action (CTA) czyli wezwania do działania. Czym jest CTA? To tekst mający zachęcić użytkownika do odwiedzenia strony, przeczytania artykułu, zakupienia towaru, np. Zobacz! Kup teraz! Nie wahaj się! Itp.

• Zachowanie długości pomiędzy 30, a 160 znakami. Dłuższe teksty mogą zostać ucięte.
• Każda z podstron powinna mieć unikalny meta opis

Meta opisy, według Google, nie mają bezpośredniego wpływu na wyniki wyszukiwania. Umieszczenie słów kluczowych jest zalecane, ze względu na wyższy CTR (współczynnik klikalności). 

Tytuły

Przy okazji meta opisów danej strony nie można nie wspomnieć o jej tytule, zwłaszcza, że wiele wskazówek dotyczących poprawnego sposobu tworzenia meta opisów pokrywa się ze sposobem pisania tytułów. Tytuł strony to tekst, który pojawia się na zakładce przeglądarki, gdy daną stronę otworzymy lub w wynikach wyszukiwania. 

Tytuły powinny:

• mieć długość do 65 znaków (wtedy mamy 90% szans, że tytuł wyświetli się poprawnie)
• być opisowe, czyli w jasny i klarowny sposób informować o zawartości strony
• zawierać słowo kluczowe
• być unikalne dla każdej podstrony

Więcej o tytułach i ich konstrukcji piszemy tutaj.

Nagłówki

Nagłówek jest najbardziej eksponowaną częścią zawartości podstrony (artykułu). 

Możemy wyróżnić sześć stopni: H1, H2, H3, H4, H5 i H6. Najważniejsze co należy zapamiętać, to żeby używać tylko jednego nagłówka H1. Pozostałe mogą być wykorzystane wielokrotnie, na przykład, do oznaczania ważności poszczególnych akapitów, ale najważniejszy i najbardziej eksponowany nagłówek H1 powinien być tylko jeden.  

ZASOBY

Grafiki

Nie ma chyba strony internetowej na której nie znalazłoby się ani jedno zdjęcie, ani jeden element graficzny. Chociaż Google w pierwszej kolejności patrzy na słowo pisane, to obrazy też przyczyniają się do oceny i wypozycjonowania strony, dlatego warto je odpowiednio zoptymalizować.

Zacznijmy od tego, że grafiki powinny być powiązane tematycznie z zawartością strony oraz odpowiednio nazwane. Aparaty oraz telefony nadają zrobionym zdjęciom losowe nazwy z ciągiem liczb:  

Dużo lepszym rozwiązaniem jest nadawanie zdjęciom nazw opisowych, informujących o tym co na danym zdjęciu się znajduje:

Drugim bardzo ważnym elementem jest alternatywny tekst (opisujący zawartość obrazka) dla plików graficznych. Dzięki temu wyszukiwarki są w stanie rozpoznać co znajduje się na obrazku. Dodatkowo jest to ułatwienie dla osób niedowidzących, korzystających z pomocy czytnika tekstu, ponieważ urządzenie to jest w stanie przeczytać tekst alternatywny. Wreszcie, jeśli z jakiegoś powodu obraz nie wgra się poprawnie to na ekranie pojawi się opis. Można w opisie alternatywnym grafiki umieścić słowa kluczowe co może pomóc w uzyskaniu ruchu z wyszukiwarek, jednak nie należy z tym przesadzać.

Po trzecie: wielkość plików graficznych. Duża liczba obrazów i wykresów pozytywnie wpływa na odbiór strony przez użytkowników, ale może powodować spowolnienie prędkości pobierania strony. Aby temu zapobiec, Google zaprojektował WebP (czyli obraz zapisany w formacie rastrowym WebP). Zapisanie obrazu w formacie .wepb powoduje zmniejszenie rozmiarów pliku graficznego w stosunku do standardowej kompresji JPEG przy zachowaniu tej samej lub podobnej jakości.

Format webp nie jest obsługiwany przez przeglądarkę Safari (aktualna lista przeglądarek obsługujących webp), ale można sobie z tym poradzić stosując tag <picture>. W artykułach na naszym blogu stosujemy grafiki w formacie webp używając kodu:

<picture>

<source type="image/webp" srcset="https://www.pulno.com/images/grafika.webp">

<img src="https://www.pulno.com/images/grafika.png" style="max-width: 100%;" alt="podstawowy wykres poziomu linkowania"

class="original-size" data-original-src="https://www.pulno.com/images/grafika.png">

</picture>

Przeglądarki obsługujące webp pobiorą plik webp, a te nieobsługujące poprawnie nowych formatów plików graficznych wyświetlą tę samą grafikę, ale w innym formacie. Optymalizacja rozmiaru plików na wpływ na szybkość pobierania stron i jest szczególnie ważna dla osób korzystających z wolniejszych łącz internetowych. 

CSS i czcionki

Dbając o wygląd naszej strony, a przy tym o przyjemność przebywania na niej, często tracimy głowę i dodajemy różne rodzaje czcionek, ozdobniki, “ulepszacze”. Problemem mogą być też wtyczki lub dodatki do stron, które zawierają dużo nadmiarowego kodu. Zdarza się, że w późniejszym czasie rezygnujemy z tego wizualnego przepychu, albo po prostu zmieniamy zdanie, ale zapominamy o usunięciu zbędnych elementów z kodu. Dodatkowe, niepotrzebne informacje umieszczone w kodzie wpływają negatywnie na prędkość wczytywania strony, dlatego warto pamiętać i usuwać zbędne czcionki czy nadliczbowe elementy kodu CSS. Każde odchudzenie strony z nadmiarowego kodu oznacza szybsze działanie strony. 

Instrukcję dotyczącą odchudzania kodu CSS opisywaliśmy wcześniej tutaj.

LINKI

Struktura linków znajdujących się na stronie powinna być przejrzysta. Należy upewnić się, że do wszystkich podstron prowadzą odnośniki, a do najważniejszych podstron linki znajdują się nie więcej niż kilka kliknięć ze strony głównej (aby uzyskać jak najniższy poziom linkowania).

Najistotniejsze jest sprawdzenie czy wszystkie linki, które znajdują się w witrynie działają. Zepsute linki mają negatywny wpływ na ocenę strony i mogą powodować, że roboty wyszukiwarek odwiedzają dany serwis rzadziej. Niedziałające, nieaktualne odnośniki trzeba usunąć lub naprawić, żeby nie ryzykować obniżenia pozycji strony w wynikach wyszukiwania.

Kolejna kwestia to przekierowania. Mimo, że według Google stosowanie przekierowań wewnątrz serwisu nie powoduje utraty mocy linków, znacznie lepiej ich unikać, a linki z przekierowaniami zmienić na bezpośrednie. Każde przekierowanie to kolejne zapytanie powodujące dłuższy czas ładowania strony. Linkowanie wewnętrzne łatwo kontrolować i usunąć niepotrzebne przekierowania.

W linkowaniu wewnętrznym dobrze jest też unikać linków nofollow, a jeśli mamy podstrony, których nie chcemy indeksować, zastosować meta tag ‘robots noindex’. Atrybut nofollow przyda się natomiast do oznaczania stron zewnętrznych, do których jakości nie jesteśmy pewni. Do takich stron można na przykład zaliczyć linki znajdujące się w komentarzach i treściach tworzonych przez użytkowników, czyli UGC - user-generated content.

SZYBKOŚĆ STRONY

Wykonanie powyższych czynności przyczyni się do szybkości działania serwisu. Prędkość ładowania i generowania strony ma już bezpośrednie przełożenie na ustalanie pozycji w wynikach wyszukiwania przez Google. Co jeszcze, oprócz zmniejszenia rozmiaru obrazów, kompresji CSS czy ograniczenia liczby przekierowań można zrobić by zwiększenia szybkości działania strony? Można wykorzystać skrypty asynchroniczne, zmniejszyć czas odpowiedzi serwera, a dla stron opartych na CMS Wordpress użyć wtyczki opartej na korzystaniu z pamięci podręcznej np. W3 cache. W prosty i szybki sposób można też poprawić wynik PageSpeed, a dokładne wskazówki znajdują się tutaj.

PODSUMOWANIE

Samodzielne zoptymalizowanie strony nie powinno nastręczyć trudności, ale manualne wyszukiwanie błędów jest zajęciem czasochłonnym. Na szczęście jest Pulno, które samo przeprowadzi analizę strony a błędy przedstawi w czytelnej formie podzielone na kategorie według stopnia ważności.  

Oprócz wskazania błędów, Pulno pomoże w ich usunięciu dzięki wytycznym znajdującym się w podpowiedziach (tooltipach).