960Pixels netpress wordpress, tutoriale, grid960, photoshop itd…

Przeglądając dzisiaj kilka zachodnich blogów natknąłem się na ciekawego posta dotyczącego szeroko pojętego SEO przy projektowaniu themów pod wordpressa. Postanowiłem go przetłumaczyć oraz dodać do niego parę swoich przemyśleń. Dotyczy on głównie błędów związanych z optymalizacją strony pod kątem wyszukiwarek.

Czego unikać podczas projektowania theme’a pod WordPressa

Kodowanie znaków – Pierwszą, chyba najważniejszą rzeczą podczas projektowania thema jest odpowiednie ustawienie kodowania – ludzi, którzy używają jeszcze 8859 powinno się tępić i wieszać na krzyżach.

Ustawianie tytułu strony jako nazwy bloga – nazwa strony / bloga umieszczona w sekcji head w title powinna znajdować się na końcu opisu – pierwszy powinien być opis strony (site description). Następstwem tego błędu jest zabijanie nazwy bloga „na sztywno” zarówno na stronie głównej, jak i stronie posta (single.php), podstronie (page.php). W rezultacie pozbawiamy siebie bardzo wielu słów kluczowych.

Dodawanie „na sztywno” opisów w meta tagach – bardzo podobny błąd do tego opisanego powyżej. Opis strony jest taki sam dla każdej podstrony naszego bloga.

Dodawania statycznego tagu robots – czyli statyczne dodanie „index, follow” dla każdej podstrony. Uniemożliwia to nam z góry wykluczenie jakiejś strony z wyników wyszukiwania.

Używanie h1 jako kontenera dla logotypu – do niedawna sam stosowałem tą metodę – okazuje się jednak mało skuteczna. W przypadku wpisów na stronach typu single.php oraz page.php h1 powinien być opatrzony np tytuł wpisu. W htmlu 5 możemy wielokrotnie używać tagu h1 – zdecydowałem, że u mnie będzie on występował przy tytułach postów.

Ukrywanie linków – niechlubna strategia by mieć parę backlinków więcej – nie polecam, nieskuteczne i hm… lamerskie zagranie.

Posiadanie sidebarów (nawigacji, widgetów i tym podobnych) przed właściwą treścią strony – content is king – idąc dalej w myśl tej zasady wszelka nawigacja, widgety oraz tym podobne bajery powinny być umieszczone za treścią (chodzi o rozmieszczenie elementów w kodzie strony) – mówiąc krótko, w praktyce oznacza to content z lewej, treść z prawej.

Co należy implementować w themie, gdy to tylko możliwe

Pokazywanie opisów kategorii – mogą być co prawda nudne i nie zawsze potrzebne – można jednak je pokazywać chociażby jako title(chmurka przy hoverze) dla kategorii. Treść opisująca kategorię bardzo pozytywnie wpływa na optymalizację strony.

Pokazywanie wypisów (excerpts) na stronach archiwum – zamiast pokazywać całe posty w wynikach wyszukiwania lepszym rozwiązaniem jest pokazywanie tylko wypisu danego postu.

Używanie tytułu strony jako pierwszego linka zamiast „czytaj więcej” – w praktyce, należy unikać linków opisanych w sposób „kliknij tutaj” – tak opisany link jest bezużyteczny dla przeglądarki ponieważ nie zawiera on w swoim opisie, oraz w tytule żadnych unikatowych słów opisujących co pod danym linkiem się kryje. W przypadku WordPressa akurat „czytaj więcej” jest codziennością – głównie z tego powodu, że jest to jego wbudowana funkcja.

Semantyczny, czysty markup strony – unikanie zbyt wielu divów, sekcji, generalnie unikanie jako takiego „nadużycia znaczników” – w przypadku budowania stron mniej oznacza więcej. Czystszy i bardziej kompaktowy kod powoduje, że strona chodzi po prostu szybciej.

Breadcrumbs – czyli po prostu nawigacja pokazująca gdzie aktualnie się znajdujemy. Pomaga sukcesywnie „spinać ze sobą” strukturę strony. Bardzo ważny i przydatny element z zakresu usability – gdy tylko to możliwe, używajmy breadcrumbs.

Ładowanie js w stopce – powoduje to tyle dobrego, że strona wczytywana jest od góry do dołu – ładując javascripty na samym końcu po prostu szybciej serwujemy właściwą treść użytkownikowi.

Wpis ten jest wolnym przekładem ze strony yoast.com. Ostatnimi czasy powoli przygotowuję się do próby stworzenia jednego z tzw. „Premium Templates” stąd też możliwe, że w najbliższym czasie pojawi się tu kilka wpisów z zakresu markupu frontendu do themów, oraz różnych przydatnych funkcji, które docelowo mają być zaimplementowane w tego typu szablonie.