Co należy wiedzieć o optymalizacji strony internetowej, aby osiągnąć zamierzony efekt i nie zrujnować własnego budżetu, oraz w jaki sposób można wykonać to samodzielnie.
Strona internetowa to jeden z pierwszych elementów, które są dostępne dla naszego potencjalnego klienta. Pozwala ona zaprezentować firmę jako taką, kim jest i gdzie się znajduje, ale również przedstawić ofertę usług lub produktów, które oferuje. Strona www to również pewnego rodzaju wyznacznik jakości, jaką przedstawia nasza firma, bo czy jako potencjalny odbiorca nie mamy większego zaufania do wizualnie lepiej przedstawionych materiałów, niż do tych, które merytorycznie mogą być zdecydowanie lepsze, ale ich opakowanie (czyli wygląd strony internetowej) nie zachęca, a nierzadko odstrasza.
- SEO Search Engine Optimalization – optymalizacja stron dla wyszukiwarek
- Audyt strony internetowej pod kątem SEO – analiza strony
- Optymalizacja adresów URL
- Meta dane – Tytuł i opisy dla wyszukiwarki
- Treści strony internetowej a optymalizacja
- Grafika na stronie internetowej i jej optymalizacja
- Czas ładowania strony internetowej
- Pozostałe elementy związane z optymalizacją strony internetowej
- Podsumowanie optymalizacji stron www
SEO – Search Engine Optimalization – Optymalizacja Strony dla Wyszukiwarek
Na początek warto wyjaśnić podstawowy zwrot SEO. Rozwinięciem skrótu SEO jest Search Engine Optimalization, czyli w bezpośrednim tłumaczeniu Optymalizacja Silnika Wyszukiwarki. Nie brzmi to jednak poprawnie, dlatego właściwszą formą będzie Optymalizacja dla Wyszukiwarek.
Zatem skąd mamy wiedzieć, czy nasza strona w ogóle potrzebuje tej całej optymalizacji ?
Audyt strony internetowej pod kątem SEO – analiza strony www
Pierwszym krokiem przed rozpoczęciem jakichkolwiek działań jest audyt strony internetowej, czyli zbadanie jej w celu wyszukania błędów i elementów, które wymagają poprawy. Brzmi prosto, jednak jak to zrobić, aby taki audyt był prosty do wykonania. Obecnie w Internecie można znaleźć wiele narzędzi, które pomagają wykonać tego typu audyt bezpłatnie! Wprawdzie najczęściej będzie to jedynie jedna strona lub audyt częściowy, jednak na początek to już coś.
Jednym z narzędzi, które pomagają w przeprowadzeniu podstawowego audytu będzie np. seoptimer.com. Jest to dość przystępne narzędzie, które umożliwia sprawdzenie za darmo strony głównej naszej strony internetowej. Oczywiście audyt strony głównej to trochę mało, ale na początek może być. Już na podstawie takiego audytu zobaczymy jakie elementy wymagają naszej uwagi i zapewne te same błędy znajdują się również na podstronach.
Jednak nie audytu dotyczy ten wpis, a samej optymalizacji dlatego przejdźmy do sedna.
Optymalizacja adresów URL
Strona internetowa, którą badamy pod względem SEO, musi posiadać przyjazne adresu URL, czyli strukturę linków, która dla nas zwykłych ludzi będzie zrozumiała. Dla przykładu przedstawię dwa typy adresu URL:
- Nie przyjazny, który wygląda np. tak: https://www.adres-strony.pl/p-12?/we92/cont2.html
Patrząc na powyższy przykład widzimy, iż jedynym zrozumiałym elementem w tym adresie, jest sam adres strony, wszystko, co występuje dalej, jest mało intuicyjne, a w zasadzie nie jesteśmy w stanie określić przypuszczalnej zawartości podstrony, której dotyczy, bez jej odwiedzenia. Poniżej natomiast wskazany został adres, który z punktu widzenia SEO będzie poprawny:
Na podstawie powyższego adresu już możemy domyślać się zawartości podstron, które w nim występują.
Zatem aby nasza strona była przyjazna wyszukiwarkom, ale też użytkownikom, adresy muszą być przyjazne.
Meta dane – Tytuły i opisy dla wyszukiwarki
Adres jest zatem pierwszym elementem, który pomaga określić zawartość, zarówno dla użytkownika, jak i dla samej wyszukiwarki. Jednak czy jest coś jeszcze co pomaga wyszukiwarce określić zawartość, a nie jest to sama treść strony? Owszem!
Do dyspozycji posiadamy meta dane. Nas interesują w zasadzie trzy konkretne:
1. Meta tytuł – Title – Tytuł strony internetowej.
To właśnie ten element naszej strony internetowej, który wyświetla się na pasku wyszukiwarki u samej góry oraz jest to ten tytuł, który pojawia się w wynikach wyszukiwarki jako największa pozycja wpisu. Możemy wpływać na to, co wyszukiwarka określi jako tytuł dla naszej strony i tutaj dobrą praktyką jest umieszczenie tytułu zawierającego kluczowe słowa opisujące naszą stronę / podstronę w odpowiedniej ilości znaków lub pikseli, które w danej chwili wyświetla Google. Obecnie przyjmuje się, iż jest to maksymalnie 70 znaków, jednak nie jest tak zawsze. Pamiętajmy jednak, iż czasem wyszukiwarka sama decyduje co wrzuci jako tytuł, dlatego należy podchodzić do tego elementu bardzo uważnie.
2. Meta description – Czyli opis strony internetowej.
Pole opisu strony internetowej jest elementem, w ubiegłych miesiącach i latach, który dość często zmieniał się w wyszukiwarce internetowej, i mowa tu o długości, czyli ilości znaków zawierających się w tym polu. Na chwilę obecną ilość ta powinna zawierać się w maksymalnie 135 znakach, jednak tutaj też mamy do dyspozycji określoną ilość miejsca, a jak wiemy znak znakowi wielkością nie jest równy. Meta opis powinien być streszczeniem zawartości strony, również opisując tę zawartość słowami, na których nam najbardziej zależy. Jest to opis, który pojawia się pod tytułem, kiedy szukamy strony internetowej w wyszukiwarce, jednak nie zawsze pojawia się tam to, co chcielibyśmy aby zostało wyświetlone, czasem treść umieszczona w tej sekcji jest budowana na podstawie treści zawartej na samej stronie www.
3. Keywords – słowa kluczowe
Istnieje pole, które przed laty pozwalało wpisywać wprost słowa kluczowe, dla których nasza strona miała być wyświetlana, jednak liczne nadużycia mocno zmniejszyły jego znaczenie. Sam osobiście widziałem niejednokrotnie strony internetowe, których pole keywords zawierało więcej treści niż sama strona. Na dzień dzisiejszy część wyszukiwarek w dalszym ciągu bierze pod uwagę to pole, jednak nie ma ono kluczowego znaczenia, ponieważ wyszukiwarki starają się określić główne słowa kluczowe na podstawie treści znajdującej się na samej stronie.
Powyższe elementy są częściowo widoczne dla nas, jednak podczas przeglądania samej strony internetowej nie dostrzegamy ich, a jak widać są niezwykle istotne.
Treść strony internetowej a optymalizacja SEO
Artykuł miał dotyczyć optymalizacji, a cały wątek puki co dotyczy treści i słów. Dlaczego jest to takie istotne? Otóż to jak nasza strona wyświetla się w Internecie w dużej mierze zależy od tego, co oferuje, jeżeli nie posiada treści, lub treść jest niska jakościowo, wtedy nie zasługuje na to aby ją promować i przedstawiać użytkownikom. Przeciwnie, jeżeli ma coś istotnego do zaoferowania, materiał, który wnosi coś do społeczności i jest poszukiwany, w tedy możemy liczyć, iż zaowocuje to wyższymi pozycjami w wyszukiwarce.
Dlatego istotna jest również treść samej strony i tutaj po raz kolejny należy podzielić ją na kilka istotnych punktów:
- Nagłówki – występuje kilka typów nagłówków, od H1 do H6 gdzie H1 jest najistotniejszy. Obecnie na stronie / podstronie powinien występować jeden nagłówek H1, który jest głównym tytułem opisującym zawartość tej strony. Każdy kolejny nagłówek powinien opisywać elementy istotne w ramach tematu w zależności od ich ważności. W przypadku pozostałych nagłówków od H2 do H6 możliwe jest stosowanie np. dwóch lub trzech (i więcej) nagłówków tego typu, które opisują działy naszego tematu.
- Treść strony internetowej – sednem strony internetowej jest treść, którą chcemy przekazać naszemu czytelnikowi, czy to opis usług, czy produktów. Dlatego sama treść powinna być rozbudowana i opisująca tematykę. Jeżeli umieścimy jedno zdanie lub kilka punktów bez rozwinięcia zagadnienia, nie możemy oczekiwać niczego konkretnego. W końcu czym będziemy się wyróżniać od setek innych stron internetowych? Dlatego warto umieścić odpowiednią ilość treści, tutaj wyznacznikiem jest między innymi stosunek kodu strony do samej treści gdzie absolutnym minimum jest 10% treści do 90% kodu strony. Jak to jednak wygląda pod względem ilościowym dla podstron, tutaj absolutnym minimum ilości treści jest około 500 znaków. Jednak czy sami czytając zaledwie kilka linijek tekstu bylibyśmy usatysfakcjonowani i nasza potrzeba uzyskania informacji zostałaby zaspokojona? Nie sądzę. Dlatego starajmy się dostarczać rozbudowane treści w formie opisowej, które będą zarówno doskonałym materiałem dla wyszukiwarki, ale również dobrym źródłem informacji dla naszego czytelnika.
- Pogrubienia – oczywiście nie może zabraknąć pogrubień istotnych treści.
Treść zabrała znaczną część naszego elaboratu, dlatego może czas przejść do kolejnego kroku.
Grafika na stronie internetowej i jej optymalizacja
Umieszczając grafikę, w tym zdjęcia i pliki graficzne należy zwracać uwagę na wiele elementów. Wyszukiwarka określa zawartość strony również na podstawie grafik na niej umieszczonych. Tutaj nasza optymalizacja rozbija się już na dwa elementy:
- Wydajność
- Kwestia informacyjna
W przypadku pierwszej należy pamiętać o umieszczaniu zdjęć w rozmiarze, jaki finalnie będzie wyświetlany. Dla przykładu, jeżeli zdjęcie na stronie wyświetlane jest w rozmiarze 500 pikseli biorąc pod uwagę szerokość, to nie ma sensu wgrywać na stronę zdjęcia o szerokości 3000 pikseli i zmniejszać go kodem. Wykonanie takiej czynności jest błędem, ponieważ, zamiast ładować mały plik o wielkości kilkunastu do kilku dziesięciu kilobajtów, nierzadko ładowany podczas otwierania się strony internetowej jest plik o wielkości kilku megabajtów. Mamy zatem niepotrzebną stratę miejsca na naszym serwerze, wydłużony czas ładowania się strony internetowej, i frustrację odbiorcy oczekującego na załadowanie się zdjęcia. Dodatkowo optymalizując stronę internetową warto pamiętać o bezstratnej kompresji grafiki, co pozwoli zaoszczędzić dodatkowe kilobajty, lub zastosować grafiki nowej generacji promowane przez Google, czyli webp.
Odnosząc się natomiast do drugiej kwestii związanej z grafiką na stronie internetowej, czyli kwestii informacyjnej, należy wskazać trzy kolejne elementy:
- Nazwa pliku graficznego / obrazu. Sama nazwa może być doskonałym sposobem na umieszczenie słowa kluczowego, ponieważ plik w kodzie również wyświetla się jako ciąg znaków, który może być odczytywany przez wyszukiwarki.
- Tekst alternatywny, czyli ALT. Tekst alternatywny to opis pliku graficznego, który wyświetla się w sytuacji, w której nasza przeglądarka nie potrafi lub nie może załadować grafiki. Zamiast grafiki, w jej miejscu wyświetlana jest treść oznaczona jako ALT, ponadto opisuje on również dany plik pod względem zawartości, sytuacji lub okoliczności. Warto wykorzystać ten element, który wspomaga pojawianie się dla danych słów kluczowych naszych plików w wyszukiwarkach.
- Metadane pliku graficznego. Pliki graficzne również zawierają dane opisowe, które na co dzień nie są widoczne, bez uprzedniego ich wywołania. Najczęściej większość tych danych znajdziemy wywołując właściwości pliku. Są to między innymi nazwa autora, urządzenie, jakim wykonano zdjęcie, lokalizacja zdjęcia, oraz inne, jakie zostały zdefiniowane. Bardziej gorliwi fani optymalizacji SEO poświęcają czas również na tę kwestię, aby wyszukiwarka precyzyjniej określała grafikę i przypisywała ją do fraz, na których zależy danej osobie.
W kwestii samej grafiki, na zakończenie warto dodać, iż przeglądarki dopuszczają stosowanie grafik SVG, są to pliki wektorowe o niewielkim rozmiarze, najczęściej kilku kilobajtów zawierające rysunek, ikonę lub podobne dzieło. Podczas tworzenia strony internetowej warto również zastępować tła, w których zwykle stosowaliśmy teksturę, kodem CSS opisującym wygląd np. Tła. W znaczący sposób możemy w ten sposób ograniczyć wielkość naszej strony, a co za tym idzie skrócić czas jej ładowania.
Czas ładowania strony internetowej
Analizując kolejno kwestie związane z optymalizacją strony internetowej można odnieść wrażenie, iż w pierwszej kolejności chodzi o wartościową zawartość strony, w drugiej natomiast o odpowiednie, a zarazem szybkie i proste przekazanie tej zawartości naszemu czytelnikowi.
Dlatego podczas optymalizacji strony www szczególny nacisk kładzie się na szybkość wczytywania strony internetowej. Do badania szybkości strony może nam posłużyć wiele narzędzi dostępnych w Internecie. Najprostszym jest Google Page Speed Insight dostarczany przez Google. Jest to dość proste wręcz prymitywne narzędzie do badania szybkości wczytywania strony internetowej oraz wskazywania elementów, które powodują opóźnienia, jednak na początek będzie ono wystarczające. W dalszej drodze warto sięgnąć po bardziej zaawansowane oprogramowanie, które wskaże szczegółowo, z czym nasza strona ma problem podczas ładowania.
Wracając natomiast do kwestii związanej z optymalizacją czasu ładowania wskazać należy na dwa elementy nieodzowne w budowie strony www. Elementami tymi jest CSS i JS. Pierwszy z nich opisuje każdy element znajdujący się na stronie internetowej, dla przykładu przycisk, jak ma wyglądać, jaka ma w nim występować czcionka, jak ma wyglądać po najechaniu na niego myszą i po wciśnięciu. Drugi, czyli JS służy do kwestii związanych z funkcjonowaniem strony w trakcie jej odbioru – dla przykładu może on wywoływać określone zachowania elementów po odpowiedniej interakcji.
Rozwój tego pierwszego, czyli CSS, pozwala coraz częściej stosować go do zadań, w których dawniej wymagany był JS, jednak nie o tym mowa. Z całą pewnością w pierwszej kolejności należy skompresować nasze pliki i w przypadku CSS plik poddany zabiegowi minimalizacji będzie w nazwie posiadał min. Zarówno jeden, jak i drugi może zostać pozbawiony zbędnych znaków i elementów, które pozwolą zredukować jego wielkość. Kolejnym etapem będzie połączenie w miarę możliwości wszystkich plików CSS, w jeden plik, aby ograniczyć ładowanie dodatkowych zasobów. Rozwiązanie to oczywiście ma też minusy, ale częściej daje pozytywny, niż negatywny efekt.
W przypadku plików JS należy również uwzględniać asynchroniczne ładowanie, co powoduje braki opóźnień przy ładowaniu całej strony.
Zatem optymalizując naszą stronę musimy zwrócić szczególną uwagę na to, jakie pliki CSS i JS są ładowane, i co możemy zrobić aby ograniczyć ich ilość, i zmniejszyć wpływ na ładowanie całej strony.
Pozostałe elementy związane z optymalizacją
Po wykonaniu powyższych czynności, które w mojej ocenie są najbardziej czasochłonne, oraz wymagają od nas największych zasobów czasu, warto zwrócić uwagę na pozostałe elementy związane z optymalizacją strony internetowej.
htaccess i kompresja i cache
Większość serwerów posiada obecnie pamięć podręczną (cache). Aktywowanie tej funkcji znacząco wpływa na czas ładowania i ogólnego wrażenia odbioru strony pod względem szybkości. Najczęściej elementy związane z pamięcią podręczną, w tym również typów plików, jakie będą uwzględniane, definiuje się w pliku htaccess. Zacznijmy zatem od tego, czym jest pamięć podręczna przeglądarki, ponieważ to na niej opierają się wartości wskazane w cache pliku htaccess. Pamięć podręczna przeglądarki to zbiór plików pobranych ze strony, które są przechowywane przez określony w pliku htaccess czas na naszym komputerze, aby uniknąć konieczności ich ponownego pobierania przy kolejnym odwiedzeniu tej witryny. Zatem jeżeli mamy aktywną pamięć podręczną przeglądarki, strona przy każdym kolejnym otworzeniu, będzie wczytywać się niemal błyskawicznie, ponieważ przeglądarka sprawdza, czy zaszły zmiany w wersjach plików, i jeżeli tak to pobierze tylko te nowe. Sam serwer również posiada swoje pamięci cache, jednak zależne jest to w dużej mierze od konfiguracji serwera, i należy weryfikować to każdorazowo według specyfikacji określonej przez dostawcę usługi.
Podsumowanie optymalizacji stron www
Optymalizacja strony internetowej to jak widać w przedstawionym materiale, proces nie tyle trudny co złożony, ponieważ składa się na niego wiele elementów. Część możemy wykonać samodzielnie bez większej wiedzy programistycznej jak modyfikacje treści, nagłówków i metadanych. Część modyfikacji niestety bez dodatkowej wiedzy możemy nie być w stanie wykonać jak optymalizacje wydajności i szybkości. Zawsze jednak warto przed każdą modyfikacją wykonać kopię zapasową strony internetowej, aby możliwe było odzyskanie strony w razie naszego błędu. Zatem zachęcam do prób, natomiast jeżeli nie czujesz się na siłach, aby wykonać optymalizację samodzielnie, zachęcam do kontaktu.