SEO - najważniejsze zasady dla programistów

Wiesz, że w SEO chodzi o to żeby jakaś strona była wysoko w wynikach wyszukiwania, ale to by było na tyle? Niekoniecznie chcesz stawać się ekspertem, ale czujesz, że fajnie by było znać solidne podstawy? A może traktujesz to na poważnie i chcesz zrobić u klienta lub u siebie fenomenalną robotę i to początek Twojej przygody?

W którykolwiek scenariusz się nie wpisujesz - to materiał dla Ciebie. Będzie jak zwykle - krótko, zwięźle i na temat.

Szybka definicja

Optymalizacja pod silniki wyszukiwania, bo to właśnie oznacza SEO, stało się już ładnych parę lat temu znacznie trudniejsze niż na początku. Kiedyś można było stosować hacki, typu powtarzanie jakichś słów kluczowych dziesiątki razy w treści.

Po prostu algorytmy były jeszcze dość prymitywne, a mechanizmy wyłapywania “oszustów” niewystarczająco skuteczne. Gdy widziały tysiąc razy powtórzone słowo “karma dla psa” - to zakładało, że musi tam być sporo istotnej treści dla kogoś kto szuka jedzenia dla pupila.

Dziś SEO to przede wszystkim dobre, angażujące treści. Takie, do których ludzie wracają, takie, które chcą udostępniać, wchodzić z nimi w interakcję (komentować, lajkować). Mechanizmy są znacznie bardziej wyszukane i potrafią ocenić czy Twoja strona jest ciekawa, a Ty godny zaufania. Tylko na tę część misji, programiści mają często zerowy wpływ.

Na co więc mamy?

On-page SEO

Pod tym określeniem kryją się wszystkie praktyki poprawiające naszą pozycję w wyszukiwarkach, które stosujemy na stronie. Takie jak:

Pisanie angażujących treści z wykorzystaniem odpowiednich słów kluczowych
Optymalizowanie prędkości działania strony
Korzystanie z ustrukturyzowanych danych (poszukaj u mnie artykułu o JSON-LD, mega ciekawe!) w kodzie
Dostosowanie strony do różnego rozmiaru urządzeń
…oraz inne “dobre praktyki” pracy z kodem

Pojawia się pytanie…

Czy można w ogóle robić coś “poza stroną” żeby poprawić jej pozycję? Tak, wszystkie tego typu praktyki wiążą się z promowaniem naszej witryny w innych, “szanowanych” albo przynajmniej popularnych serwisach. Mówi się na nie off-page SEO.

W dużym uproszczeniu - im częściej link do naszych treści będzie pojawiał się na godnych zaufania stronach, tym wyższy ranking będziemy zyskiwać. Im starsza i bardziej popularna jest domena, z której kierowany jest do nas ruch - tym lepiej.

To działa w dwie strony, pojawianie się na szkodliwych stronach, na przykład oszukujących odbiorców, może nas plasować niżej.

Czy warto?

Ponownie, ze strony programisty, pole do popisu jest nieco mniejsze. Co więcej, musimy zrozumieć, że najważniejsza jest treść strony i to czy ludzie realnie się nią interesują.

Źle napisany kod, niedostępna strona - to coś co oczywiście będzie sabotować wysiłki ludzi, którzy uzupełniają ją treścią. W skrajnym przypadku, może te wysiłki zupełnie udaremnić. Ale na samym końcu, kluczowe jest czy tę stronę użytkownicy internetu będą chcieć odwiedzać. Czy będzie dla nich ciekawa.

Przykładem na to są stare serwisy informacyjne, takie jak Onet, Interia. Dawno nie sprawdzałem ich kodu, ale jeszcze niedawno był on według raportów Google po prostu fatalny jak na dzisiejsze standardy. Mimo wszystko, pozycjonują się bardzo wysoko.

Ale to nie znaczy, że nie możemy zrobić nic. Bo możemy wiele. W dodatku będzie to mieć duże znaczenie dla nowej strony, dla młodej firmy, która nie ma wyrobionej marki i rozpoznawalności w sieci.

Co można zrobić?

Przedstawię Ci zaraz kilka złych (unikaj ich!) oraz dobrych praktyk, które zwiększą realnie Twoje lub Twojego klienta szanse na wysoką pozycję w Google.

Struktura adresów

Trochę bardziej przystępnym językiem - chodzi o to jak wyglądają linki do Twojej strony. Wyobraźmy sobie, że masz sklep z zabawkami. Jak może wyglądać link, który prowadzi do produktu, który chcesz sprzedawać na walentynki.

Przykład nieoptymalnego adresu

http://wesolowo.org/products?id=d4ag657ih122zcsads3121235cc&data=6EE2BF1AF6A3D70

Małe wyzwanie: czy uda Ci się odgadnąć co to za zabawka, po samym adresie?

Odpowiedź: nie ma szans żeby to odgadnąć, wyszukiwarce też to się nie uda. Ok, co więc dokładnie jest nie tak z tym linkiem i jak go naprawić?

Po pierwsze, prowadzi do strony używającej protokołu HTTP zamiast bezpieczniejszego HTTPS (który szyfruje dane). Google ocenia takie strony jako mniej godne zaufania, słusznie zresztą.
Nazwa domeny - teoretycznie brzmi przyjemnie. Niestety niewiele mówi o tym jakiego w ogóle typu treści można się spodziewać. Oczywiście nie zawsze mamy już na to wpływ, bo firma może istnieć pod jakąś nazwą od lat. Jednak przykładem optymalnej nazwy byłoby w naszym przypadku na przykład “super-zabawki.pl”.
Później mamy słowo kluczowe odnoszące się do “produktów”, czyli zbyt ogólnie. W dodatku w innym języku niż treść strony. Generalnie URL zawiera w większości nic nie znaczące słowa i znaki. Powinno być na odwrót. Optymalnie jest gdy od razu widzimy co sprzedaje strona, jak nazywa się produkt i w jakiej jest kategorii.

