post_ico3

Optymalizacja SEO kodu strony

Tworząc stronę internetową web developerzy powinni zwracać dużą uwagę na optymalizację SEO. Stworzenie strony jest dla klienta dopiero początkiem drogi do określonego celu. Naszym zadaniem jest pomóc mu w tym tworząc dobrej jakości kod. W tym wpisie pokażę Tobie na co zwracać uwagę.

Duplikowanie treści

Jedną z podstawowych rzeczy o jaką musimy zadbać jest unikanie duplikowania treści na różnych podstronach. Żeby doprowadzić do takiej sytuacji wcale nie musimy umyślnie umieścić takiego samego tekstu na różnych podstronach.

Jeżeli w żaden sposób nie zabezpieczymy naszej strony przed takim zjawiskiem strona główna, będzie dostępna aż z czterech adresów:

  • http://domena.pl
  • http://www.domena.pl
  • http://domena/pl/index.php
  • http://www.domena.pl/index.php

Google potraktuje je jako cztery różne podstrony z identyczną treścią. Możemy temu zaradzić kilkoma linijkami kodu w pliku .htaccess .

Przekierowanie z „www” na „bez www”

RewriteCond %{HTTP_HOST}//s%{HTTPS} ^www\.(.*)//((s)on|s.*)$ [NC]
RewriteRule ^ http%3://%1%{REQUEST_URI} [L,R=301] 

Przekierowanie z „bez www” na „www”

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Przekierowanie z index.php lub index.html na główny adres

RewriteCond %{THE_REQUEST} ^.*/index\.(php|html|htm)
RewriteRule ^(.*)index.(php|html|htm)$ /$1 [R=301,L]

Canonical

Powyższy kod nie eliminuje wszystkich przypadków duplikacji treści. W sklepach internetowych zazwyczaj istnieje możliwość posortowania produktów (np. według ceny, nazwy). W takiej sytuacji adres może wyglądać tak:

  • http://domena.pl/nazwa-kategorii
  • http://domena.pl/nazwa-kategorii?sort=price&order=asc

Dla Google są to dwie, oddzielne podstrony z identyczną treścią (produkty są tylko w innej kolejności). W takiej sytuacji powinniśmy Google „poinformować” o źródle oryginalnej treści za pomocą canonical. Dla strony http://domena.pl/nazwa-kategorii?sort=price&order=asc kod będzie wyglądał tak:

<link rel="canonical" href="http://domena.pl/nazwa-kategorii" />

Znacznik ten umieszcza się w sekcji head. Warto pamiętać, że canonical jest dla wyszukiwarki tylko wskazówką, a nie dyrektywą (jak na przykład meta tag robots). Oznacza to, że wyszukiwarka na ogół będzie stosować się do sugestii z rel=”canonical”, ale nie musi tego robić zawsze.

Stronicowanie – prev i next

Jeżeli na stronie występuje stronicowanie (paginacja), a więc wyświetlana jest lista elementów na wielu podstronach możemy „poinformować” wyszukiwarkę o powiązaniu danej podstrony z innymi. Dla strony http://domena.pl/nazwa-kategorii_strona-2 znaczniki będą wyglądać następująco:

<link rel="prev" href="http://domena.pl/nazwa-kategorii" />
<link rel="next" href="http://domena.pl/nazwa-kategorii_strona-3" />

One także powinny być umieszczone w sekcji head.

Optymalizacja kodu HTML i CSS

Jednym z najważniejszych zadań web developera jest napisanie poprawnego kodu. Kod pisany zgodnie z wytycznymi organizacji W3C wpływa korzystnie na pozycję w wynikach wyszukiwania. Niestety nie ma konkretnego przepisu jak pisać idealny kod, ale istnieje kilka ogólnych zasad:

  • Stosować znaczniki HTML zgodnie z przeznaczeniem – np. nawigacja powinna być zbudowana na listach, natomiast tekst powinien być wewnątrz znacznika akapitu.
  • Dodawać zawsze znaczniki z tytułem i opisem strony.
  • Wykorzystywać nagłówki w odpowiedni sposób. Najważniejsza fraza powinna się znaleźć w h1, kolejne w h2, h3 itd.
  • Opisywać obrazki za pomocą atrybutu alt. Opis nie może być zlepkiem kilku słów kluczowych, tylko wyjaśniać w naturalnym języku zawartość grafiki.
  • Stosować pogrubienia i pokreślenia (znaczniki: b, strong, u) w naturalny sposób. Google, podobnie jak nasz wzrok, zwraca uwagę na ważność fragmentu tekstu.
  • Zwracać uwagę na nagłówki HTTP. Jeżeli podstrona zawiera treść błędu 404, powinna zwracać status 404.
  • Ograniczyć ilość zapytań HTTP do minimum.
  • Optymalizować kod JS i CSS – można na przykład usunąć z kodu zbędne, białe znaki.
  • Stosować odpowiednie formaty zapisu grafik. Jeżeli obrazek nie musi posiadać przezroczystego tła zapisz go jako gif, jpg albo png bez kanału przezroczystości.
  • Niektóre skrypty JS mogą być wczytywane asynchronicznie. Dzięki temu strona szybciej się ładuje. Jeżeli chcesz ładować plik asynchronicznie dodaj do znacznika script atrybut async.
  • Korzystać z mechanizmu cache’owania w pliku .htaccess.
  • Tworzyć mapę strony dla Google.
  • Nie indeksować zbędnych podstron – więcej informacji na ten temat znajdziesz na blogu Racy Mind.
  • Testować stronę narzędziami od Google i stosować się do zaleceń.
  • Pobierz ebooka o optymalizacji stron internetowych

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...