Quick Tip: 03. Stosuj nagłówki

Przeglądając źródła różnych stron www (HTML) często można znaleźć taki kod:

[sourcecode language=”xhtml”]

<span class="bigHeader">Mój Nagłówek</span>

<span class="newsTitle">Mój News</span>

[/sourcecode]

W ten sposób za pomocą CSS ustalamy wygląd nagłówków, tytułów artykłów, newsów, itp. Np. na codeguru.pl każdy news na stronie głównej wygląda tak:

[sourcecode language=”xhtml”]

<a class="bigWindowTitleLinked" title="tytuł" href=&#039;/url.aspx&#039;>News</a>

[/sourcecode]

Jednak pod względem optymalizacji SEO dużo lepszym rozwiązaniem jest stosowanie nagłówków <h1>, <h2>, <h3>,  itd. W ten sposób określamy ważność tekstu na stronie (<h1> jest ważniejszy od <h2>). Dla podanych przykładów wyglądałoby to tak:

[sourcecode language=”xhtml”]

<h2>Mój Nagłówek</h2>

<h2>Mój News</h2>

[/sourcecode]

Składnia prostsza, krótsza i lepiej interpretowana przez wyszukiwarki.

A dlaczego <h2> a nie <h1>? Wszystko zależy od tego, jak chcemy ustalić hierachię informacji na stronie. Jestem zwolennikiem stosowania nagłówka dla nazwy strony np.:

[sourcecode language=”xhtml”]

<h1>Mój portal</h1>

[/sourcecode]

Zmiana class=”bigHeader” na nagłówki trudna nie jest :), a zyskujemy bardzo dużo na jakości kodu w “oczach” przeglądarek.