Какво представляват breadcrumbs, за какво служат и как се използват за SEO и UX

Връзките, разположени в горната част на уеб страницата, обикновено под заглавието на публикацията, помагат на потребителя да разбере пътя за достигане до ресурсите на уеб сайта. Какво представляват breadcrumbs, за какво служат и какво е значението им за SEO и потребителското изживяване UX, ще бъде тема на тази публикация.

Веднага мога да кажа защо се използва терминът breadcrumbs, преведен като хлебни трохи. В общата терминология на уеб дизайна това е метафора за техниката за ориентация, използвана в приказката от братята Грим “Хензел и Гретел”. По пътя, ориентирайки се по хлебните трохи, те стигат до дома си (в случая потребителят стига до по-горно ниво на уеб сайта и до домашната страница).

Какво представляват breadcrumbs, определение и обяснение

Пътеката на страницата показва позицията на страницата в йерархията на сайта и може да помогне на потребителите да разберат и изследват ефективно сайта. Потребителят може да се движи чак нагоре в йерархията, ниво след ниво, като започва от последния в “хлебната” пътеката. Особено полезно е за големи портали, които имат различни категории и подкатегории. Но дори и обикновените блогове на WordPress трябва да се добавят breadcrumbs. Пътят, съставен от слизане в дълбочина на категории до статия, използва разделители, които могат да бъдат от различен тип. Например: начало / категория / статия или начало > категория > статия.

Въобще breadcrumbs са хипервръзки, които възпроизвеждат пътя за навигация. Тези текстови индикации помагат на потребителите да идентифицират местоположението си. Те са необходими за UX и SEO, защото точно като вътрешните връзки, помагат да задържат потребителите на уебсайтa и там да намерят информацията, която търсят.

В последните години Google подчерта важността на хлебните трохи. Сега те могат да повлияят пряко на SEO, тъй като Google вече ги показва в резултатите от търсенето и ги използва, за да категоризира информацията там.

Освен това, в Google Search Console съществува отчет за структурирани данни за breadcrumbs.

Както се вижда, ползата от breadcrumbs се свежда се до това, че те помагат на потребителите да сърфират в уебсайта. В допълнение към използваемостта на уебсайта, хлебните трохи подобряват и начина, по който Googlebot го разглежда. Те му помагат да разбере структурата на уебсайта и да открие всички секции, от които той се състои.

Както подчертах в една предишна публикация, която се отнасяше за значението на URL за SEO на сайта, че Google чете структурата на сайта, не от URL, а от някои други елементи, между които и breadcrumbs:

Google пътува и разбира нивата на влагане на страниците не от URL, а именно от хлебните трохи, които позволяват и на самите потребители да извървят пътя обратно към началната страница. Така че трябва да се провери дали пътят на breadcrumb е (ясно) видим и структуриран и дали е правилен на всички страници на сайта. Преди всичко да се провери дали семантичното маркиране на breadcrumbs е направено добре.

Ползи за SEO и UX от използването на breadcrumbs

(adsbygoogle = window.adsbygoogle || []).push({});

Казахме, че тези връзки за навигация помагат за оптимизирането на търсачките и могат да дадат предимства по отношение на SEO оптимизацията на страницата. По-конкретно, те са решение за получаване на редица предимства за позициониране в Google .

Подобрено потребителско изживяване

Може да изглежда като детайл, но вмъкването на този низ от връзки преди самата публикация позволява на потребителя да се движи по-добре между страниците, без да губи време. Често използвам хлебните трохи, за да се движа например в сайта на Амазон, без да се връщам на началната му страница или да излизам и влизам отново в сайта. Така оставам по-дълго да сърфирам между предлаганите стоки.

Ползи за оптимизацията на сайта

– Чрез хлебните трохи се помага на Google да обхожда сайта

Текстовете с хипервръзки помагат на Google да разбере структурата на уебсайта и на категориите в частност. В тази връзка, както писах по-горе, Google също предлага структурирани данни, за да накарат пътеката на хлябните трохи да се появи в serp.

По този начин в резултата в Google, вместо чистият URL, се появява йерархичната последователност на различните директории. Ето страницата с инструкции за внедряване на структурирани данни.

– Увеличава броя на вътрешните връзки

Едно от предимствата на вмъкването на хлебните трохи в уебсайта: увеличава вътрешното свързване. То е един от ключовите фактори за оптимизация на сайта.

Къде се намират навигационните връзки – breadcrumbs?

Обикновено пътищата за навигация са разположени в горната част на страницата, тоест между заглавката и заглавието на H1. Всъщност Джон Мюлер посочва, че от гледна точка на търсачката, позицията на тези връзки не е важна.

Great question – no, the placement doesn’t matter for SEO. We use breadcrumbs for crawling (finding internal links) & for rich results (structured data); both don’t depend on placement of the breadcrumbs.

— 🐝 johnmu.csv (personal) 🐝 (@JohnMu) April 25, 2021

Примери и видове хлебни трохи

Има различни видове хлебни трохи. Целта е да се позволи на потребителите да се движат самостоятелно и без затруднения. Въпреки това, може да се избира между различни методи. Има три основни вида хлебни трохи, всеки със собствено предназначение. Преди да ги добавиш към сайта, разбери кой тип ще пасне най-добре.

Динамични или базирани на история (History-Based)

(adsbygoogle = window.adsbygoogle || []).push({});

Breadcrumbs могат да покажат стъпките, които потребителят е предприел, за да стигне до определена страница. Тези елементи са динамични, те показват ресурсите, които той е посетил, преди да стигне до публикацията, в която се намира.

Хлебните трохи трябва да показват текущата позиция в йерархията на сайта, а не историята на сесиите.

Например, ако търсиш публикации за SEO и прочетеш три различни статии, хлебните трохи може да изглеждат така: Начало > SEO статия 1 > SEO статия 2 > Текуща страница.

Йерархични или базирани на местоположение (Hierarchy-Based или Location-Based)

Тези пътеки изброяват последователността от директории, в които се намира потребителят. Първо е домът, след това са категориите, подкатегориите и накрая целевата страница. В примера с Amazon се вижда как са артикулирани.

Веднага се разбира, че най-използваният тип са йерархичните хлебни трохи. Сред основните съвети за управление на този тип структура можем да си припомним, че е безполезно да се добавя връзката към последната стъпка (в някои случаи дори не се показва) и същото може да се каже за домашната страница.

Атрибути (Attribute-Based)

В някои случаи хлебните трохи се използват въз основа на атрибутите на конкретен избор. Това се случва особено в електронната търговия, където продуктът може да има цвят, размер, пол и възраст като ориентир за навигация. И тази комбинация се възпроизвежда в връзките на хлебните трохи, за да помогне за придвижването из портала.

Пример със сайта на Patagonia: Men’s > Men’s Jackets & Vests > Men’s Rain Jackets ,

продължава дори с още видове категории.

Как да поставиш хлебните трохи в уебсайт

Съществуват различни решения за вмъкване на хлебните трохи в уеб сайт. Най-простото решение е чрез плъгини. Има няколко разширения, които ще ти бъдат от полза в това отношение.

Можеш да използваш NavXT – популярен плъгин за WordPress breadcrumbs.

Едно от най-добрите решения за добавяне на breadcrumbs към уеб сайт, направен с WordPress, е използването на плъгина Yoast. Този плъгин, който е възможно вече да използваш за оптимизиране на tag title и мета описание, позволява да се вмъкнат връзки за навигация.

Ако вече използваш Yoast, добавянето на трохите ще отнеме само няколко стъпки.

Ето процедурата за вмъкване на breadcrumbs в блога или уебсайта с помощта на приставката SEO от Yoast.

• Влез в уеб сайта си в WordPress.
• Инсталирай и активирай Yoast SEO.
• Избери Yoast SEO–> Облик на търсенето.
• Кликни върху раздела Breadcrumbs.
• В настройките на Breadcrumbs най-отдолу кликни върху Вкл. (Enabled).
• Конфигурирай настройките за навигация.
• Кликни върху Запис на промените.

За съжаление, в някои случаи при някои теми за WordPress хлебните трохи не се виждат, дори ако ги сложиш с Yoast. В тези случаи трябва да копираш и поставиш следващия код. Това означава, че ще трябва да редактираш темата си. Ако не си сигурен как да го направиш, трябва да се обърнеш към разработчика на темата. Преди каквото и да е редактиране на файловете си направи резервно копие.

Копирай следния код в темата си, където искаш да бъдат хлебните трохи. Ако не си сигурен, ще трябва да експериментираш с разположението:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>');
}
?>

Забележка: В зависимост от темата може да се наложи или да не се наложи да добавиш в началото <?php и в края ?> – тези PHP тагове. В един от моите блогове трябваше да сложа кода без тези тагове, понеже се вмъква вътре в код, който вече има началните и крайните PHP тагове. Ако ги сложиш и не трябва да бъдат сложени, ще получиш съобщение за грешка.

Често срещаните места, където можеш да поставиш горния код, са в твоя single.php и/или page.php файл точно над заглавието на страницата. Друга опция, която улеснява работата в някои теми, е просто да поставиш кода в header.php,в самия му край.

Ето обобщеният алгоритъм:

• Копирай фрагмента с код за вграждане на навигационния път.
• Избери Външен вид –> Редактор на теми.
• Постави кодовия фрагмент във файл на темата.
• Запази и провери дали хлебните трохи са на подходящото място.

В някои теми няма редактор на тема, затова трябва да се работи в cPanel. Отиди във Файловия мениджър–>папка public_html–>папка wp-content–>папка themes–>твоята тема–>намери подходящия файл и с десен бутон над него кликни на edit и вмъкни фрагмента код. Запази.

Неприятното в случая е, че ако правиш промяната в оригиналната тема, а не в детската (child тема), при всяко обновяване на темата, трябва да поставяш отново кода на същото място.

Същата процедура се отнася и ако използваш отличния Rank Math SEO плъгин. В случая кодът е:

<?php
if (function_exists('rank_math_the_breadcrumbs')) 
    rank_math_the_breadcrumbs();
?>

Няколко съвета как да използваш breadcrumbs

(adsbygoogle = window.adsbygoogle || []).push({});

Има някои основни правила, които трябва да следваш, за да оптимизираш хлебните трохи, както от гледна точка на SEO, така и от гледна точка на доброто потребителско изживяване UX. Ето как да поставиш тези хипервръзки така, че да са наистина полезни за сайта и потребителя.

• Не винаги са необходими хлебни трохи. На сайта с една страница те са безполезни.
• На началната страница също е излишно да слагаш хлебни трохи.
• Не бъркай хлебните трохи с други елементи за навигация.
• Използвай малко по-малък шрифт от контекста. Хлебните трохи трябва да се виждат лесно, но да не са натрапчиви.
• Позиционирай ги в горната част на страницата, под изображението или точно над заглавието H1, така че да са лесни за намиране.
• Входът за начало постави или в менюто, или в хлебните трохи, не и на двете места.
• Текущата страница не трябва да бъде свързана, не трябва да има хипервръзка към нея.

Хлебните трохи не са предназначени да заменят лентата за навигация. На мобилните устройства, трябва да се внимава с хлебните трохи, които отиват в началото. Те могат да доведат до объркване на страницата. Помисли за изтриване на последния слой, ако е твърде дълъг. 

Някои допълнения

Как да поставиш хлебни трохи в Woocommerce?

При електронната търговия пътищата за навигация са още по-важни. Ако използваш Woocommerce, можеш да добавиш breadcrumbs с конкретно разширение.

Как да поставиш хлебни трохи в Elementor?

Ако използваш този конструктор на страници, можеш да поставиш навигационните пътеки или с джаджа Yoast, или с официална такава на Elementor, която обаче е платена. От друга страна можеш по-добре да персонализираш хлебните трохи с CSS.

Възможно е софтуерът, създател на сайт или тема на WordPress, който ползваш, да има вградена функция за навигация.

Някои плъгини на WordPress имат опция за навигация, например Ocean WP.

За да добавиш хлебни трохи към сайтове на Wix, Squarespace и някои други конструктори на сайтове, вероятно ще трябва да поставиш кодовете за това ръчно.