7 lipca 2014

Optymalizacja i pozycjonowanie blogspota - Nagłówki H1, H2 & H3

Nagłówki służą do hierarchizacji treści w dokumencie HTML. Jest 6 nagłówków. Wśród tych sześciu znaczników, znacznik H1 jest najważniejszy, a następnie H2, H3 i tak dalej. Domyślnie Blogger wykorzystuje znaczniki H1 do tytułu bloga, H3 tytułów postów i H2 dla tytułów widget'ów z bocznego paska. Z punktu widzenia SEO, nie jest to najlepsze ustawienie dlatego ten poradnik pokaże Ci jak to zmienić.


Jak używać znaczniki nagłówków?


Znaczniki powinny być przypisane do tytułów na podstawie priorytetów. Najważniejszą pozycją na stronie powinniśmy zamknąć w znaczniku H1. Na stronie postu, najważniejszy jest tytuł wpisu. Nazwa bloga i nagłówki paska bocznego nie są tak ważne, jak tytuł postu.


Domyślnie na stronie głównej Bloggera tak są przypisane nagłówki:

<h1>Tytuł twojego bloga</h1>
<h3>Tytuł pierwszego posta</h3>
<h3>Tytuły kolejnych postóq</h3>
<h2>Tytuły widget'ów</h2>

Tytuły widget'ów nie są tak ważne, jak w tytuły postów. Więc przeorganizujemy znaczniki nagłówków tak:

<h1>Tytuł twojego bloga</h1>
<h2>Tytuł pierwszego posta</h2>
<h2>Tytuły kolejnych postóq</h2>
<h4>Tytuły widget'ów</h4>

Domyślny układ nagłówków na stronie postów Bloggera jest taki:

<h1>Tytuł bloga</h1>
<h3>Tytuł posta</h3>
<h2>Tytuły widget'ów</h2>

My przeorganizujemy je tak:

<h2>Tytuł bloga</h2>
<h1>Tytuł posta</h1>
<h4>Tytuły widget'ów</h4>



Jak zmodyfikować szablon blogspota by przeorganizować nagłówki?



1. Zaloguj się do pulpitu nawigacyjnego Bloggera i przejdź do -> Szablon -> Edytuj kod HTML

2. Znajdź ręcznie nagłówek H1 definiujący tytułu bloga czyli <h1 class='title'> lub użyj skrótu (Ctrl+F) i wpisz <h3tak jak na obrazku:

3. Gdy odszukasz już znacznik H1 z kodem: <h1 class='title'> i jest dokładnie taki sam to zastąp go kodem:

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;h1 class='title'&gt;
<b:else/>
&lt;h2 class='title'&gt;
</b:if>
<b:else/>
&lt;h1 class='title'&gt;
</b:if>

Jednak jeśli twój znacznik H1 różni się od tego powyżej skopiuj go i wklej do generatora kodu który znajdziesz tutaj w trzecim punkcie.

Zastąp tym kodem wszystkie znaczniki otwierające nagłówek H1.

Teraz w taki sam sposób jak poprzednio odszukaj znaczniki zamykające </h1> i zastąp je kodem:

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;/h1&gt;
<b:else/>
&lt;/h2&gt;
</b:if>
<b:else/>
&lt;/h1&gt;
</b:if>

4. Znajdź znacznik otwierający nagłówki <h3 będzie to <h3 class='post-title entry-title' itemprop='name'> lub podobnie.

5. Skopiuj go i wklej do generatora kodu który znajdziesz tutaj w piątym punkcie.
Następnie wygenerowanym kodem zastąp wszystkie znaczniki otwierające <h3...

Teraz odszukaj znaczniki zamykające </h3> i zastąp je kodem:

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;/h1&gt;
<b:else/>
&lt;/h2&gt;
</b:if>
<b:else/>
&lt;/h1&gt;
</b:if>

6. Znajdź wszystkie znaczniki h2:

<h2><data:title/></h2>
i zamień je na
<h4><data:title/></h4>

Polecam również wpis o dostosowaniu tytułów podstron i postów.