Lexy.com.pl

Stworzenie własnej strony WWW to jedynie początek długiej drogi zwanej wirtualną przygodą. Po wielu godzinach trudu, związanego z semantycznym użyciem wszelkich możliwych elementów HTML, okazuje się, że jest jeszcze jeden – dla niektórych chyba nawet istotniejszy – aspekt: przechytrzenieprzekonanie Google, że nasza strona zasługuje na pokazywanie w wynikach wyszukiwania. Ta czarna magia, znana szerzej jako SEO, pozwala nam wspiąć się na wyżyny i umieścić naszą stronę na samej górze listy wyników.

Istnieje jednak przekonanie, że SEO nie zawsze idzie w parze z semantyką, użytecznością i dostępnością. Ja, jako absolutny purysta (POSH śni mi się po nocach), walczący o semantyczną Sieć, często wdaję się w dyskusje ze specjalistami od zaklinania Google, w której ścierają się dwie armie argumentów: za zadowoleniem Google oraz za zadowoleniem usera (i najczęściej także specyfikacji).

Dzisiaj zapraszam na krótki eksperyment. Na warsztat wezmę stronę domową Lexy, znanej polskiej pozycjonerki. Spróbuję porównać ogólnie pojętą semantykę (rozumianą przeze mnie, ale i popartą specyfikacją i wytycznymi) z zabiegami pozycjonującymi i pokazać istniejące rozbieżności.

  • Po raz kolejny mamy do czynienia ze stroną, która czuje przywiązanie do przedrostka www. Dla mnie to zbędny dodatek (który przysparza jedynie dodatkowej roboty przy zabawie z przekierowaniami 301).
  • Zakładka kontakt zawiera enigmatyczną informację, że Lexy stron www już nie tworzy i odnośnik do podstrony kontaktu firmy INFEO. Co ciekawe, na blogu zakładka kontakt wygląda już zupełnie inaczej. Rozumiem, że blog i strona są dwoma odrębnymi organizmami, ale mimo wszystko taka sytuacja wydaje mi się ciut myląca.
  • Tyle z wrażeń na 1. rzut oka – zagłębmy się w techniczną warstwę tej strony. Zacznijmy od walidacji – widzimy błędy typowe dla HTML4. De facto w HTML4 (i tylko w nim) dodatkowy slash w tagu wcale nie oznacza, że jest to pusty element. Radzę dokładnie poszperać w specyfikacji i poszukać ustępu na temat tzw. skróconej notacji ;). Również outline nie jest dla mnie satysfakcjonujący. Czemu? O tym za chwilę.
  • Mamy do czynienia z HTML4 Strict. To dobrze. Owszem, można się pokusić o HTML5, ale najważniejsze, że nie Transitional ze swoim luźnym podejściem do standardów.
  • Na html brakuje atrybutu lang. Niżej natomiast znajduje się meta[name=Language]. Jak dla mnie wygodniejszym rozwiązaniem jest w/w atrybut – zwłaszcza, że niektóre elementy mogą być w innych językach i w tych wypadkach również używa się lang.
  • Słówko na temat deklaracji kodowania. Pomijając już antyczne ISO w dobie, gdzie użycie UTF-8 jest niekwestionowanym standardem, deklaracja nie znajduje się jako 1. w head. Wynika to zapewne z faktu, że metatagi pozycjonujące (a więc tytuł, słowa kluczowe, opis itp.) powinny znajdować się jak najwyżej. Czy naprawdę robi to dla Google różnicę – nie wiem. Wiem natomiast, że robi dla użytkowników, z powodu kilku potwierdzonych błędów bezpieczeństwa. Oczywiście w teorii przeglądarka może również nie rozpoznać znaczków spoza ASCII, zanim nie pozna kodowania (ale to raczej rzadkie przypadki – przecież i tak leci wcześniej nagłówek HTTP).
  • Skrypty powinny być dołączane na końcu body. Chociaż tutaj jest aż 1 i to dość mały.
  • Nie ma najmniejszej potrzeby istnienia #container, zwłaszcza, że html jest nieostylowany.
  • Powróćmy do outline’u i zatrzymajmy się przy nim chwilkę małą.

    <div id="top">
           <a href="http://www.lexy.com.pl/"><img src="index/top.jpg" alt="Tworzenie i pozycjonowanie stron Olsztyn"></a>
           </div>

    Tak wygląda logo strony. Osobiście stoję na stanowisku, że logo strony w 98% przypadków powinno być równocześnie głównym nagłówkiem. Z poglądem tym od wieków nie zgadza się środowisko pozycjonerów. Pozwolę sobie przytoczyć dwa fragmenty z zalinkowanego artykułu.

    Jestem w stanie zaakceptować nazwę strony w H1, tylko w jednym przypadku. Strona główna.

    W tym wypadku strona Lexy wydaje się jeszcze bardziej SEO-konserwatywna, gdyż nawet na stronie głównej głównym nagłówkiem jest tytuł podstrony.

    To tak jak przeglądać menu w restauracji. Normalnie mam spis treści i jest tam wszystko podzielone na kategorie (wina, przekąski, drinki, dania główne, desery itp.). Wyobraź sobie teraz zamiast tych podziałów nazwę restauracji np. ?U Pablo?. Normalnie nazwa ?U Pablo? będzie tylko na pierwszej stronie menu.

    I tu już zaczyna się robić ciekawie. Argumentem za niestosowaniem jako nagłówka najwyższego poziomu nazwy witryny, jest – niestety nietrafione – porównanie do menu. Czemu nietrafione? Bo Sieć nie jest linearna a hipertekstualna. Co to oznacza? Za wikipedią:

    Hipertekst cechuje nielinearność i niestrukturalność układu leksji. Oznacza to, że nie ma z góry zdefiniowanej kolejności czytania leksji, a nawigacja między nimi zależy wyłącznie od użytkownika.

    Na ludzki to znaczy ni mniej, nie więcej, że pojęcie „strony głównej witryny” jest de facto totalnie umowna. Użytkownik nie musi trafić na naszą witrynę wpisując adres w pasku przeglądarki i pacając Enter, lądując na stronie głównej. Zatem „pierwsza strona menu” w tym wypadku nie istnieje – wszystko może być pierwszą stroną.

    Idąc dalej: nagłówki mają odzwierciedlać strukturę strony a nie nieść wartość dla wyszukiwarek. Jeśli każda strona jest niezależną leksją, to de facto każda powinna mieć jakiś tytuł, spajający witrynę w całość. Takim tytułem jest… no tytuł witryny 😉 Takie rozłożenie nagłówków wynika z samej charakterystyki Sieci (i budującego ją hipertekstu). Spójrzmy jeszcze raz na zalinkowany wcześniej outline: wiemy, że jesteśmy na jakiejś stronie „O mnie”. Pytanie brzmi: o kim? Nie ma żadnego nagłówka dającego nam tę informację. Skoro już wcześniej padł „literacki” przykład, to wczujmy się w jego ducha 😉 Ale wybierzmy spis treści artykułu, zaczynający się od pierwszego podtytułu – „I miał rację”. Kto? W czym? A może to ironia? Nie dowiemy się tego – dopóki nie przeczytamy głównego tytułu artykułu.

    Do tego dochodzi kwestia AT, które tworzą właśnie spisy treści stron na podstawie nagłówków (stanowią one punkty orientacyjne). Tutaj główny nagłówek jest koniecznością, nie farmazonem.

    Nie twierdzę, że logo i nazwa firmy w h1 pomoże w pozycjonowaniu. Twierdzę natomiast, że zachowuje spójność struktury strony.

  • Tu od razu warto byłoby poruszyć temat image replacement, który według pozycjonerów jest niepotrzebnym igraniem z Google (aka ukryta treść) i obrazki powinny być obrazkami (toteż mamy tutaj logo jako img). Czy taki pogląd jest właściwy? Pozostawiam ocenie czytelników. Od siebie dodam jedynie, że ja w image replacement nie widzę nic zdrożnego i uważam za przydatne narzędzie w pracy – w końcu to po prostu wykorzystanie CSS do tego, do czego został stworzony (zarządzanie prezentacją treści na stronie).
  • Menu nawigacyjne również może mieć odpowiedni nagłówek (który można z powodzeniem ukryć przed nie-AT). Oczywiście nie jest to korzystne z punktu SEO, natomiast wygodne dla użytkowników.
  • Główna treść… Muszę pochwalić za poprawne użycie niełamliwej spacji – to wciąż rzadkość w Sieci!
  • Co mnie natomiast najbardziej ubodło.

    <a onclick="return !aTarget(this)" href="http://www.fox.com.pl/articles/web/layout.php" title="Layout na divach i css?"><em>Jak stworzyć dobry Layout?</em></a>

    Jednym fragmentem Lexy złamała dwie rady dobrego wujka porneLa: tą o onclick i tą o target. Poza tym – to marna próba oszukania walidatora. Jeśli już koniecznie chce się użyć target (co i tak należałoby sobie wybić szybko z głowy), to po prostu się go używa a nie robi podchody, żeby był żółty znaczek od W3C (którego i tak tutaj nie ma…).

  • <a href="#" onclick="wysun(getElementById('ja'));">kliknij tutaj</a>

    Znów onclick. Poza tym – niesemantyczne użycie hiperłącza. Powtórzę to, co powtarzałem wielokrotnie: w HTML mamy 2 rodzaje klikalnych elementów.

    • a (hiperłącza) – służą do przechodzenia na inną podstronę
    • button (przycisk) – służy do wywołania określonej akcji

    Tutaj ewidentnie mamy do czynienia z drugą sytuacją, zatem do rozwijania elementu służyć powinien przycisk, nie link.

    I na koniec: praktyka z „Kliknij tutaj” nie jest wskazana. Linki powinny mieć opisową treść (bo np niektóre AT i przeglądarki wyciągają linki osobno i prezentują je użytkownikowi; można sobie wyobrazić przydatność setki „kliknij tutaj”).

  • Natomiast warto przyjrzeć się samemu rozwijanemu elementowi. Jest on domyślnie ukryty przy pomocy display:none. Nie jestem ekspertem, ale Google chyba nie lubi takich rzeczy. Poza tym – co z użytkownikami bez JS? Osobiście zastosowałbym tutaj po prostu :target z CSS3. Miałoby to jeszcze jeden plus – zmiana adresu i możliwość zalinkowania do konkretnych informacji.
  • Cóż powiem jeszcze na temat tego rozwijanego elementu? Że ewidentnie wygląda na listę definicji. Dowód?

    <li><b>Imię i nazwisko:</b> Marta Gryszko

    „Imię i nazwisko” opisuje pewną wartość (jest kluczem), natomiast „Marta Gryszko” jest tą wartością (wartością) – jak ulał lista definicji.

    <dt>Imię i nazwisko:</dt> <dd>Marta Gryszko</dd>

    Prawdę powiedziawszy mój puryzm lekko mnie pcha w kierunku jeszcze konserwatywniejszego rozwiązania: przerzucenia dwukropka do CSS-a 😉

  • Na podstronie projektów lista projektów mimo wszystko powinna być listą. I mimo tytuły stron dałbym jako nagłówki. Znów: outline byłby sensowniejszy.
  • W stylach CSS brak resetu/normalizacji – zatem istnieje możliwość, że w niektórych przeglądarkach wygląd będzie się różnił.
  • I jeszcze jedna uwaga na koniec: tytuł nie zmienia się na podstronach. To chyba źle z punktu SEO… pomijając aspekt usability 😉

