Jak wdrożyć dane strukturalne breadcrumbs?


4
Jak wdrożyć breadcrumbs?

Co to właściwie są dane strukturalne breadcrumbs? Możemy odpowiedzieć w prosty sposób: jest to nawigacja okruszkowa lub jak kto woli – menu nawigacyjne. Prezentuje nam na jakim etapie hierarchii struktury danej witryny aktualnie się znajdujemy. Samo menu nawigacyjne może zostać wdrożone bez danych strukturalnych bądź też z nimi. Poniżej fotografia z przykładowym menu nawigacyjnym.

Jak możemy zaobserwować na powyższej fotografii mamy w przejrzysty sposób przedstawioną strukturę w stylu: Strona główna > Kategoria > Docelowy adres (w tym przypadku wpis poradnikowy).

Co powinno być podlinkowane w breadcrumbs?

Na przykładzie zamieszczonym wyżej dobrą praktyką będzie jeżeli:

  • 1. Podlinkowana będzie strona główna (webdev-nowak)
  • 2. Podlinkowana będzie kategoria (strony www)
  • 3. Ostatni element w strukturze nie powinien być podlinkowany, a dlaczego? Odpowiedzmy sobie w prosty sposób: po co właściwie mamy linkować do miejsca w którym obecnie się znajdujemy?

W sytuacji kiedy mielibyśmy bardziej rozbudowane menu nawigacyjne, działajmy w identyczny sposób, czyli najprościej mówiąc podlinkowane w odpowiednie miejsca powinno być wszystko, poza ostatnim elementem. Często zaobserwujemy także zjawisko pogrubienia ostatniej pozycji. W zależności od tego jak mamy zakodowany szablon będzie zależało jak to zrobić, ale najczęściej skuteczny okaże się „last-child”. Niektóre szablony mają wbudowaną klasę do ostatniego elementu w breadcrumbs na przykład last-item i wtedy sytuacja mogłaby wyglądać w ten sposób:

li > a.last-item {
    font-weight:900;
}

.breadcrumb li:last-child {
    font-weight:900;
}

Pierwszy kod sprawdziłby się na moim szablonie, drugi zaś nie, ale na pewno jest to bardziej popularne rozwiązanie i być może komuś się przyda. Najważniejsze to zorientować się z jakich klas i w jaki sposób zbudowane jest menu okruszkowe na danym serwisie.

Co dają dane strukturalne breadcrumbs?

Dane strukturalne breadcrumbs są niezwykle popularne przy wszelkiego rodzaju optymalizacjach. Poprawnie wdrożone menu nawigacyjne zę schemą BreadcrumbList pozwala na poprawne wyświetlanie się w serpach (wynikach wyszukiwania) ścieżki adresu, a także google potrafi podzielić stronę na kategorię pochodzących informacji z tej witryny. Poniżej przykład jak w ,,site:domena.pl” wyświetla się ścieżka nawigacyjna na stronie z wdrożonymi breadcrumbs.

Adres tej podstrony to: https://webdev-nowak.pl/tag/zapytanie-sql/?order=recent

Breadcrumbs – mikrodane , a JSON-LD

Dwie popularne formy wdrażania schemy dla menu nawigacyjnego. Kod JSON-LD będziemy umieszczać na przykład w sekcji, zaś mikrodane to odpowiednio dopisane znaczniki schemy w naszym kodzie źródłowym, gdzie generujemy menu nawigacyjne.

<!-- breadcrumbs przy pomocy JSON-LD -->
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
<!-- breadcrumbs przy użyciu mikrodanych -->
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>

Myślę, że lepszym rozwiązaniem jest korzystanie z drugiej opcji (mikrodane), łatwiej jest uzyskać efekt globalny, a nikt nie wyobraża sobie na serwisy, które mają więcej niż kilkadziesiąt stron wprowadzać ręcznie za każdym razem przy użyciu if’a oddzielnego jsona dla danej podstrony. Globalne zastosowanie przy użyciu JSON-LD jest możliwe, kiedy jesteśmy w danym serwisie uzyskać niezbędne dane przy pomocy zmiennych, ewentualnie przy ich braku, trzeba je zadeklarować – dlatego w większości przypadków mikrodane będą prostsze do wdrożenia.

