W przeszłości użytkownicy mogli dostać się z jednej strony witryny do drugiej jedynie poprzez zapamiętanie i wpisanie konkretnych adresów URL. Nie było to przyjazne dla użytkownika i znacznie ograniczało użyteczność. Dzisiaj, strony internetowe używają okruszków chleba, aby nawigacja była intuicyjna i łatwa. Ten post wyjaśnia, czym są okruszki chleba, dlaczego są przydatne, jak możesz ich używać w swojej witrynie lub aplikacji, oraz przykłady stron, które ich używają. Obejmuje również kilka metod dodawania okruszków chleba do swojej witryny lub aplikacji z przykładami z wiodących witryn, które ich używają, a także fragmenty kodu do wdrożenia ich samodzielnie. Więc czytaj dalej, aby dowiedzieć się więcej!
Czym są Breadcrumbs i jak działają?
Breadcrumbs to linki, które pokazują ścieżkę od bieżącej strony do góry witryny lub sekcji. Są one przydatne z wielu powodów. Po pierwsze, pomagają odwiedzającym poruszać się po witrynie, pokazując im, gdzie na stronie aktualnie się znajdują i jak przejść do innych stron w witrynie. Jest to szczególnie ważne w przypadku dużych witryn z wieloma stronami. Po drugie, pomagają one wyszukiwarkom zrozumieć zawartość strony i strukturę witryny. Skutkuje to lepszymi pozycjami w wyszukiwarkach i większym ruchem na stronie. Typowy przykład okruszków chleba jest pokazany na poniższym zrzucie ekranu: Pierwszy poziom linków w okruchach chleba dotyczy strony, na której się znajdujesz (Home). Drugi poziom to sekcja, w której się znajdujesz (Blog). Trzeci poziom to artykuł, na którym się znajdujesz (Tworzenie bloga). Ostatni poziom to tekst artykułu (Tworzenie bloga: Podstawy). Każdy poziom linków można kliknąć, aby przejść do danej strony, lub jeśli jest to link wewnętrzny, który prowadzi do innej strony tej samej witryny, można również kliknąć na niego, aby przejść bezpośrednio do tej strony.
Dlaczego breadcrumbs są przydatne?
Jak wspomnieliśmy we wstępie, breadcrumbs są przydatne z wielu powodów. Oto kilka kluczowych powodów, dla których są one używane, aby strony internetowe i aplikacje były bardziej przyjazne dla użytkownika: – Łatwa nawigacja – Breadcrumbs pokazują ścieżkę, którą musi pokonać użytkownik, aby dotrzeć do pożądanego celu. Mogą oni poruszać się pomiędzy stronami w witrynie za pomocą linków w ścieżce breadcrumb. Jest to szczególnie pomocne w przypadku dużych witryn z wieloma stronami. – Lepsze wyniki w wyszukiwarkach – Wyszukiwarki takie jak Google używają okruchów chleba, aby zrozumieć zawartość strony i strukturę witryny. Dzięki temu Twoja witryna zajmuje wyższą pozycję w wynikach wyszukiwarek i zyskuje więcej odwiedzających. – Łatwiejsza aktualizacja treści – Jeśli zaktualizujesz lub zmienisz treść na stronie, lub zmienisz adres URL artykułu, możesz zaktualizować ścieżkę okruszka dla tej strony. Pomaga to odwiedzającym stronę nadal być w stanie nawigować do właściwego miejsca.
Jak używasz Breadcrumbs w swojej witrynie lub aplikacji?
Breadcrumbs są dodawane do strony za pomocą znaczników nav> w HTML. Możesz ich użyć na stronie głównej, lub na dowolnej innej stronie witryny. Poniższy kod pokazuje, jak dodać okruszki chleba na stronie głównej witryny: Znacznik nav> służy do oznaczania okruszków chleba. Posiada on atrybut o nazwie ‘type’, który wskazuje, że element nav> jest typem nawigacji. Posiada również atrybut o nazwie ‘label’, który zawiera tekst dla breadcrumba. Ten tekst jest wyświetlany w okruszku chleba jako tytuł strony. Element nav> jest powszechnie używany do oznaczania elementów nawigacyjnych, takich jak strona główna lub główne menu nawigacyjne. Jednak może być również używany do oznaczania innych sekcji witryny, takich jak stopka, terminy itp. Jeśli dana sekcja posiada łącza do innych stron w witrynie, są one zazwyczaj uwzględniane w breadcrumb. Ważne: Element nav> musi mieć łącze do strony głównej, aby użytkownicy mogli nawigować do górnej części witryny.
Przykłady stron, które używają Breadcrumbs
Jak wspomnieliśmy we wstępie, wiele dużych witryn, a w szczególności witryn e-commerce, używa breadcrumbs na swoich stronach głównych. Zebraliśmy listę kilku najpopularniejszych witryn, które używają breadcrumbs, wraz ze zrzutami ekranu, jak wyglądają na tych stronach. – Amazon – Strona główna Amazon ma dużą sekcję w środku z linkami do głównych kategorii takich jak Elektronika, Książki, Buty, itp. Jest też sekcja ‘New & Hot’ na górze. Możesz kliknąć na ‘All Departments’ na dole strony, aby przejść do innej strony, gdzie znajdują się linki do innych kategorii. – Apple – strona główna Apple ma u góry dużą sekcję z łączami do produktów, usług, wsparcia i innych kategorii. Na dole znajduje się również sekcja ‘Sklep’ z łączami do produktów takich jak iPhone’y, iPady, komputery Mac itp. Możesz kliknąć na “All Good” na dole strony, aby przejść do innej strony, gdzie znajdują się linki do innych kategorii. – Best Buy – Strona główna Best Buy zawiera linki do działów Best Buy, marek Best Buy i ofert specjalnych Best Buy. Istnieje również sekcja ‘Sklep’ na dole strony z linkami do produktów i kategorii takich jak telewizory, komputery, urządzenia itp. Możesz kliknąć na ‘Wszystkie kategorie’ na dole strony, aby przejść do innej strony, gdzie znajdują się linki do innych kategorii.
Wnioski.
Okruchy chleba to linki, które pokazują ścieżkę od bieżącej strony do góry witryny lub sekcji. Są one przydatne z wielu powodów. Po pierwsze, pomagają odwiedzającym poruszać się po witrynie, pokazując im, gdzie w witrynie aktualnie się znajdują i jak przejść do innych stron w witrynie. Jest to szczególnie ważne w przypadku dużych witryn z wieloma stronami. Po drugie, pomagają one wyszukiwarkom zrozumieć zawartość strony i strukturę witryny. Skutkuje to lepszymi pozycjami w wyszukiwarkach i większym ruchem na stronie. Breadcrumbs mogą być dodane do każdej strony Twojej witryny lub aplikacji za pomocą znaczników nav>. Możesz ich użyć na stronie głównej lub na dowolnej innej stronie witryny. Są one powszechnie stosowane w dużych witrynach z wieloma stronami, aby ułatwić nawigację i pomóc wyszukiwarkom zrozumieć treść na stronie.