Ten wpis traktuję jako eksperyment i 1. podejście do starcia między semantyką a SEO. Na pewno jeszcze do tej tematyki powrócę, bo można znaleźć w niej wiele smaczków.

25 komentarzy do “Lexy.com.pl”

  1. Świetny wpis! Chciałbym, aby pojawiały się one częściej i w większej ilości, bo naprawdę przyjemnie się je czyta.

  2. – W zasadzie jako pozycjonerka, Lexy raczej wie, że metatagi description i keywords są nic nie warte w dzisiejszych czasach z punktu pozycjonowania, więc dawanie ich na samą górę zresztą jest i tak bezsensowne, chyba, że …

    – Sam w H1 zawsze daje główny tytuł strony, czyli jej nazwę logo i najważniejsze słowa kluczowe, ponieważ ten nagłówek ma w sobie pewną moc. Mówienie o tym, że jest to bezsensu IMO to kwestia dezinformacji jaką polscy pozycjonerzy sieją na lewo i prawo w celu … wiadomym

    Wielu SEO’wców nie potrafi zbudować poprawnej, semantycznej strony. Po prostu nie znają się na tym. Wystarczy spojrzeć na ich strony, portfolia. Oni wierzą tylko w link building.
    Mam nadzieję, że weźmiesz na cel jeszcze kogoś

  3. Skoro ostatnio zajmowałeś się blogiem pozycjonerki, to może teraz zająłbyś się tzw. „katalogami stron”? Można wziąć pod lupę np. serwis bazastron.pl – w kodzie znajduje się naprawdę pokaźna liczba kwiatków 🙂

    1. Ostatnio ciut wena mnie opuściła (co chyba widać dobitnie…), ale kiedy powróci, to już mam kilku mocnych kandydatów 😉

  4. Świetnie! 🙂 Z niecierpliwością czekam na kolejne wpisy. Naprawdę przyjemnie się je czyta, a przy okazji można się czasami czegoś dowiedzieć 😉

  5. Mogę Cię zapewnić, że w tym tygodniu pojawi się nowy wpis 😉 Jeszcze odrobinkę cierpliwości 😀

  6. Jestem z branzy i stwierdzam, ze jestes kretynem.
    Pytanie: a co z osobami bez JS
    Odp. A sa takie?

    Czepiasz sie tez o nawigowanie TABem, bo Ty tak wolisz. Mysle, ze pozostale 38milionow Polakow woli jednak myszke, albo ekran dotykowy.

    Piszesz o html5 a tymi dwoma zdaniami potwierdzasz, ze sam jestes jeszcze w 1998r.

    1. Jestem jak najbardziej w roku 2014, gdzie już wiadomo, że PE jest po prostu szybsze niż kult JS-only.
      Pytasz się o osoby bez JS. I nie jest ich wcale tak mało. Wbrew pozorom tych, którzy sami go wyłączają jest najmniej a najwięcej nie ma js z powodu błędów typu wyglebienie się cdn.
      Co do taba – a osoby niepełnosprawne, które nie mogą posługiwać się myszką? Też są kretynami?
      Dziwi mnie jak bardzo mało przywiązuje się obecnie wagi do dostępności i użyteczności. To nie kretynizm a patrzenie z szerszego horyzontu a nie z pozycji „działa to git”.

  7. Nie ma to jak oceniać stronę, która od 6 lat pod względem kodu nie była modyfikowana. Może oceń ją ze standardami panującymi co najmniej 5 lat temu?

    1. 5 lat temu istniały takie same standardy przecież. 2009 rok, więc już zaczynał się boom na HTML5 a specka HTML 4.1 nie była ruszana od AFAIR grudnia 1999. to, że <2005 robiono siekę wynikało z... badziewności IE tak naprawdę, podczas gdy specyfikacja dość dokładnie określała semantykę elementów przecież.
      No i oczywiście najważniejsze: Internet to medium uznające tylko teraźniejszość - ja nawet nie muszę wiedzieć kiedy ostatnio strona była modyfikowana. Zresztą jej nieaktualność raczej źle świadczy o jej autorze a nie o mnie 😉

  8. „Po raz kolejny mamy do czynienia ze stroną, która czuje przywiązanie do przedrostka www. Dla mnie to zbędny dodatek (który przysparza jedynie dodatkowej roboty przy zabawie z przekierowaniami 301).”

    Osobiście nie widzę w tym problemu. Sam stosuję formę bezprzedrostka, bo uważam ją za wygodniejszą ale nie ma w tym nic błędnego. Przedrostek www. pozwala wskazać, że jest to domyślny serwis, zaś inne przedrostki zagospodarować dla innych witryn, np. blog, panel klienta itd. Zatem zbędny wniosek.

    Reszta uwag – ok, merytorycznie ok, choć wydają się nie mieć większego znaczenia zarówno dla samych odbiorców jak i wyszukiwarek. Lexy akurat jest taką osobą, która tworzy wartość dla użytkowników przede wszystkim, a dopiero potem ogląda się na wymogi Google, co widać po jej blogu.

    Wspominasz o kontakcie – „Zakładka kontakt zawiera enigmatyczną informację” zobaczmy może, co masz na swojej stronie? Również dosyć enigmatyczne dwa zdania – http://comandeer.pl/kontakt.html – więc może zamknijmy już temat krytykowania kogokolwiek, skoro sami mamy owe wskazania niewdrożone? 🙂

    Jeszcze odnośnie wybranego serwisu – akurat uważam za spory nietakt, wybranie nieaktualizowanego i można powiedzieć zamkniętego projektu, kiedy na tej samej domenie funkcjonuje aktywny blog autorki. 😉

    1. „Zatem zbędny wniosek”
      A czym się różni Twoje „Osobiście nie widzę w tym problemu” od mojego „Dla mnie to zbędny dodatek”? Obydwie to subiektywne opinie, zatem jeśli moja jest zbędna, to Twoja tak samo.

      „Reszta uwag – ok, merytorycznie ok, choć wydają się nie mieć większego znaczenia zarówno dla samych odbiorców jak i wyszukiwarek”
      Sama kwestia nagłówków w wielu przypadkach może przysporzyć problemy, głównie odbiorcom. A linki prowadzące donikąd są przecież podstawowym błędem UX.

      „„Zakładka kontakt zawiera enigmatyczną informację” zobaczmy może, co masz na swojej stronie?”
      Szkoda, że uwaliłeś kontekst tej wypowiedzi, który w tym wypadku zmienia wszystko: „Zakładka kontakt zawiera enigmatyczną informację, że Lexy stron www już nie tworzy i odnośnik do podstrony kontaktu firmy INFEO.” Skoro ta strona i tak jest bezużyteczna, to powinna na tę stronę kontaktu INFEO przekierowywać, prawda? U mnie na stronie kontakt jest to, co ma być na stronie kontakt – sposoby kontaktu 😉 Nie ma żadnych zabaw w odsyłanie userów do innej strony z innym kontaktem. Owszem, lakonicznie, ale zupełnie inaczej niźli u Lexy. To 2 zupełnie różne sytuacje.

      „akurat uważam za spory nietakt, wybranie nieaktualizowanego i można powiedzieć zamkniętego projektu, kiedy na tej samej domenie funkcjonuje aktywny blog autorki.”
      Prawdę powiedziawszy nie zauważyłem, że to zamknięty projekt (jeśli jest zamknięty => redirect na bloga). Nie ma żadnej informacji o tym. Poza tym – to, co już odpisałem Pomkowi: w Internecie istnieje zawsze i wyłącznie „teraz”. Bo taki charakter ma to medium.

  9. „Skoro ta strona i tak jest bezużyteczna, to powinna na tę stronę kontaktu INFEO przekierowywać, prawda?”

    Z punktu widzenia użyteczności skoro do niej się odnosisz – niezapowiedziane przekierowywanie użytkowników na obcą z ich punktu widzenia stronę (nie ważne, że tej samej autorki – user widzi inny lay, inne logo, inny podmiot) – to strzał w stopę. W tym wypadku rozwiązanie zaoferowane przez autorkę jest zdecydowanie lepsze niż to co proponujesz – komunikuje a nie wymusza. To akurat podstawy UX!

    @Comandeer – tym się różni, że moja jest w reakcji na Twoją prezentowaną jako merytoryczna krytyka. Stąd odpowiedź, że ten i pare innych punktów takie merytoryczne nie są i jak dla mnie nie powinny mieć miejsca w takim wpisie, który stanowi recenzję danego projektu.

    Pomysł z redirectem na bloga jest równie absurdalny. To dwa różne projekty, co sam podkreśliłeś i zdajesz się rozumieć. Nie ma sensu robić przekierowań – nigdzie nie jest powiedziane, że projekt zamknięty (nie prowadzony aktywnie) należy usuwać z internetu. Projekt jest i wisi, a że ostatnia aktualizacja jest sprzed X – cóż, wartość archiwalna. Stąd tym większe zdziwienie, bo ocenianie „staroci” to tak jak klepanie poematu o wyglądzie pierwszej wersji wyszukiwarki Google. Było, mineło, może i gdzieś znajdziemy kopię, ale co to zmienia 😉

    Jakbyś ocenił blog, jako aktywny projekt – na pewno nie wyciągnąłbym takiego argumentu, bo to projekt wciąż aktualizowany, co widać 🙂 Jak wiesz, to dosyć istotne bo zawsze można odkopać jakiś stary smaczek z sieci i wypunktować 😉

    1. „W tym wypadku rozwiązanie zaoferowane przez autorkę jest zdecydowanie lepsze niż to co proponujesz – komunikuje a nie wymusza. ”
      Osobiście przekierowałbym z ładnym komunikatem. Poza tym: spójrz jak to wygląda. Blog ma osobny kontakt, a tutaj jest kontakt odsyłający gdzie indziej. Ciut niespójne.

      „tym się różni, że moja jest w reakcji na Twoją prezentowaną jako merytoryczna krytyka”
      Za Słownikiem Języka Polskiego, krytyka to «surowa lub negatywna ocena kogoś lub czegoś», natomiast ocena to «opinia o czymś lub o kimś dokonana w wyniku analizy», zatem merytoryczna krytyka nie staje się nagle obiektywna. W najlepszym wypadku może być intersubiektywna, jaka też jest (przecież jest zalinkowane do odpowiedniej strony, na której jest wyjaśnione czemu się uważa – bo to nie tylko moje widzimisię – że przedrostek www jest zdeprecjonowany).

      „Pomysł z redirectem na bloga jest równie absurdalny. To dwa różne projekty, co sam podkreśliłeś i zdajesz się rozumieć.’
      Weźmy statystycznego Kowalskiego, karmionego od dzieciństwa Friendly URIs. Jeśli widzi adres typu strona.pl/costam, to to „costam” stanowi dla niego podstronę. Co należy zrobić, żeby dostać się na stronę główną serwisu? A no uciąć „costam” z adresu. I w tym wypadku zostajemy skierowani do zupełnie innego serwisu. To jest dokładnie ten sam typ problemu, który wytknąłeś mi przy przekierowaniu na INFEO 😉 Najbardziej logiczne to osobny projekt=osobna subdomena. Najśmieszniejsze jest to, że blog.lexy.com.pl przekierowuje na lexy.com.pl (dam se rękę uciąć, że wiele osób właśnie tak z pamięci wpisuje adres jej bloga).

      „Stąd tym większe zdziwienie, bo ocenianie „staroci” to tak jak klepanie poematu o wyglądzie pierwszej wersji wyszukiwarki Google. Było, mineło, może i gdzieś znajdziemy kopię, ale co to zmienia”
      Ale jest podstawowa różnica między 1. wersją Google a stroną ot tak wiszącą w Sieci. To 1. można podziwiać w archiwum, gdzieś na dnie Internetu. Tutaj wchodzę na blog i po prostu chcę spojrzeć na stronę główną (zgodnie z myśleniem Kowalskiego). I co widzę? „Wartość archiwalna”. Jeśli coś ma wartość archiwalną, to raczej nie leży pod tabliczką „Najnowsze newsy”, prawda? 😉

      „Jakbyś ocenił blog, jako aktywny projekt”
      Nie martw się, na pewno to zrobię 😀

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.