Jak wdrożyć breadcrumbs na wordpressie?

Wyszukaj kodu, gdzie generuje się menu nawigacyjne w Twoim szablonie, a następnie wprowadz odpowiednie znaczniki (mikrodane) – jak to powinno wyglądać znajdziesz w powyżej umieszczonym kodzie.

Globalne wdrożenie

Z racji, że każdy szablon może się różnić spróbuję przedstawić najbardziej przystępne formy wdrożenia breadcrumbs.

Wtyczka: WP SEO Structured Data Schema

Jeśli udało Ci się zainstalować i odpalić wtyczkę (przed instalacją zawsze sprawdź wersję zgodności) powinna Ci się ona pojawić w lewej kolumnie.

Najedz na powyższą pozycję, a następnie przejdź do ,,settings” (ustawienia). Odnajdź na liście ,,breadcrumbs”, zaznacz checkboxa i zapisz ustawienia. Dodam, że nie spowoduje to wygenerowania w naszym szablonie breadrumbsów w formie: Strona główna -> Kategoria -> Wpis. Zostanie nam zaimplementowany do kodu JSON-LD. Warto korzystać z tego rozwiązania kiedy mamy wdrożone menu nawgiacyjne, ale nie posiadamy wystarczającej wiedzy, żeby wdrożyć na nich mikrodane.

Dodanie breadcrumbs przez Yoast’a

Przejdź do ustawień ,,Wyszukiwarki”, a następnie znajdź ,,Okruszki” – przejdź do tej zakładki. Zaznacz, że chcesz włączyć okruszki.

Teraz czas na drugi krok, a mianowicie wygenerowanie breadcrumbsów w naszym szablonie. Jak to zrobić? Wybierz miejsce docelowe, gdzie chcesz je dodać i zaimplementuj poniższy kod.

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

Jak wdrożyć breadcrumbs na presta 1.7.X?

Odnajdź katalog ,,_partials”, ścieżka powinna wyglądać mniej więcej tak: public_html/themes/nazwaTwojegoSzablonu/templates/_partials. Interesować nas będzie plik: breadcrumb.tpl

<nav data-depth="{$breadcrumb.count}" class="breadcrumb">
  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    {block name='breadcrumb'}
      {foreach from=$breadcrumb.links item=path name=breadcrumb}
        {block name='breadcrumb_item'}
          {if not $smarty.foreach.breadcrumb.last}
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="{$path.url}"><span itemprop="name">{$path.title}</span></a>
              <meta itemprop="position" content="{$smarty.foreach.breadcrumb.iteration}">
            </li>
          {elseif isset($path.title)}
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
              <span itemprop="name">{$path.title}</span>
			  <meta itemprop="position" content="{$smarty.foreach.breadcrumb.iteration}">
            </li>
          {/if}
        {/block}
      {/foreach}
    {/block}
  </ol>
</nav>

Dla Presty w wersji 1.6X plik odnajdziemy trochę wcześniej, bo tam jeszcze folderu _partials nie było. Zatem breadcrumb.tpl znajdzie się w głównym katalogu szablonu.

#presta 1.6.X
{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}

