Jak zoptymalizować strukturę HTML pod SEO i WCAG?

Zoptymalizowanie struktury HTML jest niezbędne, aby wyszukiwarki internetowe np. Google, Bing wyświetlały naszą stronę na wysokich pozycjach w wynikach wyszukiwania (SEO) i ułatwić dostęp do serwisu również osobom z niepełnosprawnościami (WCAG).

Roboty przemierzające sieć w celu dodania/zaktualizowania informacji nie widzą strony tak jak zwykły użytkownik. Analizują kod źródłowy i dzięki zaawansowanemu skryptowi potrafią ocenić zawartość w zależności od struktury serwisu. Osoby z niepełnosprawnościami korzystają z czytników ekranu, które działają na podobnej zasadzie i jak sama nazwa wskazuje „czytają” im stronę. Programy niestety nie są w stanie wszystkiego zrozumieć. Niezbędna jest więc modyfikacja struktury HTML.

Sprawdźmy więc najważniejsze zmiany struktury HTML, które powinny znaleźć się na naszej stronie, aby zwiększyć jej czytelność dla wyszukiwarek, jak i czytników ekranowych.

Jaka sekcja, do czego służy?

HTML5 wprowadził nowe znaczniki takie jak <footer> <header>, które obsługiwane są przez współczesne przeglądarki. Dzięki nim można przypisać tag dla elementu, który będzie „czytany” z określonym priorytetem. Przykładowo: oprogramowaniu ciężko jednoznacznie stwierdzić, że zawarte w bloku linki odpowiadają za nawigację. Rozwiązanie: lepiej użyć znacznika <nav>, który jest bardziej zrozumiały dla czytników ekranowych i lepiej go zaprezentują użytkownikowi.

Jeśli dla danej sekcji istnieje znacznik warto go zastosować zamiast zwykłego elementu blokowego jak DIV. Musimy pamiętać, że chcemy zbudować stronę przyjazną dla wszystkich użytkowników.

Krótki opis i przykładowe użycia najczęściej stosowanych znaczników:

<address>
PSD2CSS.pl<br>
ul. Czerniakowska 71 / 501<br>
00-715 Warszawa<br>
<br>
</address>

<footer>
   <a href="http://www.madeinwarsaw.net/" title="Made in Warsaw" target="_blank">
      <img src="logo.png" alt="Made in Warsaw"
   </a>
   <p>Wszelkie prawa zastrzeżone, kopiowanie i rozpowszechnianie bez zgody autora zabronione.</p>
   <a href="https://gogomedia.pl" title="GOGOmedia Software House" target="_blank">GOGOmedia Software House</a>
</footer>

<nav>
    <ul>
        <li><a href="/uslugi" title="Usługi">Usługi</a></li>
        <li><a href="/kodowanie-psd-do-html5" title="HTML5">HTML5</a></li>
        <li><a href="/kodowanie-psd-do-bootstrap" title="Bootstrap">Bootstrap</a></li>
    </ul>
</nav>

<section>
    <h5>Pomoc i wsparcie</h5>
    <p>pn-pt, 08:00 - 17:00 (GMT+1)</p>
</section>

<header>
    <a href="/" title="Strona główna PSD2CSS.pl">
        <img src="logo.png" alt="Responsywne Kodowanie PSD do HTML5">
    </a>
    <a href="/wycen-on-line" title="Bezpłatna wycena">Bezpłatna wycena</a>
</header>

<article>
    <p>Jak zoptymalizować strukturę HTML pod SEO i WCAG?</p>
    <aside>
        <p>Optymalizacja SEO to długotrwała inwestycja</p>
    </aside>
    <p>Więcej informacji o optymalizowaniu struktury</p>
</article>

<!-- Dodanie opisów do zdjęć -->
<img alt="Logo serwisu PSD2CSS">

 <!-- Dodanie etykietek dla danych wejściowych -->
<label for="etykietka">Etykietka:</label>
<input type="text" name="etykietka" id="etykietka" />

<!-- Ustawienie wymagania dla odpowiednich pól -->
<input type="text" name="etykietka" id="etykietka" required>

Typowe błędy

<!-- Opis obrazka nie opisuje zawartości -->
<img alt="Obrazek" src="logo.png">
<!-- Poprawiona wersja -->
<img alt="Logo serwisu PSD2CSS" src="logo.png">

<!-- Mało zrozumiały tytuł strony -->
<title>HTML SEO WCAG</title>
<!-- Poprawiona wersja -->
<title>Jak zoptymalizować strukturę HTML pod SEO i WCAG?</title>

<!-- Nieintuicyjna nazwa łącza -->
<a href="/">Główna</a>
<!-- Poprawiona wersja -->
<a href="/">Strona główna</a>

<!-- Brak transkrypcji wideo -->
<video src="wideo.ogg" autoplay poster="wideo.jpg"></video>
<!-- Poprawiona wersja -->
<video src="wideo.ogg">
    <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="foo.pl.vtt" srclang="pl" label="Polski">
</video>

Nagłówki przyciągają uwagę

Przeglądając gazety zwykle skaczemy po nagłówkach i wybieramy interesujące nas tematy, które będziemy zgłębiać. Nie bez powodu nazywane są w dzisiejszych czasach drewnianym Internetem skoro strony opierają się na tej samej zasadzie. Widzimy stronę z wyróżnionym tytułem na samej górze, podtytułem i kilkoma sekcjami zawartymi w podtytule. Przy tworzeniu stron stosuje się do tego celu znaczniki od <h1> do <h6> odpowiadające za nagłówki.

Najbardziej istotny, czyli tytuł powinien mieć największą wartość. Używamy do tego znacznika <h1>, który powinien występować tylko jeden raz na stronie.

<h1>Jak zoptymalizować strukturę HTML pod SEO i WCAG?</h1>

Każdy kolejny znacznik nagłówka zwiększa liczbę o jeden, nadaje mu to mniejsze znaczenie w stosunku do poprzedniego. Uwaga: jeśli jest powiązany tematycznie.

Wycinek kodu poniżej pokazuje tę zależność. <h3> jest kontynuacją tematu rozpoczętego tematu „Jaka sekcja, do czego służy?” więc nie może być od niego ważniejszy.

<h1>Jak zoptymalizować strukturę HTML pod SEO i WCAG?</h1>
<p>...</p>
<h2>Jaka sekcja, do czego służy?</h2>
<p>...</p>
<h3>Krótki opis i przykładowe użycia najczęściej stosowanych znaczników:</h3>
<p>...</p>
<h2>Tytuły zwięźle opisujące całą zawartość</h2>

Znajdowanie nowych treści na stronie

Zdarza się, że użytkownik ma problem ze znalezieniem nowych treści w serwisie, do których linki nie są intuicyjne. Roboty i czytniki ekranowe mają dzięki temu jeszcze bardziej utrudnioną pracę. Ułatwić może w tym implementacja kilku alternatywnych ścieżek do znalezienia informacji.

Lista powiązanych tematycznie artykułów 

Generowanie linków w panelu bocznym z powiązanymi artykułami mogą potencjalnie zainteresować użytkownika.

Spis treści i Breadcrumb (okruszki chleba)

Zapewnienie użytkownikowi poczucie bezpieczeństwa na stronie i szybkiego powrotu do wcześniej przeglądanych stron.

Generowanie sitemap (mapy witryny)

Zawiera szczegółowe informacje dotyczące wszystkich adresów URL witryny.

Wyszukiwarka

Możliwość szybkiego przeszukania całej witryny za pomocą jednego kliknięcia.