Na co jeszcze zwracać uwagę?

Jak łączysz słowa, to używaj - zamiast _. Są to wytyczne prosto od Google.
Nie zlepiaj kilku słów w jedno, na przykład miszserduszkiem
Unikaj długich identyfikatorów, które nie nadają zrozumiałego dla człowieka znaczenia
Jeżeli chcesz używać znaków specyficznych dla innych języków niż angielski, to możesz - ale nie bezpośrednio. Musisz je zakodować w formacie UTF-8.
Odradza się używania emoji i innych znaków spoza ASCII.

Jak powinien wyglądać adres dobry dla SEO

Przykładem poprawnego, pod względem SEO adresu będzie:

https://super-zabawki.pl/dla-dzieci/mis-z-serduszkiem

Dlaczego jest znacznie lepszy?

Zmieniono protokół na bezpieczniejszy.
Nazwa domeny zawiera istotne słowa kluczowe
Kategoria też zawiera słowa kluczowe, grupę docelową
Nazwa produktu jest również jego prostym opisem.

Ze sporym prawdopodobieństwem, ktoś mógłby wpisać w Google frazę, która w 3/4 pokrywa się z całym URL.

Praca z linkami wewnętrznymi

Zakładając, że stosujesz poprawny wygląd adresów wewnątrz swojej domeny, możesz popełnić jeszcze kilka gaf. Sprowadza się to głównie do niestosowania standardowych tagów i atrybutów.

Poprawny link wygląda tak:

<a href="samochody/mercedes-c-sedan">Mercedes Benz C200, 4Matic, z polskiego salonu</a>

Przykładami złych linków, które Google teoretycznie może rozpoznać, ale są przez nich odradzane:

<a linkTo="samochody/mercedes-c-sedan">.../a>
<span href="samochody/mercedes-c-sedan">...</a>
<a onclick="goto('<https://twoja-fura.org/samochody/mercedes-c-sedan>')">

Zasada jest prosta - trzymaj się dokumentacji HTML i pisz semantyczny kod. Jak nie wiesz jak to robić, to zerknij do takiej kategorii na moim blogu. Jest na ten temat kilka wartościowych artykułów.

WARNING:

Jeszcze jeden przypadek tutaj wspomnę. Jeżeli używasz linku, to zawsze musi on mieć dostępny tytuł. To znaczy, że albo musisz dać między tagami <a href="/home">Czekolada do picia</a> jakiś tekst, który wskazuje co znajduje się pod linkiem, albo użyć atrybutu aria-label="Czekolada do picia". Kiedy możesz użyć atrybutu ARIA? Na przykład gdy linkiem jest ikona, obrazek.

Pamiętaj to tym co napisałem pogrubionymi literami. Popularna praktyka tworzenia linku o napisie “kliknij tutaj” jest zła. Wpływa negatywnie zarówno na SEO jak i dostępność strony.

Sitemap

Mapa strony to dokument opisujący miejsca, w które powinny zaglądać boty skanujące Twoją stronę. Możemy też określić priorytet (priority) niektórych stron oraz to jak często jest zwykle aktualizowana (changefreq).

Jeżeli trzymamy się dobrych praktyk związanych z linkowaniem wewnętrznym (przykłady wyżej), to raczej będzie dla nas zbędna.

Potrzebna będzie wtedy gdy do danych stron nie prowadzi żaden link.

Oraz wtedy kiedy nasze strony mają dużo treści multimedialnych - filmów, obrazów. Dzięki sitemap’ie, Google będzie mogło łatwiej wyłapać i odpowiednio oznaczyć te treści.

Przykładowa mapa strony w formacie XML:

1<?xml version="1.0" encoding="UTF-8"?>
2<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
3   <url>
4      <loc><https://example.com/page1></loc>
5      <lastmod>2024-02-13</lastmod>
6      <changefreq>monthly</changefreq>
7      <priority>0.8</priority>
8   </url>
9   <url>
10      <loc><https://example.com/page2></loc>
11      <lastmod>2024-02-10</lastmod>
12      <changefreq>weekly</changefreq>
13      <priority>0.9</priority>
14   </url>
15   <url>
16      <loc><https://example.com/page3></loc>
17      <lastmod>2024-02-05</lastmod>
18      <changefreq>daily</changefreq>
19      <priority>1.0</priority>
20   </url>
21</urlset>

Poprawne, podstawowe metadane

To niby oczywiste, ale jednak zdarza się o tym zapomnieć. Podstawą poprawnego oznaczania strony i jej treści jest poprawne użycie tagów <title> oraz <meta name="description" />

Tytuł i opis powinny zawierać przynajmniej jedno ważne słowo kluczowe. Jeżeli ktoś użyje je podczas wyszukiwania, zostaną one wyszczególnione (pogrubione).

Poniżej przykład wyniku wyszukiwania frazy “pogoda cieszyn”

Co jeszcze?

Z totalnie niezbędnych rzeczy do zrobienia, to na pewno nie można zapomnieć o pisaniu semantycznego HTML. Dzięki temu będziemy mieć pewność, że strona jest odpowiednio zrozumiana przez wyszukiwarki.

Nie ma dużo czytania, a zdecydowanie jest tam sporo wartościowej wiedzy. Dla SEO krytyczne będzie poprawne używanie tagów nagłówków (H1-H6).