16 sierpnia 2016

Odnośnik tekstowy i graficzny

Odnośnik tekstowy

Odnośniki, jakie możemy wstawić na naszą stronę możemy podzielić ze względu na ich budowę na najprostsze i nieco bardziej skomplikowane. Aby utworzyć najprostszy odnośnik tekstowy na stronie w jej kodzie należy wstawić:

<a href="adres_dokumentu_w_sieci">Opis odnośnika</a>

Taki kod powoduje wstawienie tekstu Opis odnośnika, który będzie pełnił funkcję odnośnika do określonego adresu sieciowego. Po najechaniu na link, w pasku na dole okna przeglądarki, będzie wyświetlał się ten adres URL, który po kliknięciu otworzy się w naszej przeglądarce. Jak widzisz, widocznym i najważniejszym dla użytkownika na pierwszy rzut oka tekstem jest właśnie opis odnośnika (zwany często AnchorText). Przy ich tworzeniu musisz brać pod uwagę zawartość strony, do której link ma prowadzić.

Wstawienie odnośnika na swoją stronę jest czymś banalnie prostym. Powyższy kod możemy rozszerzyć o dodatkowy atrybut title. Kod wygląda wtedy następująco:

<a href="adres_dokumentu_w_sieci" title="tytuł odnośnika">Opis odnośnika</a>

Atrybut title nie jest szczególnie ważny z punktu pozycjonowania. Jednak jest użyteczny dla użytkowników. W chwili gdy najadą oni na Twój link pojawi się w przeglądarkach charakterystyczny dymek, na którym wpisany tekst się pojawi. Jest to idealne miejsce na wstawienie szerszego opisu linku, dzięki któremu powiesz użytkownikowi, co dokładniej znajdzie się na linkowanej stronie.

Odnośnik graficzny

Niekiedy same odnośniki tekstowe nie prezentują się najlepiej. Wprawdzie nowoczesne i łatwe w użyciu kaskadowe arkusze stylów CSS pozwalają na stworzenie ładnie prezentujących się odnośników tekstowych, niektórzy projektanci wolą wstawiać odnośniki graficzne – mogąc stworzyć w ten sposób dobry system nawigacji, przy jednoczesnym unikatowym wyglądzie serwisu zaprojektowanym przez grafików.

Tworzenie odnośników graficznych ogranicza się do objęcia znacznika wstawiającego dany obrazek znacznikami tworzącymi hiperłącze. Przykładowy kod:

<a href="o_nas.html"><img src="adres_obrazka" alt="tekst alternatywny" /></a>

Znacznik IMG zawiera atrybut src w który wpisywany jest adres obrazka. Natomiast atrybut alt powinien zawierać opis tego obrazka. Tekst alternatywny jest ważny, z kilku powodów:

  • W przypadku niezaładowania obrazka przeglądarki internetowe wyświetlają właśnie tekst altrnatywny. W przypadku, gdy niezaładowany obrazek należał do elementu nawigacyjnego, czyli był objęty odnośnikiem, linkiem będzie objęty tekst alternatywny. W przypadku menu graficznego, w którym nie byłyby ustalone teksty alternatywne – niezaładowanie obrazka uniemożliwiało by użytkownikom sprawną nawigację.
  • Tekst alternatywny czytają roboty umożliwiające poruszanie się po stronach osobom niewidomym lub słabo widzącym. Gdyby teksty nie zostały wpisane, nic z menu nawigacyjnego nie zostało by przeczytane. To uniemożliwiło, by korzystanie z serwisu.
  • Tekst alternatywny jest ważny dla wyszukiwarek, a dokładniej ich robotów sieciowych zbierających dane. Tekst alternatywny pozwala połączyć obraz z danymisłowami kluczowymi – np. przy wyświetlaniu w Google Images.

Atrybut alt można potraktować w przypadku elementów nawigacyjnych, jako miejsce na wstawienie zwykłego tekstu, jaki umieścilibyśmy w odnośniku tekstowym.

Bardzo ważne jest zaznaczenie, że atrybut alt to nie miejsce na wrzucenie bezsensownych słów kluczowych, na które chcielibyśmy się pozycjonować. Atrybut ten powinien zawierać opis tego, co zawiera element graficzny, nie zaś bełkot słów.

Odnośnik tekstowy vs. graficzny

Wiele osób zadaje sobie podobne pytanie, czy któryś z tych typów odnośników jest ważniejszy. Niestety nie ma bezpośrednich informacji dotyczących tych kwestii – w mojej opinii dobrze skonstruowane odnośniki obrazkowe przekazują takie same (równorzędne) informacje robotom wyszukiwarek.

W przypadku odnośników obrazkowych wystarczy mądrze i rozsądnie korzystać z elementów ALT i TITLE, o których była mowa nieco wcześniej by wszystko było w porządku. Jednak, jak we wszystkim należy zachować umiar – łącząc korzystanie z odnośników tekstowych oraz graficznych.

Pamiętaj, te atrybuty nie są do wrzucania bezsensowych i porozrzucanych fraz kluczowych a litych i sensownych fragmentów tekstu (pare wyrazów, zdanie) opisujące.