Чели ли сте приказката Хензел и Гретел? В нея Братя Грим разказват за момче и момиче, които по неволя отиват в гъста и непроходима гора. За да се убедят, че могат да намерят обратния път до дома, те пръскат след себе си трохички хляб или т.нар. “breadcrumbs” (в буквален превод от английски – галета).

Именно затова служи тази т.нар. „галета” в света на компютрите – да укаже пътя, по който е дошъл потребителят и да улесни неговата работа по отношение на навигацията.

1. Какво представляват breadcrumbs?

Пред очите на всеки, ползващ компютър, ежедневно преминават много от тези т.нар. „трохи”. Те се използват в големите софтуерни продукти, в това число и в операционната система Windows. За справка вижте следната снимка:

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

В тази статия ще говоря за breadcrumbs, които се ползват в Интернет сайтовете и ще опиша техните позитиви и негативи от гледна точка на функционалността и seo-то на даден сайт.

“Трохи” можете да видите в почти всички големи сайтове, като започнем от Ebay и стигнем до Google. Ето и примери за тях от Ebay:

Ето и как се употребяват те от Google:

Друг прост пример за breadcrumbs е следният. Представете си, че имате фирмен уеб сайт с много продукти. В него, „трохите” биха изглеждали така:

Начална страница –> Продуктова категория  –> Под категория –> Продукт

3. Какви са плюсовете при използване на breadcrumbs в сайта ви от гледна точка на неговата функционалност?

• Помагат на потребителя да идентифицира точно къде в страницата ви се намира в даден момент.
• Помагат на потребителя да прескача от страница на страница по най-удобният за него начин.
• Дават бърз и лесен достъп до top-level страниците на сайта ви. Изключително полезно е особено ако потребителят е попаднал във вътрешна страница на сайта ви посредством линк от друг сайт, търсене по long tail ключова дума и т.н.
• Ефективно намаляват bounce rate-а на дадена страница. Доста от потребителите влизащи за пръв път в сайта ви биха затворили прозореца след разглеждането на първата страница. Чрез използването на breadcrumbs, вие можете да насочите вниманието на посетителя към други страници и да го насърчите да се задържи по-дълго на сайта ви.

2. С какво са полезни breadcrumbs за seo-то на сайта ви?

• Създават линкове, които спомагат за по-добър вътрешен link buildging на сайта ви.
• Чрез „трохите” по естествен път можете да изобразите повече ключови думи на страницата си и да увеличите честотата им на употребяване (keyword density).
• Спомагат да се укаже на Google за какво точно става въпрос в страницата ви. Това става, като бота на търсачката вземе линковете и съответно разгледа съдържанието на страниците, към които сочат. По подразбиране, Google ги смята за релевантни на вашата и така ясно си формулира представа за това какво сте описали и какво предлагате.
• Помагат на търсачката да разбере самата структура на страницата ви.

3. Кога и как да използваме breadcrumbs?

• Използвайте ги само там където има нужда от тях – в големи сайтове с поне две под нива страници.
• Не слагайте линк към страницата, на която в момента се намира потребителят. Линквайте само предишните страници.
• Започнете „трохите” с линк към главната страница и продължете с линкове до настоящата, тази на която се намира потребителят в момента. Не пропускайте страници и не линквайте следващи страници, до които потребителя още не е достигнал.
• Използвайте ги само на видимо място на сайта си. Най-добре е точно над съдържанието.
• Не слагайте breadcrumbs с прекалено голям шрифт. Не трябва вниманието на потребителя да акцентира върху тях, а просто да му бъдат в помощ когато е необходимо.
• Сложете някакъв прост разделител между линковете. Аз най-често ползвам наклонена черта или стрелка, обградена с интервали.
• Не ги използвайте в title тагът на страницата си.
• Не ги използвайте в meta таговете.
• Не ги използвайте като заместител на главното меню.

4. Breadcrumbs и Google.

От няколко години насам, Google вече внедри „трохите” в някои от резултатите, които се показват при търсене. Пример за това вижте на долната снимка:

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

5. Как да направим така, че и нашата страница да се изобразява по този начин?

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

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

1. На първо място, начертайте си предварително схема за всеки един url адрес и опишете всички breadcrumbs, които ще има на дадена страница.

2. Уверете се, че всички „трохи” изпълняват точките за това как да ги използвате, които представих по-горе в статията.

3. Време е за действие. На първо време трябва да изберете markup формат, чрез който да изобразите „трохите” и да кажете на Google какви точно са тези линкове над съдържанието ви. Google чете форматите „Microdata” и „RDFa”.

4. Сега остава да внедрите необходимия код в страницата си. По-долу ще дам пример за код, който използва „RDFa” формат:

<div xmlns:v=“http://rdf.data-vocabulary.org/#“>
<ul>
<li typeof=“v:Breadcrumb“ >
<a href=“http://www.example.com/“ rel=“v:url“ property=“v:title“>Начало</a>
</li>
<li typeof=“v:Breadcrumb“ >
<a href=“http://www.example.com/Katalog/“ rel=“v:url“ property=“v:title“>Продуктов каталог</a>
</li>
<li typeof=“v:Breadcrumb“ >
<a href=“http://www.example.com/Katalog/Chasti/“ rel=“v:url“ property=“v:title“>Части за двигател</a>
</li>
<li typeof=“v:Breadcrumb“ >
<a href=“http://www.example.com/Katalog/Chasti/Sveshti/“ rel=“v:url“ property=“v:title“>Свещи</a>
</li>
</ul>
</div>

На долната снимка може да видите резултата от използването на този код:

Ако искате да използвате „Microdata” формат, то кодът, който трябва да използвате ще е следният:

<ul>
<li itemscope itemtype=“http://data-vocabulary.org/Breadcrumb“>
<a href=“http://www.example.com/“ itemprop=“url“>
<span itemprop=“title“>Example.com</span>
</a>
</li>
<li itemscope itemtype=“http://data-vocabulary.org/Breadcrumb“>
<a href=“http://www.example.com/Katalog/“ itemprop=“url“>
<span itemprop=“title“>Каталог</span>
</a>
</li>
<li itemscope itemtype=“http://data-vocabulary.org/Breadcrumb“>
<a href=“http://www.example.com/Katalog/Chasti/“ itemprop=“url“>
<span itemprop=“title“>Части за двигател</span>
</a>
</li>
<li itemscope itemtype=“http://data-vocabulary.org/Breadcrumb“>
<a href=“http://www.example.com/Katalog/Chasti/Sveshti“ itemprop=“url“>
<span itemprop=“title“>Свещи</span>
</a>
</li>
</ul>

Резултатът от използването на „Microdata“ формат е:

Имайте предвид, че в кодовете, които съм дал, WordPress автоматично замества кавичките. Ако просто копирате кодовете те няма да сработят. Преди да ги ползвате, изтрийте всички кавички и ги заменете с такива на латиница.

На теория няма значение кой от двата формата е по-добър. Google ги чете и разбира достатъчно добре. От  търсачката обаче, препоръчват използването на втория, „Microdata” формата. Аз също ви съветвам да използвате него по една проста причина, не знам дали обърнахте достатъчно внимание на снимките, които представих, но виждате, че в „RDFa” формата липсва линка „Каталог”, докато при кода използващ „Microdata” този линк е наличен. Ако имате много линкове в „трохите”, то със сигурност Google ще ореже една част от тях, но ако са по-малко е по-добре да се показват всички. Така потребителят ще знае точно на коя страница ще бъде заведен като натисне върху резултата ви и това ще спомогне за по нататъшното му навигиране из сайта. Както виждаме, при „Microdata” се изобразяват повече линкове, така че по-добре ползвайте този формат.

5. Сега остана една последна стъпка. Отидете на инструмента за тестване на Google – Rich Snippet Tool и пробвайте дали кода, който сте написали работи. Ако тествате готова страница, направете го в категорията „Products”. Ако кодът е наред, за вас остава единствено да се насладите на резултата. Ако има някакъв проблем, то чувствайте се свободни да оставите един коментар, а аз ще се опитам да ви помогна при решаването на проблема.

Имайте предвид, че както при всичко останало в Google трябва да мине известно време, за да видите резултата в самата търсачка. Не разчитайте, че веднага като поставите кода и breadcrumbs ще се визуализират. Бъдете търпеливи. Ако тестовия инструмент на Google изобразява всичко правилно, то трябва единствено да изчакате и резултатите няма да закъснеят.

Аз лично намирам опцията за breadcrumbs, предоставена ни от Google за доста полезна. Съветвам и вас, ако имате голям сайт с много продукти или нива на страниците, да се възползвате от „трохите”. Вашият сайт ще стане по-видим в търсачката и повече хора ще имат възможността да го видят и посетят.