ვორდპრესის Breadcrumbs: ვებსაიტის ნავიგაცია და ბილიკი

blog

ყველა breadcrumb-ის მნიშვნელობა, რომელსაც ინტერნეტში ნახავთ, უბრუნდება ზღაპარს ჰანსელისა და გრეტელის შესახებ. დიდი საიტები (განსაკუთრებით ელექტრონული მაღაზიები) ლაბირინთებს ჰგავს, ამიტომ ვფიქრობ, რომ არიადნეს თემის კონოტაცია უფრო მიზანშეწონილია.

დიზაინერები ათავსებენ breadcrumb-ს ყველა გვერდზე, გარდა მთავარი გვერდისა, რათა:

  • უზრუნველყოს მეტი გამოყენებადობა სწორი ნავიგაციით;
  • შეიმუშავონ საიტი უფრო შთამბეჭდავად;
  • გახადეთ საიტი უფრო SEO-ს მიმართ მეგობრული.

აქ, გთავაზობთ ვებსაიტზე breadcrumbs-ის კონცეფციას, ამ სფეროში მთავარ ტენდენციებს და საუკეთესო პრაქტიკას. თუმცა, საუკეთესო და ყველაზე ხშირად გამოყენებული პრაქტიკის აღწერამ შეიძლება ზოგჯერ შეამსუბუქოს თქვენი ფანტაზია. ამიტომ, მე მინდა გითხრათ ვებსაიტების breadcrumbs-ის დიზაინისა და breadcrumbs მაგალითებზე – კარგიც და არც ისე კარგი. 🙂

რა არის ვებსაიტის Breadcrumbs?

გამოყენებადობის პრინციპების მიხედვით, ვიზიტორები არ უნდა იყვნენ დეორიენტირებული ვებსაიტზე. ამიტომ, ისეთ კითხვებზე პასუხით, როგორიცაა “რა არის breadcrumbs?” და “რა არის breadcrumbs ვებსაიტზე?”, მინდა ვთქვა, რომ breadcrumb ნავიგაცია ახორციელებს ამ პრინციპს, როგორც მეორადი სანავიგაციო სისტემა. ეს ნიშნავს, რომ breadcrumbs ასახავს საიტის სტრუქტურას, ხდის ვებსაიტის იერარქიას უფრო გასაგებს და უზრუნველყოფს მარტივ წვდომას საიტის სხვა სექციებზე. Breadcrumbs ჰგავს ჰორიზონტალურ ტექსტურ ხაზს გამყოფებით და წარმოგვიდგენს ვიზიტორთა პოზიციას ვებსაიტზე.

მიუხედავად იმისა, რომ არის მეორადი სანავიგაციო სისტემა, რომელიც უზრუნველყოფს საიტის იერარქიას, ვებსაიტზე არსებული breadcrumbs ხელს უწყობს საიტის გამოყენებასა და SEO-ს; ისინი:

  • ზრდის კატეგორიზებული პროდუქტების ხელმისაწვდომობას და ამცირებს დაწკაპუნების რაოდენობა;
  • ხშირად შეიცავს საკვანძო სიტყვებს (მაგ., მთავარი გვერდი > პროდუქტები-ს კი არა, არამედ ყვავილები > ვარდები);
  • უზრუნველყოს ვებ გვერდებს შორის გაუმჯობესებულ ურთიერთდაკავშირებას, უკეთესი ინდექსაციისათვის;
  • შესაძლებელს ხდის მარტივ ნავიგაციას;
  • გახადეთ საიტი ნათელი, თვალწარმტაცი და, შესაბამისად, უფრო დასამახსოვრებელი.

როგორც ხედავთ, დიდი მნიშვნელობა აქვს breadcrumb-ს.

Breadcrumb-ის ტიპების აღმოჩენა

როგორც წესი, breadcrumb ეხება მის მდებარეობას, ატრიბუტს და ბილიკს. წარმოვიდგინოთ breadcrumb-ის ტიპები უკეთ გასაგებად:

  • მდებარეობაზე დაფუძნებული breadcrumbs ასახავს ვებსაიტის იერარქიას და აჩვენებს ვიზიტორების ამჟამინდელ პოზიციას;
  • ატრიბუტებზე დაფუძნებული breadcrumbs ასახავს ვიზიტორების მიერ არჩეულ ყველა ატრიბუტს და, შესაბამისად, ფართოდ გამოიყენება ელექტრონული მაღაზიების შემთხვევაში;
  • ბილიკებზე დაფუძნებული breadcrumbs გვიჩვენებს ინდივიდუალური ვიზიტორის გზას და აღადგენს მათ გზას, თუნდაც ეს იყოს ძალიან რთული.

რატომ ვიყენებთ ვებსაიტის Breadcrumb-ს?

მოდით, შევხედოთ საკითხს დადებითი და უარყოფითი მხარეების პერსპექტივიდან.

გასაკვირი არ არის, რომ უპირატესობები ჭარბობს, განსაკუთრებით მაშინ, როდესაც გავითვალისწინებთ საუკეთესო breadcrumb-ის მახასიათებლებს:

  • ისინი არ იკავებენ დიდ ადგილს საიტზე;
  • breadcrumbs ადვილად ასაწყობია;
  • მომხმარებლები ადვილად ხვდებიან მათ გამოყენებას;
  • ისინი ხელს უწყობენ Page Rank ინდექსს.

მინუსები დაკავშირებულია ვებსაიტის არასწორ აგებასთან და მის განხორციელებასთან:

  • ისინი უნდა იყოს ხილული მომხმარებლებისთვის. ვებ დიზაინერები ტრადიციულად ათავსებენ breadcrumbs-ს ვებ გვერდის ზედა მხარეს, მაგრამ შესაძლებელია მათი განთავსება სათაურში. საიტის ნებისმიერ სხვა წერტილში მათი განთავსება ხდის საიტის breadcrumbs-ს უხილავს და გამოუყენებელს.
  • მთავარი გვერდი არ უნდა შეიცავდეს breadcrumbs-ს.
  • მიმდინარე გვერდზე არ უნდა შეგვეძლოს დაწკაპუნება, რათა თავიდან ავიცილოთ ციკლი.
  • უკეთესი ინდექსირებისთვის, არ დაივიწყოთ მიკრომონაცემების მარკირება.

Breadcrumbs ვებსაიტის მაგალითები

WordPress-ს იყენებს მთელს მსოფლიოს ვებსაიტების 43,25%, ხოლო Elementor-ის გამოყენება შეადგენს 7,1%-ს. აქტუალურია საკითხი, თუ როგორ გამოვიყენოთ breadcrumbs, განსაკუთრებით Elementor-ის breadcrumbs.

ვებსაიტის breadcrumbs უნდა იყოს მიმზიდველი, თვალსაჩინო და არ ეწინააღმდეგებოდეს ვებსაიტის დიზაინს. მსურს წარმოგიდგინოთ WordPress-ისა და Elementor-ის პლაგინებით აგებული breadcrumbs მაგალითები.

როგორც ზემოთ აღინიშნა, breadcrumbs ჰგავს ჰორიზონტალურ ტექსტურ ხაზის სიმბოლოებს (>, 一, ➡ და ა.შ.), რომლებიც განასხვავებენ უფრო მაღალი და ქვედა დონის გვერდებს.

შეგიძლიათ შეცვალოთ Elementor breadcrumbs ფერების გამოყენებით შრიფტებსა და იკონებზე, ხარვეზებზე, ფონებზე, საზღვრებზე, ინტერვალებზე და ა.შ.

ასევე breadcrumbs შეიძლება შეიცავდეს სურათებს. ეს არ არის ტრადიციული ვებ დიზაინისთვის, მაგრამ ვინ იცის, იქნებ ეს იყოს ახალი ტენდენცია. შესაძლოა,breadcrumbs-ისთვის მრავალი განსხვავებული სტილი შეიქმნას, გახდეს breadcrumbs ღირსეული დიზაინის ელემენტი, ისევე, როგორც  WordPress-ის შემდეგი საიტები აჩვენებს.

რა უნდა ავიცილოთ თავიდან breadcrumbs-ის შემუშავებისას?

დიახ, წარუმატებლობა ზოგჯერ ხდება. ვფიქრობ, რომ ტერმინი „ყველაზე ცუდი პრაქტიკა“ არ უნდა იქნას გამოყენებული ვებ დიზაინის შემთხვევაში, რადგან საუკეთესო პრაქტიკა ხშირად ნიშნავს სტანდარტულ/ჩვეულ პრაქტიკას. ეგრეთ წოდებული ყველაზე ცუდი პრაქტიკა ჩვეულებრივ იყენებს უჩვეულო ზომებს, შრიფტებსა და იკონებს პურის breadcrumbs-ში. ეჭვგარეშეა, ვებსაიტების breadcrumbs ოდესმე დაიკავებს ღირსეულ ადგილს დეკორატიულ ელემენტებში.

