Какво трябва да знаете за breadcrumbs?

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

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

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

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

windows breadcrumbs

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

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

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

ebay breadcrumbs

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

breadcrumbs

Друг прост пример за 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 вече внедри „трохите” в някои от резултатите, които се показват при търсене. Пример за това вижте на долната снимка:

serp crumbs

Така резултатите вдъхват повече доверие у търсещия, а също така изобразяват страницата ви по по-атрактивен начин и карат потребителя да и обърне внимание. Точно по същия начин, както при 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>

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

test breadcrumbs

Ако искате да използвате „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“ формат е:

testing crumbs

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

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

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

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

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

Добави коментар по удобен за теб начин :)

Loading Facebook Comments ...

9 Responses to Какво трябва да знаете за breadcrumbs?

  1. AstroData.bg казва:

    Изключително полезно. Съвсем скоро попаднах на няколко доста популярни родни сайта които ползват Breadcrumbs. Видимостта им в търсачката е уникална над останалите сайтове.

    Намирам статията за много полезна. Възползвайте се.

  2. Да, статията е доста послезна. Само не ми е ясно – мисля, че тези кодчета са за html5-базирани сайтове. Ако се използват на xhtml ще бъде ли някакъв проблем, освен че валидатора ще вади грешки?

  3. Да се надяваме 🙂 Мисля да ги имплементирам тази седмица 😀

    • Петър казва:

      Сподели после резултата и за колко време го е отчело в serp-a. 🙂

  4. Иванов казва:

    здравей,
    искам да попитам – ако зползват тези т.нар. breadcrumbs, след колко време се отразяват? и винаги ли при използването им google показва така страниците?

    нещо друго има ли значение – пр на сайта и т.н.

    Мерси

    • Петър казва:

      Здравей! Breadcrumbs се отразяват по различно време на сайта. Може да отнеме от няколко дни до няколко месеца. Пробвай кода на сайта си в инструмента, който съм посочил в линка в статията. Ако там резултатът се появява както трябва, от теб се иска единствено да изчакаш Google да започне да ги изобразява така.

      Друго не е от значение за ползването им. Трябва единствено да интегрираш правилно кода и да изчакаш Google да види и отрази промените.

      Поздрави!

  5. Тодоров казва:

    Статията ще ми е много полезна, но да попитам – този код в коя страница се слага? Начална или в тази, в която съм в момента? Т.е. ако ще правя бредкръмбс до Свещи, слагам всичко това в страницата за свещи? И ако е така, защо правим линк към свещи (тоест в страницата за свещи слагаме линк към страницата за свещи)? Благодаря

  6. Тодоров казва:

    И допълнително – къде точно в страницата го вкарвам този код

Вашият отговор на Иванов Отказ

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Да не си бот? *

Предишна публикация:
penguin
Възстановяване и предпазване от Пингвина

Най-нашумелият update на Google безспорно е този носещ названието „Пингвин”. Стартира за пръв път на 24 април тази година, като...

Затвори