Architektura informacji w SEO — Struktura strony i semantyka HTML

Architektura informacji na Twojej stronie składa się z dwóch elementów. Pierwszy z nich to struktura podstron w obrębie całego serwisu, która pokazuje zależności pomiędzy wszystkimi stronami. Drugi z nich to struktura elementów na danej podstronie, która pozwala na prawidłowe eksponowanie treści dla użytkowników oraz robotów wyszukiwarek.

Struktura strony a SEO

Struktura strony to jeden z najważniejszych czynników rankingowych, dzięki właściwie rozbudowanej stronie będziesz w stanie pojawić się na wszystkie słowa kluczowe używane przez Twoich potencjalnych klientów. Ułożenie struktury strony musi być poprzedzone dwoma niezbędnymi elementami:

• Analizy słów kluczowych — musisz poznać wszystkie frazy kluczowe używane przez potencjalnych klientów, by poznać ich intencje i realne potrzeby.
• Strategii SEO, czyli zaplanowania całego procesu pozyskiwania ruchu.

Dopiero po przeanalizowaniu wszystkich fraz kluczowych oraz przygotowaniu właściwej strategii, będziesz mógł, a w zasadzie powinieneś, przygotować strukturę strony, która przyniesie maksymalny ruch i wielu klientów.

Najważniejsze elementy struktury

Zobacz grafikę, która doskonale przedstawia poszczególne elementy podstrony oraz typy słów kluczowych, na jakie powinny się one pojawiać w Google.

Najważniejsze, na które trzeba zwrócić uwagę to:

• Strona główna — słowa związane z nazwą firmy lub ogólnie opisaną działalnością (sklep zoologiczny, firma remontowa, itd.)
• Kategoria produktów — podstrona kategorii zawierająca produkty związane z wyszukiwaniem (sukienki na wesele, narzędzia budowlane, itd.)
• Strona produktowa — podstrona dedykowana jednemu konkretnemu produktowi (telewizor Sony KD-49XG8096, wkrętarka MAKITA DDF458RTJ, itd.)
• Kategoria usług — podstrona dedykowana zbiorowi powiązanych ze sobą usług (usługi prawnicze, usługi księgowe, itd.)
• Konkretna usługa — podstrona dedykowana konkretnej usłudze (sprawy karne, księgowość dla spółek itd.)
• Treści poradnikowe — wpis na blogu, strona z najczęstszymi pytaniami. Ogólnie wszystkie treści zawierające informacje szukane przez potencjalnych klientów.

Chcesz się nauczyć skutecznie pozyskiwać klientów z Google? Zobacz nasz kurs SEO, który jest instrukcją działania krok po kroku.

Strona główna

Struktura strony, powinna być zbudowana od ogółu do szczegółu. Najbardziej ogólną stroną Twojego serwisu jest strona główna. Powinni na nią trafić osoby ogólnie szukające Twojej firmy lub ogólnego tematu związanego z Twoją działalnością.

Na jakie frazy optymalizować stronę główną? Aby to określić, wystarczy, że zadasz sobie pytanie — Czym jest moja firma? Odpowiedz na to pytanie w kilku słowach (maksymalnie 50 znaków ze spacją). Dzięki temu będziesz wiedzieć, co wpisać w tytuł strony głównej. Na końcu tytułu dodaj nazwę firmy:

• Internetowy sklep zoologiczny – [nazwa sklepu]
• Sklep z odzieżą online – [nazwa sklepu]
• Renomowana kancelaria adwokacka – [nazwa kancelarii]
• Nowoczesne meble na wymiar – [nazwa firmy]
• itd

Projektowanie całej struktury od zacznij od strony głównej, ponieważ wszystkie inne podstrony będą podlegać właśnie jej. Zastanów się, czy standardowy podział na produkty, usługi i ich kategorie jest wystarczający. Jeśli nie, to utwórz dodatkowe podziały (np. na części działalności firmy itp.).

Strony zbiorcze

Kolejnym poziomem w strukturze są strony zbiorcze. Będą to wszelkiego rodzaju kategorie (produktów, usług, poradników). Mają one za zadanie przyciągnąć użytkownika, który nie wie jeszcze, czego konkretnie szuka. Na przykład, gdy szuka butów sportowych, ale nie zna jeszcze modelu.

Strony zbiorcze można zawężać, tworząc kolejne strony zbiorcze o mniejszym zakresie. Np. kategoria buty sportowe, może dzielić się dodatkowo na: buty do biegania, buty na siłownię itd. Dzięki temu tworzysz podstrony, które będą optymalizowane na konkretne frazy kluczowe.

Dokładny układ kategorii oraz nazwy poszczególnych elementów będą zależały od Twojego biznesu, oraz słów kluczowych, jakich używają potencjalni klienci.

Strony produktów, usług lub wpisów

Strony produktowe lub usługowe oraz wpisy, to elementy, które znajdują się najniżej w strukturze. Są one najbardziej szczegółowe, dlatego powinny być optymalizowane na szczegółowe frazy kluczowe z nimi związane. Osoby szukające tych produktów wiedzą czego potrzebują i powinni trafić od razu na taką stronę.

Przykładowa struktura strony

Poniżej możesz zobaczyć przykładową strukturę dla sklepu z meblami, który dodatkowo zajmuje się projektowaniem i renowacją mebli. Każdy element struktury to jedna podstrona, natomiast w nawiasie znajdują się przykładowe słowa kluczowe.

Zasady budowania struktury

Niestety nie ma uniwersalnej struktury, która zawsze będzie dobra. Wiele zależy tutaj od Twojej działalności oraz od tego jak szukają Cię Twoi klienci. Natomiast istnieje kilka ważnych zasad, które możesz zastosować:

1. Jedna podstrona, powinna być optymalizowana tylko na jeden temat. Nie możesz tworzyć kilku podstron o tym samym produkcie lub kategorii, ponieważ Google nie będzie wiedział, którą nich pokazać jako wynik wyszukiwania.
2. Struktura powinna odzwierciedlać Twój biznes. Każda usługa powinna posiadać swoją podstronę.
3. Struktura powinna pokazywać treści od ogółu do szczegółu (Strona główna > Kategorie > Konkretne produkty / usługi).
4. Strony w strukturze powinny wzajemnie ze sobą linkować. Strony wyższego rzędu powinny linkować do stron podrzędnych, dodatkowo każda strona powinna linkować do stron równorzędnych (jeśli takie istnieją).
5. Strony, które nie będą generować ruchu (nie będą optymalizowane na frazy), nie powinny być uwzględniane w strukturze.

Bez globalnego podejścia oraz bez dokładnie zaplanowanej struktury nie zdobędziesz maksymalnej ilości ruchu.

Semantyka HTML

Semantyka HTML to element strukturyzujący treści na poziomie jednej podstrony. W skali makro (cały serwis) różne podstrony tworzą logicznie ułożoną całość, natomiast w skali mikro (jedna podstrona), różne elementy podstrony powinny tworzyć prawidłową logikę informacji.

Zapewne wiesz, że HTML jest systemem znaczników odpowiedzialnych na budowę stron internetowych. To dzięki HTML oraz stylowaniu za pomocą CSS strony posiadają odpowiedni wygląd. Zanim rozpowszechniono używanie HTML5, wszystkie znaczniki były równe i służyły jedynie do grupowania treści (znacznik <div>), co prowadziło do stosowania różnych standardów.

HTML5

Probrem ze standaryzacją elementów rozwiązał HTML w wersji 5. Autorzy koncepcji wprowadzili kilka dodatkowych znaczników, które z technicznego punku widzenia mają identycznie działanie jak używany wcześniej <div>. Są to:

• <main> – główna treść strony
• <nav> – główna nawigacja strony (menu)
• <article> – niezależna treść, która jest logiczna po wyjęciu z kontekstu, jakim jest strona. Na przykład, gdy wydrukujesz zawartość znacznika.
• <section> – element definiujący sekcję, część większego dokumentu
• <aside> – element zawierający treść poboczną, taką jak sidebar czy reklama.
• <header> – nagłówek sekcji, artykułu lub całego dokumentu, który zawiera wstęp np. tytuł i wstęp.
• <footer> – stopka sekcji, artykuły lub całego dokumentu.

Z technicznego punku widzenia, znaczniki te niczym się nie różnią, jednak mają one duże znaczenie jeżeli chodzi o semantykę kodu. Dzięki nim, roboty wyszukiwarek są w stanie lepiej rozumieć treść strony.

Robot Google wie, że najważniejsza część strony znajduje się w znacznikach <main> i że największą uwagę należy zwrócić na znaczniki takie jak <article> oraz <section>. Będzie też wiedział, gdzie znajduje się nawigacja i co należy pominąć w analizach treści (<aside>).

Przykładowy layout strony z zastosowaniem prawidłowej semantyki strony możesz zobaczyć poniższej grafice:

Nagłówki H1-H6

Ważną rolę w przedstawianiu struktury pojedynczej strony pełnią nagłówki. Ich struktura poniekąd przedstawia spis treści strony, który daje pogląd na zawartość dokumentu. Działa to dokładnie tak samo jak w standardowych edytorach tekstu — jeśli poprawnie używasz nagłówków, to jesteś w stanie wygenerować poprawny spis treść pracy, którą piszesz.

Warto pamiętać, że każdy element semantyczny w HTML, może posiadać swoją strukturę nagłówków, zaczynając od H1 i kończąc na nagłówku H6. Oznacza to, że każde <section>, <article> czy nawet <footer>, może mieć swój nagłówek H1 i jest to sytuacja poprawna. Można też zaczynać od nagłówków drugiego czy trzeciego rzędu, ważne, by trzymać się kolejności i zagłębienia.

Document outline

Document outline to algorytm, który analizuje znaczniki HTML oraz nagłówki, tworząc swoisty spis treści danej podstrony. Dzięki niemu jesteś w stanie sprawdzić, czy Twoje treści są właściwie uporządkowane. Poprawność własnej strony możesz sprawdzić w poniższym narzędziu:
https://gsnedders.html5.org/outliner/

Zachęcam też do korzystania ze wtyczki do Chrome nazwanej HTML5 Outliner. Dzięki niej bardzo szybko sprawdzisz dokument outline dla każdej podstrony.

Co to właściwie daje? Dzięki szybkiemu sprawdzeniu takiego „spisu treści” danej podstrony, wiesz, jak mniej więcej Twoje treści są odczytane przez roboty wyszukiwarek. Jeśli spis jest dla ciebie logiczny, to wszystko w porządku. Jeśli jednak nie przedstawiłbyś tej treści za pomocą takich nagłówków, to będziesz musiał poprawiać stronę.

Zobacz na poniższe przykłady spisów treści, sprawdzone przez wtyczkę HTML5 Outliner. Są to przykłady dwóch stron konkurencyjnych. Który z nich wydaje Ci się lepszy?

Podsumowanie

Struktura na poziomie całego serwisu (struktura podstron) oraz struktura na poziomie podstrony (struktura elementów na podstronie) to dwa najważniejsze elementy tworzące architekturę informacji Twojego serwisu. Dzięki właściwym ich zastosowaniu, zarówno użytkownicy (potencjalni klienci), jak i roboty wyszukiwarek takich jak Google będą w stanie o wiele szybciej odnaleźć się na Twojej stronie. Warto zadbać o optymalizacje tych elementów, ponieważ przełoży się to na zysk Twojej firmy.