Styl H2, to nie H2 i odwrotnie

Za bardzo przywykłeś do gotowych templatek za 20 dolarów z ThemeForest i edytora wizualnego. Serio. Rozrzucanie przypadkowych fraz po stałych elementach na swoim blogu czy sklepie internetowym to zła praktyka i dziś powiem Ci dlaczego.

Poznaj Justynę. Justyna ma 32 lata, kruczoczarne włosy, doskonale czuje się poza domem, a po pracy prowadzi małego bloga, który docelowo miałby stać się jej podstawowym źródłem dochodu. Justyna podróżuje po świecie – a jako, że na storytellingu zna się lepiej niż początkujący deweloper na Magento, to pół roku temu uruchomiła bloga, w którym opisuje swoje wyprawy. Problem w tym, że jej blog ma tak przypadkową architekturę, jak tylko mieć może. Nagłówki porządkowe, hierarchiczne <h> lądują wszędzie – w śródtytułach, module ankiety, linkach wewnętrznych w footerze i innych elementach typu side-wide, które są stałe, niezmienne, a przecież przeliczane przez algorytm dla każdego jednego URL’a z osobna. Dlaczego? Justyna nie do końca rozumie SEO, a po drugie – kupiła gotowca z ThemeForest.

Co złego w gotowych szablonach do WordPressa, czy też Presty? Jeśli potrafisz z nimi pracować, to tak doprawdy niewiele, ale jeśli nie znasz różnicy między stylem przyporządkowanym do nagłówka H2 a samym nagłówkiem H2, to już całkiem sporo.

Jak wygląda typowa struktura gotowego szablonu?

1, 2, 3 nagłówki H1 lub ich zupełny brak, 15 nagłówków H2, 10 nagłówków H3, 10 nagłówków H4, 5 nagłówków H5 i przy odrobinie szczęścia tyle samo H6.

Poza tymi zwielokrotnionymi nagłówkami H1, do reszty liczb nie mógłbym się przyczepić, gdyby nie fakt, że H2, H3, H4, H5, H6 poza tym, że są przypisywane przypadkowo przez właściciela bloga/sklepu odpowiednio w treści wpisu i w treści opisu produktu, to cała reszta jest przypisana:

• albo do elementów niezmiennych w architekturze informacji,
• albo do elementów dynamicznych, nad którymi nie ma większej kontroli.

Rzućmy okiem na pierwszy lepszy przykład. Wchodzę na ThemeForest, wybieram WordPress i eCommerce. Żebyś nie miał wątpliwości, że materiał jest zmanipulowany, a ja wybieram same szablony-odpady, wybieram pierwszy szablon z listy i jest nim Qualis – Organic Food Responsive eCommerce WordPress Theme.

A teraz biorę się za analizę kodu źródłowego i sprawdzam, do jakich elementów deweloper przypisał nagłówki porządkowe <h>

Sprawdzam szablon kategorii i mamy tak: klik.

Pomijam już puste H1, ale deweloper przewidział trzy H2, z czego 2 są przypisane do elementów dynamicznych – slidera, którego niewłaściwe wypełnienie może być źródłem kanibalizacji. I tak, dobrze się domyślasz – jest to oczywiście element site-wide’owy w każdej innej kategorii.

Zastanówmy się, dlaczego H2 ma strukturę: category: berries?

Zakładam, że to właśnie „berries” będzie frazą, na jaką będziemy pozycjonowali tę kategorię. Wobec tego, po co „category” w tym miejscu? Nie wiem.

Dalej mamy trzy nagłówki H3 przypisane do haseł reklamowych wyświetlanych w sidebarze – a ten box’ w sidebarze jest oczywiście elementem site-wide’owym, czyli wyświetlanym w tym samym miejscu na wszystkich podstronach. Czyli niezależnie od tego, czy robot trafi na kategorię: bierries, czy też na kategorię: pineapples, najważniejsza zawartość każdej z kategorii jest do siebie łudząco podobna.

Dalej osiem nagłówków H4 z czego połowa to znów elementy z banera reklamowego side-wide, a potem kolejno hasło reklamowe zachęcające do skorzystania z newslettera oraz elementy nawigacji w stopce – również site-wide.

I na koniec H5 – jako NEWSLETTER.

Wynik jest taki, że robot krążący między różnymi kategoriami ma problem z ułożeniem wyników w SERP’ach i zaczyna dochodzić do takich anomalii, że kategoria: berries zaczyna rankować na kombinację różnych elementów nagłówków <h>, np. berries discount (która jest wypadkową fragmentu H2 oraz H4).

