Image for Jak zoptymalizować strukturę HTML pod SEO i WCAG?

Jak zoptymalizować strukturę HTML pod SEO i WCAG?

Czas czytania:

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> informacje kontaktowe
HTML
HTML
<address>
PSD2CSS.pl<br>
ul. Czerniakowska 71 / 501<br>
00-715 Warszawa<br>
<br>
</address>
– <footer> informacje na temat autora, praw autorskich i linków powiązanych ze stroną
HTML
HTML
<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> znajdują się w nim elementy do nawigacji po stronie
HTML
HTML
<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> tematyczna grupa treści
HTML
HTML
<section>
    <h5>Pomoc i wsparcie</h5>
    <p>pn-pt, 08:00 - 17:00 (GMT+1)</p>
</section>
– <header> informacje wprowadzające, zwykle stały element na samej górze strony
HTML
HTML
<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>
– <aside> wstawka nieznacznie powiązana z treścią elementu, w którym się znajduje
HTML
HTML
<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>

Tytuły zwięźle opisujące całą zawartość

Nie doszliśmy (jeszcze) do poziomu, w którym program sam opisałby każdy element na stronie. Warto mieć to na uwadze i dodawać opisy, które zwiększą ilość informacji przeczytanych przez oprogramowanie. Wstawiając tytuły, opisy, transkrypcje wideo zapewniamy dostęp strony dla szerszego grona odbiorców.

Pomocne atrybuty:

HTML
HTML
<!-- 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

HTML
HTML
<!-- 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.

HTML
HTML
<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.

HTML
HTML
<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.

    Więc potrzebne mi SEO i WCAG?

    Jeśli podczas czytania tego wpisu nadal nie masz jasno sprecyzowanej odpowiedzi na to pytanie to – tak! Stosując się do powyższych reguł stworzysz serwis nie tylko bardziej przyjazny dla użytkowników, ale również dla robotów / czytników ekranowych. Strona będzie w znacznym stopniu lepiej oceniana przez algorytmy wyszukiwarek, a użytkownicy z włączonymi czytnikami ekranu poczują znaczną swobodę w przeglądaniu serwisu i interakcje z nim.

    zapraszamy do kontaktu

    UI2WEB.com jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce /PHP/ HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end.

    Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość.

    Zapraszamy do kontaktu

    Może Cię również zainteresować:

    Co wyróżnia profesjonalne wdrożenie serwisu bazującego na WordPress?

    Post pochodzi z naszych kanałów w Social Media. — Nasi klienci często pytają, czym różnią… Read More

    Czy warto decydować się na usługę wdrożenia WooCommerce i na czym ona polega?

    Wtyczka do WordPressa WooCommerce wydaje się być prostym sposobem na stworzenie sklepu internetowego. Wystarczy instalacja,… Read More