{if !empty($path)}
  {* Extract bradcrumb links from anchors *}
  {$matchCount = preg_match_all('/<a.+?href="(.+?)"[^>]*>([^<]*)<\/a>/', $path, $matches)}
  {$breadcrumbs = []}
  {for $i=0; $i<$matchCount; $i++}
    {$breadcrumbs[] = ['url' => $matches[1][$i], 'title' => $matches[2][$i]]}
  {/for}

  {* Extract the last breadcrumb which is not link, it's plain text or text inside span *}
  {$match = preg_match('/>([^<]+)(?:<\/\w+>\s*)?$/', $path, $matches)}
  {if !empty($matches[1])}
    {$breadcrumbs[] = ['url' => '', 'title' => $matches[1]]}
  {elseif !$match && !$matchCount}
    {$breadcrumbs[] = ['url' => '', 'title' => $path]}
  {/if}
{/if}

<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{l s='Home Page'}" itemprop="item">
      <span itemprop="name">{l s='Home'}</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  {if !empty($breadcrumbs)}
    {foreach from=$breadcrumbs item=breadcrumb name=crumbs}
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        {if !empty($breadcrumb.url)}
          <a href="{$breadcrumb.url}" itemprop="item">
            <span itemprop="name">{$breadcrumb.title}</span>
          </a>
        {else}
          <span itemprop="name">{$breadcrumb.title}</span>
        {/if}
        <meta itemprop="position" content="{($smarty.foreach.crumbs.iteration|intval + 1)}" />
      </li>
    {/foreach}
  {/if}
</ol>

{if isset($smarty.get.search_query) && isset($smarty.get.results) && $smarty.get.results > 1 && isset($smarty.server.HTTP_REFERER)}
  <nav>
    <ul class="pager">
      <li class="previous">
        {capture}{if isset($smarty.get.HTTP_REFERER) && $smarty.get.HTTP_REFERER}{$smarty.get.HTTP_REFERER}{elseif isset($smarty.server.HTTP_REFERER) && $smarty.server.HTTP_REFERER}{$smarty.server.HTTP_REFERER}{/if}{/capture}
        <a href="{$smarty.capture.default|escape:'html':'UTF-8'|secureReferrer|regex_replace:'/[\?|&]content_only=1/':''}" name="back">
          <span>&larr; {l s='Back to Search results for "%s" (%d other results)' sprintf=[$smarty.get.search_query,$smarty.get.results]}</span>
        </a>
      </li>
    </ul>
  </nav>
{/if}

Jak zrobić breadcrumbs z mikrodanymi w PHP?

Największe CMS’y oprate są o PHP, więc warto też wspomnieć, że możemy napisać niezbyt skomplikowaną funkcję, a następnie w wybranych przez nas miejscach są implementować.

#w celu wywołania funkcji użyj: <?php echo j_breadcrumbs(); ?>
<?php
function j_breadcrumbs() {
  $pageURL = 'http';
  if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
  $pageURL .= "://";
  if ($_SERVER["SERVER_PORT"] != "80") {
   $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
  } else {
   $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
  }
  $page_URI = $_SERVER["SERVER_NAME"];
  $url_parts = explode("/", parse_url($pageURL, PHP_URL_PATH));
  $y = 0;
  $url_string = "";

  if (!is_home()) {
      echo '<ul itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">';
      echo '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="https://' . $page_URI . '/" itemprop="item"><span class="" itemprop="name">Home</span><i class="fi fi-home"></i></a><meta itemprop="position" content="1" /></li>';
      $x = 1;

      foreach ($url_parts as $part){
        if($part !== ""):
          $url_string .= $part ."/";
          if($part == "category"):
            echo '<li  itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="#" itemprop="item"><span itemprop="name">'. ucwords(str_replace("-"," ", $part)) .'</span></a><meta itemprop="position" content="'. $x .'" /></li>';
          else:
            echo '<li  itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="https://' . $page_URI . '/' . $url_string. '" itemprop="item"><span itemprop="name">'. ucwords(str_replace("-"," ", $part)) .'</span></a><meta itemprop="position" content="'. $x .'" /></li>';
          endif;
        endif;
        $x += 1;
      }
      echo '</ul>';
  }
}
?>

Prawdopodobnie znalazłoby się jeszcze kilka innych alternatywnych metod, szczególnie przy tak popularnych i stale rozwijanych cmsach jak PrestaShop czy WordPress, ale o tym wkrótce!


Podoba ci się? Podziel się z przyjaciółmi!
4
Jeremiasz Nowak
Na co dzień młodszy programista php, ale nie unika frontendowych technologii. Interesuje się szeroko pojętym pozycjonowaniem (seo). W tej sferze stara się wykorzystać swoje umiejętności programowania w php - w oparciu o najpopularniejsze platformy, cmsy.
Komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *