Podstawy optymalizacji – atrybut ALT

Obrazki w stronie

Twoja witryna bez żadnych obrazków, byłaby na pewno nudna i mało atrakcyjna dla odwiedzającego. Nie każdy będzie przedzierać się przez tonę tekstu, bo w większości ludzie chcą najpierw popatrzeć. I nie ma w tym nic dziwnego. Zatem wstawiasz obrazek do artykułu czy strony i coś z nim trzeba dalej zrobić.

Wielu webmasterów z tego co obserwuję, niestety pomija całą masę kroków, które tu opisuję z niewiadomych mi przyczyn. Jednak dla Ciebie to plus, bo wykorzystując techniki tu opisywane, polepszysz swoją stronę i wyciśniesz z niej tyle ile się da. 🙂

Atrybut ALT

Jest to tak zwany opis alternatywny, dzięki któremu każdy obrazek jest opisany. Na pewno się z tym spotkałeś, chociażby najeżdżając kursorem na jakieś obrazki w różnych stronach internetowych i po chwili wyświetlił Ci się określony napis. To jest właśnie ALT, aby w pełni go wykorzystać należy się zastanowić przede wszystkim jak go można wykorzystać sensownie i do czego on właściwie służy.

Dodatkowo biorąc pod uwagę fakt, że strony internetowe w dzisiejszych czasach mają coraz więcej elementów graficznych, alt’ów powinno być coraz więcej i to nie tylko ze względu na możliwości optymalizacji samej w sobie, ale również ze względu na to, że… wiadomo – nasza strona będzie poprawnie skonstruowana – czyli to co lubią roboty. 🙂

A jakby tego było mało, że będzie prawidłowo skonstruowana dla robotów to jeszcze będzie bardziej dostępna (czyli jeszcze bardziej prawidłowo skonstruowana! :)). Przez większą dostępność rozumiem fakt, iż np. osoby niewidome korzystające z różnorakich czytników ekranu i mogące nie widzieć z wiadomych względów Twoich obrazków ;), przynajmniej dowiedzą się o co kaman w Twojej stronie. 🙂

Twoja strona dzięki temu, będzie mieć nie tylko odpowiednio opisane obrazki, ale będzie bardziej zgodna ze standardem, o którym większość osób uznających się o dziwo za profesjonalistów w branży, zarówno pozycjonerskiej jak i tworzenia stron nawet nie słyszała, czyli zgodność z WCAG 2.0.

Co powinien zawierać ALT i jak wygląda?

Kiedyś dawno dawno temu, gdy większość dzisiejszych „profesjonalnych pozycjonerów z dużym doświadczeniem” biegła z tornistrem na plecach i drugim śniadaniem w ręku do 3-4, a Ci bardziej hardkorowi już do 5 klasy podstawowej ;), ja w tym czasie wyczytałem w jednym z kursów HTML, że prawidłowy ALT powinien być opisem, który definiuje rzeczywistą zawartość obrazka, w razie gdyby ten z jakichś przyczyn się nie wyświetlił – w tamtym okresie, przyczyną były głównie łącza modemowe z „zawrotną” realną prędkością rzędu 10-25kb/s 🙂

Oczywiście biorąc pod uwagę to, że faktycznie jeśli osoba niewidoma będzie chciała skorzystać z Twojej witryny za pomocą jakiegoś czytnika ekranu otrzymałaby info, że określona treść znajduje się w tym miejscu, gdyż tu jest obrazek. Ale z drugiej strony, zależy Ci przecież nie na tym, by nagle cała masa niewidomych z uśmiechem na ustach szturmowała Twój serwis, tylko odbiorcy na których możesz zarobić pieniądze i być wyżej w wynikach wyszukiwania, czyli większość odbiorców – ta widząca większość. 🙂

Zatem można częściowo olać kurs HTML’a z nie wiem którego roku, bo skoro ja go czytałem jakieś 14 lat temu, to musiał powstać jeszcze wcześniej, jednak do jego jednej zasady stosować się warto – używać ALT’ów dla obrazków.

Tag wygląda dość prosto, bo wstawiając obrazek używasz:

Co faktycznie powinien zawierać ALT?

Jak już wiesz z moich poprzednich artykułów, robot widzi wszystko nieco inaczej niż my, gdyż posługuje się zwykle widokiem, który możesz obejrzeć wpisując adres swojej strony w przeglądarkę Lynx. Jak możesz zauważyć, nie wyświetlają się żadne grafiki, jednak widać w którym miejscu posiadasz obrazki. Skoro widać źródła, jak pewnie się domyślasz widać będzie dla robota również ich opis.

Oczywiście wrzucenie w każdy obrazek tego samego opisu, co gorsza zawierającego całą masę słów kluczowych, będzie odebrane źle. Jeżeli jednak dla poszczególnych obrazków dodasz opisy z sensem, tak jak w przypadku np. nagłówków, będzie nawet lepiej niż dobrze. Po pierwsze zyskujesz kolejną linijkę kodu, który zgodnie „z przepisami” możesz wstawić w treść kodu swojej strony i nie będzie to przez robota źle odebrane, po drugie frazy możesz zróżnicować dla każdego obrazka.

Dla jasności chodzi mi o elementy graficzne w stronie, a nie o całą szatę graficzną. Przykładowo masz stronę o samochodach, to na Twoim miejscu nie dodawałbym do każdego obrazka opisu w postaci „samochody” tylko np. „Samochód – Nazwa_samochodu” czy „Obejrzyj nazwa_samochodu” ewentualnie „Nazwa_samochodu”, dzięki temu potęgujesz w oczach robotów wartość swojej strony z danej dziedziny, bo widać że posiadasz treści, które nawiązują jak najbardziej do tematyki serwisu a jednocześnie nie są spamowym zlepkiem fraz.

Pracochłonny proces

Będzie to wymagało sporo pracy co jest dość oczywiste, w szczególności jeśli masz serwis bez wspomagaczy typu CMS i musisz wszystko wstawić ręcznie, jednak nie ma nic za darmo. Chcesz mieć dobry serwis, dobrze zoptymalizowany od strony kodu i marketingu, generujący ruch i pieniądze, musisz poświęcić swój czas i poszerzać stale swoją wiedzę. Opłaci się – tego możesz być pewien. 🙂

Jeżeli używasz jakiegoś systemu CMS, a zakładam że tak właśnie jest bo już naprawdę mało kto stawia „czyste” strony, przy których trzeba dłubać ręcznie, możesz proces ten zautomatyzować. Jeśli Twój CMS pozwala na wstawianie altów do obrazka z poziomu panelu, a musi na to pozwalać, to wykorzystaj to od razu na starcie. Zmniejszysz sobie finalną ilość pracy robiąc wszystko na bieżąco.

Jeśli natomiast dałeś dupy i nie robiłeś nic od samego początku albo robiłeś błędnie, to masz dwa wyjścia a właściwie trzy… najgorsze to nie zmieniać nic i zostawić jak jest, takie sobie to edytować wszystko ręcznie i wstawiać odpowiednie ALT’y do każdego obrazka w serwisie (jak masz duży serwis, będzie naprawdę wesoło ;)), najlepsze to wyedytować kawałek kodu w CMSie w taki sposób, aby pojawiły się określone ALT’y dla każdego obrazka od razu w całym serwisie, dodatkowo używając pewnych zmiennych, zróżnicujesz je. 🙂

No i przy kolejnych artykułach możesz wtedy już całkowicie olać ALT’y, gdyż wstawiać się już będą wg tego określonego wcześniej w kodzie schematu. O tym jaki kod, gdzie i jak wstawiać napiszę w innym artykule. 🙂

Podsumowanie

Z dzisiejszej lekcji wiesz że:
– warto używać znaczników ALT
– niekoniecznie treść musi być pod niewidomych 🙂
– nie wstawiać w ALT samych słów kluczowych a czasem wręcz tego unikać
– stosować słowa pokrewne i odmiany, lub słowa powiązane z tematyką

Podstawy optymalizacji – atrybut ALT
5 (100%) 12 głosów

7 KOMENTARZE

  1. A ja mam pytanie. Jaką długość maksymalną powinien mieć wpis w alt? Robię optymalizację na swojej stronie i nie jestem pewien, czy moje alty nie są za długie. Czy ma to jakieś znaczenie?

    • Najlepiej rozsądną 😉 czyli taką, żeby dało się go łatwo i szybko przeczytać. Miej na względzie, żeby to robić pod kątem użytkownika a nie robota i będzie dobrze – dla robotów również.

  2. Niby podstawy, a tak wiele osób zapomina o nich. Alty szczególnie dla sklepów powinny być pomocne, bo przecież użytkownik może szukać „zaproszeń na ślub” zarówno w wyszukiwarce stron, jak i grafiki. A wiadomo, że kupuje się oczami.

  3. Dzięki za informacje 🙂 Przy ogromnej ilości zdjęć ślubnych jakie mam na blogu to teraz już wiem, że każde zdjęcie powinno mieć przynajmniej dobry alt. Zobaczymy jak dodanie tych altów przełoży się na pozycje mojej strony 🙂

ZOSTAW ODPOWIEDŹ