10.1 Semantyczne znaczniki
SEO (optymalizacja dla wyszukiwarek) odgrywa ważną rolę w tworzeniu stron internetowych, pomagając poprawić widoczność stron internetowych w wynikach wyszukiwarek. Nowoczesne znaczniki HTML mają znaczący wpływ na SEO, pomagając wyszukiwarkom lepiej zrozumieć i indeksować treści. Przyjrzyjmy się głównym aspektom wpływu SEO na nowoczesne znaczniki HTML.
Semantyczne znaczniki HTML5 pomagają wyszukiwarkom zrozumieć strukturę i zawartość strony internetowej. Użycie odpowiednich znaczników poprawia dostępność i czyni treści bardziej zrozumiałymi dla wyszukiwarek.
Przykłady semantycznych znaczników:
<header>: nagłówek strony lub sekcji<nav>: linki nawigacyjne<main>: główna zawartość strony<section>: tematycznie powiązana sekcja<article>: niezależny blok treści<aside>: dodatkowe informacje lub panel boczny<footer>: stopka strony lub sekcji
Przykład użycia:
<body>
<header>
<h1>Nagłówek witryny</h1>
<nav>
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O nas</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artykuł 1</h2>
<p>Treść artykułu...</p>
</article>
<section>
<h2>Sekcja</h2>
<p>Treść sekcji...</p>
</section>
</main>
<aside>
<h2>Panel boczny</h2>
<p>Dodatkowe informacje...</p>
</aside>
<footer>
<p>© 2024 Moja witryna. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
10.2 Mikroformaty
Mikroformaty (structured data) są używane do dostarczania wyszukiwarkom dodatkowych informacji o zawartości strony. Pomagają one wyszukiwarkom lepiej zrozumieć treść i poprawiają widoczność strony w wynikach wyszukiwania.
Przykłady schematów (Schema.org):
- Article: dla artykułów i wiadomości
- BreadcrumbList: dla ścieżek nawigacyjnych
- Product: dla opisów produktów
- Event: dla opisów wydarzeń
Przykład użycia mikroformatów:
<body>
<article>
<h1>Nagłówek artykułu</h1>
<p>Autor: Imię autora</p>
<p>Data publikacji: 1 stycznia 2024 r.</p>
<img src="https://example.com/image.jpg" alt="Przykład obrazu">
<p>Treść artykułu...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Nagłówek artykułu",
"author": "Imię autora",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Optymalizacja nagłówków i meta-tagów
Nagłówki i meta-tagi odgrywają kluczową rolę w SEO, dostarczając wyszukiwarkom i użytkownikom informacji o zawartości strony.
Meta-tagi:
<title>: tytuł strony wyświetlany w wynikach wyszukiwania<meta name="description">: opis strony używany w snippetach wyników wyszukiwania<meta name="keywords">: słowa kluczowe (nie mają dużego znaczenia dla nowoczesnych wyszukiwarek)
Przykład użycia meta-tagów:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład tytułu strony</title>
<meta name="description" content="To jest przykład opisu strony dla SEO.">
<meta name="keywords" content="przykład, SEO, HTML">
</head>
<body>
<h1>Tytuł strony</h1>
<p>Treść strony...</p>
</body>
</html>
10.4 Optymalizacja obrazów
Optymalizacja obrazów obejmuje użycie atrybutów alt i title, a także zapewnienie szybkiego czasu ładowania dzięki użyciu kompresji i nowoczesnych formatów obrazów (np. WebP).
Przykład użycia:
<body>
<h1>Przykład optymalizacji obrazów</h1>
<img src="example.jpg" alt="Opis obrazu" title="Tytuł obrazu" loading="lazy">
</body>
10.5 Chlebowe okruszki
Chlebowe okruszki (breadcrumbs) to elementy nawigacyjne, które pokazują ścieżkę użytkownika od strony głównej do aktualnej strony. Pomagają użytkownikom łatwo poruszać się po witrynie, zapewniając linki do poprzednich poziomów nawigacji. Jest to ważny element interfejsu użytkownika, szczególnie dla dużych witryn z głęboką hierarchią stron.
Podstawowe aspekty chlebowych okruszków
Chlebowe okruszki to ciąg linków, który zazwyczaj wyświetlany jest na górze strony pod nagłówkiem lub menu. Każdy link w ciągu prowadzi do jednej ze stron, przez które użytkownik przechodził, aby dotrzeć do aktualnej strony.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Strona główna</a></li>
<li class="breadcrumb-item"><a href="/category">Kategoria</a></li>
<li class="breadcrumb-item active" aria-current="page">Aktualna strona</li>
</ol>
</nav>
Rodzaje chlebowych okruszków:
-
Hierarchiczne: pokazują hierarchię witryny, zaczynając od strony głównej.
- Przykład: Strona główna > Kategoria > Podkategoria > Aktualna strona
-
Chronologiczne: pokazują sekwencję działań użytkownika, co jest szczególnie przydatne w procesie wieloetapowej nawigacji lub zakupów.
- Przykład: Strona główna > Kategoria > Produkt > Koszyk > Finalizacja zamówienia
-
Atrybutowe: są używane do wyświetlania atrybutów lub tagów aktualnej strony, szczególnie przydatne dla witryn z dużą liczbą kategorii i filtrów.
- Przykład: Strona główna > Elektronika > Telefony komórkowe > Smartfony > Apple
Zalety chlebowych okruszków:
- Poprawa nawigacji: pozwalają użytkownikom szybko wrócić do poprzednich stron.
- Zalety SEO: pomagają wyszukiwarkom zrozumieć strukturę witryny i poprawić jej indeksowalność.
- Ułatwienie użytkowania: czynią witrynę bardziej intuicyjną i łatwą w użyciu.
- Zmniejszenie współczynnika odrzuceń: ułatwiają nawigację, co może zmniejszyć współczynnik odrzuceń, ponieważ użytkownicy mogą łatwo wrócić do poprzednich stron, zamiast opuszczać witrynę.
Zalety dla SEO
Chlebowe okruszki odgrywają ważną rolę w SEO, ponieważ pomagają wyszukiwarkom lepiej zrozumieć strukturę witryny i poprawiają nawigację dla użytkowników. Prawidłowe użycie chlebowych okruszków może pozytywnie wpłynąć na pozycjonowanie witryny w wynikach wyszukiwania.
GO TO FULL VERSION