SEO - co to i dlaczego jest tak ważne?
Cześć! Interesowało Cie kiedyś dlaczego niektóre strony są wyżej w wynikach wyszukiwania, a inne nie? Co sprawia, że wpisując kolejno podobne frazy jak "przepis na schabowe", "przepis na pierogi", "przepis na bigos" lub "przepis na tutaj wstaw swoje ulubione danie" pierwsze wyniki będą za każdym razem najprawdopodobniej pochodzić z kilku powtarzających się serwisów? To sprawa dobrego marketingu, wypracowania dobrego imienia swojej marki i w głównej mierze dobrego... "SEO".
Czyli co z tym "SEO"?
Będące skrótem od "Search Engine Optimization" jest sposobem na to, aby boty indeksujące strony, cyklicznie przemierzające internet polubiły naszą witrynę, za sprawą czego wywindowały ją wyżej w wynikach wyszukiwania. Te boty to tzw. "crawlery", czyli programy zarządzane przez przeglądarki (Google, Yahoo, Bing itd) mające oceniać wartość danej strony na podstawie treści, które na niej napotka. Crawlery każdej przeglądarki mogę się nieznacznie różnić w działaniu, natomiast mają ten sam cel - ocenić, czy strona jest wartościowa, przyjazna użytkownikom i warta zindeksowania wyżej.
Oficjalnie nie znamy dokładnie tego, w jakim stopniu i co crawlery biorą pod uwagę podczas indeksowania, mamy natomiast zbiór zasad i wskazówek, do których powinniśmy się stosować, aby zwiększyć nasze szanse na wysokie wyniki wyświetlania się w wyszukiwarkach. (Tutaj przykładowe wskazówki dotyczące SEO dla programistów od Google: https://developers.google.com/search/docs/essentials?hl=pl)
Czy sprawami SEO zajmują się programiści, czy osoby, które później będą obsługiwały tę stronę i wstawiały na nią treści?
Odpowiedź brzmi: każdy. Profesjonalnie SEO to bardzo szerokie pojęcie, w którym specjalizują się nawet całe zespoły, wpływ na nie w jakimś stopniu ma jednak każda osoba mająca do czynienia z treścią na stronie.
Najogólniej (choć nie jest to oficjalny podział, a moje "widzimisię" ;) ) SEO można podzielić na to w kodzie i poza nim.
Optymalizacja poza kodem
Można obrać różne strategie dotyczące optymalizacji pod kątem wyszukiwarek, natomiast filary pozostają takie same. Należy każdy wpis na blogu, artykuł, czy tekst na stronie pisać tak, aby "celować" w potencjalnego użytkownika. Trzeba być opisowym, ale też ludzkim w tym, co chce się przekazać. Na przykład te parenaście lat do tyłu strategie były strasznie prymitywne, posługiwano się niezliczoną ilością "keywordsów" mających na celu trafienie w jak najszersze grono odbiorców, a nie osób, które rzeczywiście szukają danej frazy.
Tytuły i teksty na stronie
Spróbuję to zobrazować na przykładzie strony sprzedającej obuwie. W tamtym okresie tytuły, czy opisy wyglądały mniej więcej tak:
męskie, mężczyźni, obuwie, buty, obuwie dla mężczyzn, męskie obuwie, buty do koszykówki, buty duże, buty małe, buty do biegania, butowe buty, buty dla kobiet, buty do siatkówki, buty rozmiar 43, buty rozmiar 44, buty rozmiar 45, buty rozmiar 46, tanie buty, promocja, buty promocja, wyprzedaż butów, buty wyprzedaż, buty dla lewonożnych, tanio i tak dalej..
Niezły bigos, co nie? Zasypywano podstronę jak największą ilością haseł z nadzieją, że może któreś trafi w frazę wpisaną przez użytkownika w wyszukiwarce, bardzo często można było zauważyć słowa, które niekoniecznie oddawały to, co znajduje się na danej stronie, ale były mniej, lub bardziej (przeważnie mniej) spokrewnione z słowem głównym. Na szczęście w obecnych czasach roboty przeglądarek są już na tyle mądre, że nie lubią takich zabiegów i skutecznie odfiltrują strony stosujące te praktyki, aby napewno miały trudniej o wyświetlanie się w wynikach. ;) O wiele lepszym pomysłem jest tekst napisany dla człowieka, a nie dla robota. Co to znaczy? Zobrazuje o co mi chodzi:
Wysokie buty męskie do koszykówki w kolorze czerwonym zapewniające najwyższy komfort rozgrywki. Wynieś swoje możliwości na wyżyny dzięki naszemu obuwiu z niesamowicie sprężystą podeszwą i przewiewną cholewką. Teraz w promocyjnej cenie.
Pewnie ten opis nie jest też idealny pokazuje natomiast o co mi chodzi, pisząc teksty na stronie musimy pamiętać o tym, żeby pisać je dla ludzi, a nie dla zadowolenia robotów (które tak na marginesie, to tego nie lubią). Czytając ten drugi przykład możesz zauważyć, że w opisie są zawarte najważniejsze informacje, ale bez niepotrzebnego forsowania keywordsów, na przykład "buty, buty, buty, buty". Powtarzanie haseł w tekście też nie jest pożądanym zjawiskiem. Należy pisać poniekąd hasłowo, ale nie należy na siłę próbować w tekście jakiegoś hasła. Jeśli nie jest to jakieś bardzo specjalistyczne słowo (jak chociażby SEO), to możemy poszukiwać synonimów słowa, przykładowo możemy zastąpić cześć wystąpień słowa buty na choćby obuwie lub trampki / sneakersy i tak dalej, w zależności od kontekstu. Podsumowując, keywordsy są piekielnie ważne, muszą natomiast występować naturalnie w treści, a nie być na siłę wpychane w losowe miejsce, byle by podbić statystyki.
Linkowanie wewnątrz strony
Czyli linki wewnątrz naszej strony kierujące użytkownika na inne miejsca, również na naszej stronie.
Na przykład mając stronę internetową z przepisami kulinarnymi na podstronie z przepisem na "Pieczonego pstrąga z szparagami", w którym potrzeba również wykonać "Sos beszamelowy", to możemy na stronie z pstrągiem zawrzeć link do strony z sosem beszamelowym. W ten sposób na naszej stronie tworzy się pajęczyna logicznie połączonych rzeczy, co pozytywnie wpływa na SEO.
Linkowanie zewnętrzne
Analogicznie jak w linkowaniu zewnętrznym, natomiast linki pochodzą z innych stron niż nasza, na przykład z stron, na których polecają naszą i mają na niej link do naszej witryny. Takie linkowanie z wysoko ocenianych i wartościowych stron bardzo pozytywnie wpływa na naszą stronę i jej pozycje w wyszukiwarce. Natomiast nie pomyśl, że większa ilość linków z zewnątrz zawsze da pozytywne efekty, możesz podlinkować swoją stronę i milion razy z zewnątrz (poprzez choćby kupno linkowania), ale co z tego, skoro to na przykład będą niezbyt wartościowe witryny, uznane przez crawlery jako potencjalny spam. Taki zabieg może nie przynieść zamierzonych efektów, mało tego, istnieje szansa, że nasza strona również zostanie uznana, jako zamieszana w niezbyt czyste akcje i jej wartość w "oczach" botów wyszukiwarek spadnie. Do tego dochodzi kwestia atrybutów "nofollow" i "noreferrer", ale o tym w sekcji dotyczącej SEO w kodzie. :)
Lokalne wyszukiwanie
Gdy działamy lokalnie dobrym pomysłem będzie zawarcie obszaru, w którym oferujemy nasze usługi. Na przykład gdy prowadzimy pizzerię w miejscowości XYZ, to możemy w tytule strony uwzględnić ten aspekt, na przykład ".... Najlepsza pizza w XYZ"
Optymalizacja w kodzie
Jeśli chodzi o kwestie kodu, to jedne rzeczy są mniej ważne, drugie bardziej, a jeszcze inne może prawie w ogóle, chciałbym tylko wspomnieć, że mimo wszystko najlepiej dążyć do możliwie najbardziej dopracowanej wersji, bo skupiając się tylko na SEO nie zapomnijmy o pozostałych - równie ważnych aspektach takich jak choćby dostępność, UX, czy wydajność. :)
Semantyczne nagłówki, Od H1 do H6.
Nagłówki są elementami na stronie, które poniekąd dyktują nam jej strukturę. H1 to najważniejszy nagłówek na stronie, może być tylko jeden H1 na podstronę (!!!!!!). Kolejne powinny iść zgodnie z ich wartością w dół, na przykład:
H1 - Tytuł strony, najważniejszy i unikalny nagłówek H2 - Tytuły sekcji, mogę występować wielokrotnie, to najważniejszy użytkowy nagłówek (Ponieważ H1 jest czymś nadrzędnym, unikalnym w obrębie strony, gdzie H2 są używalne wiele razy) H3-H6 - Wedle uznania i wcześniej przytoczonej kolejności używane nagłówki, gdzie im wyższa liczba, tym mniejsza ich wartość semantyczna, czyli wartość dla SEO. Czyli nagłówki H6
H1: Tytuł Strony
H2: Nagłówek Sekcji
H3: Podsekcja
H3: Podsekcja
H4: Pod-podsekcja
H5: Pod-pod-podsekcja
H2: Kolejny Nagłówek Sekcji
H3: Podsekcja
H3: Podsekcja
Atrybuty ALT w zdjęciach
To w pierwszej kolejności sprawa mająca poprawić wrażenia osobom korzystającym z czytników ekranów, czy dać informację w momencie, gdy zdjęcie z jakiegoś powodu się nie załaduje. Natomiast dodanie atrybutu "alt" ma spory wpływ na to, jak crawlery postrzegają nasza stronę, to jest dobra praktyka, aby prawie zawsze go dodawać (poza odosobnionymi przypadkami, gdzie zdjęcie jest elementem czysto ozdobnym i nie powinno mieć jakiegoś znaczenia semantycznego). Rzecz jasna crawlery nie widzą obrazów, a określają je na podstawie przedstawionych im danych, między innymi atrybutu "alt".
Poprawne metatagi
Nieco powiązane z tworzeniem tytułów i treści z poprzedniej sekcji, gdzie opisywałem SEO nie związane bezpośrednio z kodem. Ważne jest, aby każda podstrona miała adekwatny tytuł, opis, oraz poprawnie nadane pozostałe metatagi w tagu <head/>
Przykładowe tagi:
Meta Tag dla Opisu (Description) Ten tag służy do dostarczenia krótkiego opisu treści strony, który może być wykorzystany w wynikach wyszukiwania.
<meta name="description" content="Krótki, opisowy tekst, który opisuje zawartość strony.">
Meta Tag dla Tytułu (Title) Ten tag definiuje tytuł strony, który pojawia się na pasku przeglądarki. Jest również używany w wynikach wyszukiwania.
<title>Tytuł Strony</title>
Meta Tag dla Słów Kluczowych (Keywords) Kiedyś popularny, obecnie ten tag jest rzadko stosowany przez wyszukiwarki, ale niektóre strony wciąż go używają.
<meta name="keywords" content="słowo1, słowo2, słowo3">
Meta Tag dla Wersji Językowej (Language) Wskazuje język strony. Może być przydatny dla lokalizacji i SEO związane z konkretnym językiem.
<meta name="language" content="pl">
Meta Tag dla Robotów (Robots) Określa, czy roboty wyszukiwarek mają indeksować i śledzić linki na stronie. Popularne wartości to "index", "noindex", "follow", "nofollow".
<meta name="robots" content="index, follow">
Meta Tag dla Canonical URL Wskaźnik głównej, kanonicznej wersji strony, co pomaga w unikaniu problemów związanych z duplikacją treści:
<link rel="canonical" href="https://www.example.com/strona">
Meta Tag dla Autora Informuje o autorze treści na stronie.
<meta name="author" content="Imię Nazwisko">
Robots.txt
Plik na Twojej stronie, który mówi robotom jakich stron mają nie indeksować. Na przykład z pewnością nie chcesz, aby próbowały dostać się na Twoją stronę 404, albo do admin panelu. Z pomocą przychodzi plik robots.txt, w którym możesz wypisać instrukcje, których roboty nie powinny próbować indeksować. Poniżej przykład takiego pliku :)
robots.txt
User-agent: googlebot
Disallow: /checkout/
Disallow: /icons/
Sitemapy
Plik mówiący robotom jak wygląda struktura naszej strony. Dzięki niemu jest im łatwiej zindeksować całość i mamy pewność, że dotrą do każdego jej zakamarka. Ponadto możemy priorytezować ważniejsze strony, oraz nadawać mniejsza wagę tym mniej waznym, tak jak to widać w snippecie poniżej. Takie rozwiązanie jest zawsze dobre, natomiast czasem jest nawet poniekąd konieczne, tak jak ma to miejsce w przypadku choćby React bez SSR. Obecnie odchodzi się od czystego Reacta na rzecz frameworków obsługujących już renderowanie serwerowe będące błogosławieństwem dla SEO. W natywnym React wszystko działo się na żądanie klienta, a co za tym idzie strona była generowana dopiero po wysłaniu zapytania czyli roboty nie widziały struktury strony, bo jej zwyczajnie nie było w tym momencie, a więc nie mogły jej poprawnie zindeksować gdy nie było zawartej sitemapy.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://strona.pl/</loc>
<priority>1.00</priority>
</url>
<url>
<loc>https://strona.pl/podstrona/</loc>
<priority>0.50</priority>
</url>
</urlset>
Optymalizacja rozmiarów mediów
Im filmy, audio, czy zdjęcia mniej ważą, tym lepiej, ponieważ nasza strona nie tyje aż tyle, co jest pozytywnym zjawiskiem dla SEO. Skupię się tutaj na zdjęciach. Należy się starać aby możliwie zredukować ich rozmiar bez zauważalnego pogorszenia jakości. Wiele kompilatorów pod spodem już kompresuje przesłane obrazy, a jeśli nie, to jest mnóstwo paczek, które to obsługują za nas (na przykład "sharp" działająca na serwerze lub przy buildzie). Niemniej należy dokonać wszelkich starań, aby to jeszcze poprawić, dobrą praktyką jest serwowanie odpowiednich rozmiarów obrazów dla różnych urządzeń. Przecież na smartfonie nie potrzebujemy tak wysokiej rozdzielczości zdjęcia jak na monitorze 4K, ponieważ prawdopodobnie i tak nei zauważymy różnicy na mniejszym urządzeniu, gdy zdjęcie będzie w niższej rozdzielczości, a większe zdjęcie = większa ilość używanej pamięci, prawda? Miejmy kilka rozmiarów zdjęć, dla różnych rozmiarów urządzeń (na przykład zdjęcia w rozmiarach: mobile, tablet i desktop). Dodatkowo pewnie w większości przypadków używasz zdjęciach w formatach .jpg lub .png? Dlaczego by nie skorzystać z formatu .webp, który jest nowocześniejszy i co najważniejsze - zajmuje o wiele mniej miejsca od pozostałych (i jest już wspierany przez wszystkie współczesne przeglądarki). To dwa narzędzia do optymalizacji, które baaardzo polecam i sam z nich korzystam:
TinyPNG do kompresji: https://tinypng.com/ Cloudconvert do konwersji: https://cloudconvert.com/
(Używam obu na raz do optymalizacji zdjęcia).
Możecie zobaczyć porównanie zdjęć: nieskompresowanego jpg, skompresowanego w TinyPNG oraz skompresowanego i przekonwertowanego na webp w Cloudconvert. Redukcja rozmiaru bez utraty na jakości jest gigantyczna, a im większy plik, tym te zyski są jeszcze bardziej pokaźne! ;)
Podsumowanie
Nie jestem specjalistą od SEO, dzielę się jedynie swoimi doświadczeniami i spostrzeżeniami, które mam nadzieję, że się komuś przydadzą. Pamiętajcie też, że SEO w kodzie to jedno, ale późniejsze objęcie sterów i kampanie w serwisach internetowych są przeprowadzane przez całe firmy, które się w tym specjalizują, także ten temat jest o wiele szerszy niż go przedstawiłem, a na efekty w związku ze zmianami w naszych strategiach SEO trzeba czekać dniami, tygodniami, a czasem nawet miesiącami!
Przydatne narzędzia do sprawdzania i szukania błędów na naszej stronie. Nie wszystko co powiedzą jest święte, często trzeba to też weryfikować swoją wiedzą. :) Są to checkery, które głównie kładą nacisk na wydajność strony, ale wpisuje się to też w lepsze wyniki SEO.
https://pagespeed.web.dev/ https://gtmetrix.com/ https://www.webpagetest.org/lighthouse
Oraz dla ciekawych link do strony Google, gdzie specjaliści opisują kwestie crawlerów dokładniej: https://developers.google.com/search/docs/fundamentals/how-search-works?hl=pl
Dzięki za uwagę! Cya!
~Bartek ;)