ასე რომ, ყველაზე ცუდი breadcrumbs ვებსაიტების მაგალითები და პრაქტიკა შემდეგია:

  • მინიმალიზმის ტენდენციები მინიმალურ სივრცეს ითვალისწინებს ვებსაიტების breadcrumbs-თვის, ასე რომ, ზედმეტად დიდი შრიფტის ზომები, იკონები, გამყოფები და ა.შ., ნავიგაციის დიზაინის დროს ცუდი პრაქტიკაა.
  • უგულებელყოფა breadcrumbs-ის მობილური ვერსიისთვის.
  • გამოყენება breadcrumbs-ის იმავე საიტის ზოგიერთი გვერდისთვის და უგულებელყოფა სხვა გვერდებისთვის.
  • ძირითადი ნავიგაცია ეწირება breadcrumbs-ს.
  • იყენებთ შტრიხებსა და მარცხნივ მიმართულ ისრებს ან სიმბოლოებს UX breadcrumbs-ში.
  • მრავალდონიანი საიტები საერთოდ არ შეიცავს breadcrumbs-ს.
  • ვებსაიტის breadcrumbs-ის სტრიქონი შეიცავს მიმდინარე გვერდს.
  • ვებსაიტის breadcrumbs სტრიქონში არ არის შუალედური გვერდები.
  • საერთოდ უგულებელყოფა ვებსაიტის breadcrumbs-ის.

როგორ დავამატოთ breadcrumbs ვებსაიტზე?

თქვენ შეგიძლიათ გამოიყენოთ ორი განსხვავებული გზა ვებსაიტზე breadcrumbs დასამატებლად: პლაგინები ან ხელით შექმნა. მსურს ყურადღება გავამახვილო უმარტივეს გზაზე – პლაგინებზე. აქ სია არის ყველაზე პოპულარული breadcrumbs-ის პლაგინები:

  • All-in-One SEO და Yoast SEO შეიცავს SEO-ს ვარიანტებს, ასევე საშუალებას გვაძლევს გვერდზე განთავსდეს breadcrumbs.
  • Breadcrumb NavXT-ის ინსტალაცია მარტივია, მიზნად ისახავს breadcrumbs (მათ შორის შაბლონების) კუსტომიზაციას, რომლებსახ ვაჩვენებთ სხვადასხვა ტიპის გვერდებზე.
  • Flexy Breadcrumb არის ერთ-ერთი ხელმისაწვდომი პლაგინი ამ სფეროში;
  • Crocoblock-ის Breadcrumbs ვიჯეტი ვებსაიტის დეველოპერებს საშუალებას აძლევს შექმნან სარეკლამო ბილიკები.

WordPress-ის პლაგინები გთავაზობთ შესაძლებლობებს ყველა გემოვნებისთვის. შეგიძლიათ სცადოთ თითოეული მათგანი და აირჩიოთ საუკეთესო.

შეჯამება

Breadcrumbs-ის სარგებელი აშკარად არის SEO -სთან მეგობრულობა და გამოყენებადობა. ეჭვგარეშეა, რომ ისინი ჰარმონიულად უნდა მოერგოს საერთო დიზაინს და აუცილებელია შესამჩნევი იყოს მომხმარებლებისთვის, რათა უზრუნველყონ საიტზე ნავიგაცია. Breadcrumbs განსხვავდება ტიპის მიხედვით (ადგილზე დაფუძნებული, ატრიბუტებზე დაფუძნებული და ბილიკებზე დაფუძნებული breadcrumbs), სტილის და ა.შ. ზოგადად, არ არსებობს საუკეთესო breadcrumbs ან breadcrumbs-ის დიზაინი.

ვფიქრობ, რომ breadcrumbs სათანადოდ არ არის შეფასებული, როგორც დიზაინის ელემენტი. ამიტომ, მოგიწოდებთ გამოიყენოთ პლაგინები, რომ გადააქციოთ ეს მოსაწყენი სტრიქონები ნამდვილ არიადნეს ძაფად. რადგან, გახდეს ნათელი და ფერადი. 😉

Free consultation ?

Have an idea or question ? We can assist you for free. Just leave your contact details below.