Pojawia się pytanie:

„No dobra, ale w tym złego, że mój sklep rankuje na „berries doscount”? To dla mnie nie gra większej roli – zależy mi przede wszystkim na berries, a to, że przy okazji mój sklep rankuje na „berries discount”? Dla mnie okej”

Takie błędy w mechanice implikują jednak dużo konsekwencji. A przynajmniej trzy.

• Po pierwsze: kanibalizacja słów kluczowych

Tak, efekt jest taki, że sklep, serwis zaczyna się kanibalizować. Jeśli we wspomnianym wcześniej sidebarze właściciel, administrator nieświadomie zwiększyłby zagęszczenie słów kluczowych np. na inny owoc, to okaże się, że zwielokrotnione „apple” w H3, H4 w kategorii „berries” będzie na tyle silnym argumentem, że kategoria „berries” zacznie rankować na „apple”. A nikt nie chce, aby użytkownicy szukający sklepu spożywczego z jabłkami trafiali na jagody, prawda?

• Brak potencjału do skalowania się przy działaniach offsite

Takie nazwijmy to „rozwodnienie mocy” przez przypadkowo porozrzucane nagłówki to też powód, dla którego wypozycjonowanie „berries” na „berries” będzie wyjątkowo trudne. Dysproporcje, tj. niewłaściwą ekspozycję URL’i można byłoby wyrównać mocnymi linkami, ale to najsłabsza i najdroższa strategia, którą można byłoby tutaj zastosować.

• Zbierasz przypadkowy ruch

A w jego wyniku będziesz wykręcał coraz większe współczynniki odrzuceń, co będzie pływało nie tylko na ukrycie tych niewłaściwie eksponowanych w wynikach organicznych linków do sklepu, ale i zaniży potencjał wchodzenia w SERP’y całej domeny.

Skąd biorą się te problemy i jak je rozwiązać?

Problem z losowym rozrzucaniem nagłówków porządkowych <h> w kodzie źródłowym wynika nadal z niskiej świadomości deweloperów, którzy projektują szablony.

Front-endowcy są oczywiście lepsi i gorsi, ale można przyjąć za zasadę, że absolutnie każda strona wymaga przedwdrożeniowego audytu SEO, bo kiedy mamy do czynienia z takimi błędami, a do tego wszystkiego właściciel sklepu, bloga zdecyduje się też nadużywać nagłówków <h> w produktach, wpisach, to mamy armagedon absolutny i miesiące pracy zespołu SEO i właściciela biznesu nad tym, żeby to wszystko odkręcić.

Zacząć należałoby od podmiany nagłówków <h> na zwykłe <p> i przypisanie <h> tylko do tych elementów, wierszy, które są niezmienne, charakterystyczne dla konkretnego URL’a. Co mam na myśli? Odsyłam Was do materiału, który jest dobrym uzupełnieniem problemów omówionych w tej publikacji: „Dlaczego anchory linków wewnętrznych mogą zaburzać architekturę w e-commerce?”.

Ostatnio pytałem Klienta, dlaczego w edytorze graficznym swojego bloga posługuje się przypadkowymi znacznikami <h> – odpowiedział, że te najbardziej odpowiadają mu wizualnie. I tutaj dotykamy kolejnego problemu – silniki CMS, czy to WordPress, czy Prestashop, czy cokolwiek innego są pisane w taki sposób, że ich użytkownik nie ma możliwości posługiwania się nagłówkami, śródtytułami, które wizualnie wyglądałyby tak samo, jak np. element H2, H3, ale były tylko ostylowane w CSS, jak to H2, H3, ale formalnie – byłyby zwykłymi paragrafami.

Żeby nie było wątpliwości, nikogo nie winię, bo trudno też oczekiwać od dewelopera, że będzie znał się tak samo dobrze na swojej robocie, jak i na SEO – szczególnie, że w SEO nie ma prawd uniwersalnych i łączenie różnych mechanik daje różne wyniki. Nie sposób traktować SEO wybiórczo, bo jeśli np. bierzesz się za analizę bloga w katalogu domeny /blog/, to musisz mieć przy okazji na uwadze, że wpis jaki opublikujesz na blogu jest osadzony już w szerszym kontekście – kontekście architektury nadrzędnej całej domeny. I trudno, żeby każdą z tych okoliczności przewidział deweloper. Od tego są agencje SEO.