Хлебные крошки на сайте пример


Вы наверняка уже знакомы с понятием «Хлебные крошки» в веб-разработке и возможно даже приходилось реализовывать эти самые «крошки» на WordPress.

Выглядят «хлебные крошки» так:

Главная страница » Раздел » Подраздел » Текущая страница

«Хлебные крошки» наиболее рекомендуются сайтам со сложной структурой разделов (рубрик), ведь с ними гораздо легче и понятнее разобраться посетителю в каком разделе сайта он находится и если нужно, можно легко подняться на уровень выше и осмотреть ветку целиком.

Теперь, после короткого ликбеза, буду делиться очередной функцией для WordPress, реализовывающей всю цепочку от главной страницы до текущей на всех типах страниц, включая таксономии и произвольные типы записей.

Функция будет показывать «хлебные крошки» для страниц следующих типов:

  • Главная страница;
  • Постоянная страница;
  • Страница любого древовидного типа записи;
  • Страница поста;
  • Страница вложения (учитывается прикреплено вложение к записи или нет);
  • Любой не древовидный тип записи (прикрепленный к любой таксономии, например, к стандартным «рубрикам»);
  • Страница рубрики;
  • Страница меток;
  • Страница таксономии (как древовидной, так и одноуровневой (метки));
  • Страницы архивов по датам, авторам;
  • Страница пагинации для всех типов где предусмотрена пагинация
    (отображается как: Главная » Рубрика » Страница 2,3,4).
  • Поддерживает микроразметку. Инструменты для проверки: для Яндекса и для Google.

Из особенностей, которые я не встретил в аналогичных функциях представленных в сети, стоит отметить правильный показ «хлебных крошек» для произвольных типов записей и произвольных таксономий, также в аналогах страница пагинации отображалась как, например, «Рубрика (страница 2)», а не «Рубрика > Страница 2», что, на мой взгляд, неправильно.

Для визуального восприятия, взгляните как выглядят «хлебные крошки» разных типов:

Хлебные крошки

Также, я старался написать как можно менее прожорливый вариант функции.

Что касается плагина Breadcrumb NavXT, который повсеместно рекомендуется для вывода «хлебных крошек» — он мне не понравился из-за своей громоздкости. Моя функция не хуже, а в чем-то даже лучше: за счет функциональности, компактности и местами быстродействия!

Также функция поддерживает микроразметки: schema.org или RDF, смотрите параметр ‘markup’.

меню


Функция «хлебных крошек» для WordPress

<?php  /**  * Хлебные крошки для WordPress (breadcrumbs)  *  * @param string [$sep = ''] Разделитель. По умолчанию ' » '  * @param array [$l10n = array()] Для локализации. См. переменную $default_l10n.  * @param array [$args = array()] Опции. См. переменную $def_args  * @return string Выводит на экран HTML код  *  * version 3.3.2  */ function kama_breadcrumbs( $sep = ' » ', $l10n = array(), $args = array() ){ 	$kb = new Kama_Breadcrumbs; 	echo $kb->get_crumbs( $sep, $l10n, $args ); }  class Kama_Breadcrumbs {  	public $arg; .  

', // tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. // Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' ); // Параметры по умолчанию static $args = array( 'on_front_page' => true, // выводить крошки на главной странице 'show_post_title' => true, // показывать ли название записи в конце (последний элемент). Для записей, страниц, вложений 'show_term_title' => true, // показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс 'title_patt' => '<span class="kb_title">%s</span>', // шаблон для последнего заголовка. Если включено: show_post_title или show_term_title 'last_sep' => true, // показывать последний разделитель, когда заголовок в конце не отображается 'markup' => 'schema.org', // 'markup' - микроразметка. Может быть: 'rdf.data-vocabulary.org', 'schema.org', '' - без микроразметки // или можно указать свой массив разметки: // array( 'wrappatt'=>'<div class="kama_breadcrumbs">%s</div>', 'linkpatt'=>'<a href="%s">%s</a>', 'sep_after'=>'', ) 'priority_tax' => array('category'), // приоритетные таксономии, нужно когда запись в нескольких таксах 'priority_terms' => array(), // 'priority_terms' - приоритетные элементы таксономий, когда запись находится в нескольких элементах одной таксы одновременно.

// Например: array( 'category'=>array(45,'term_name'), 'tax_name'=>array(1,2,'name') ) // 'category' - такса для которой указываются приор. элементы: 45 - ID термина и 'term_name' - ярлык. // порядок 45 и 'term_name' имеет значение: чем раньше тем важнее. Все указанные термины важнее неуказанных... 'nofollow' => false, // добавлять rel=nofollow к ссылкам? // служебные 'sep' => '', 'linkpatt' => '', 'pg_end' => '', ); function get_crumbs( $sep, $l10n, $args ){ global $post, $wp_query, $wp_post_types; self::$args['sep'] = $sep; // Фильтрует дефолты и сливает $loc = (object) array_merge( apply_filters('kama_breadcrumbs_default_loc', self::$l10n ), $l10n ); $arg = (object) array_merge( apply_filters('kama_breadcrumbs_default_args', self::$args ), $args ); $arg->sep = '<span class="kb_sep">'. $arg->sep .'</span>'; // дополним // упростим $sep = & $arg->sep; $this->arg = & $arg; // микроразметка --- if(1){ $mark = & $arg->markup; // Разметка по умолчанию if( ! $mark ) $mark = array( .

закрываем span после разделителя! ); // schema.org elseif( $mark === 'schema.org' ) $mark = array( 'wrappatt' => '<div class="kama_breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">%s</div>', 'linkpatt' => '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="%s" itemprop="item"><span itemprop="name">%s</span></a></span>', 'sep_after' => '', ); elseif( ! is_array($mark) ) die( __CLASS__ .': "markup" parameter must be array...'); $wrappatt = $mark['wrappatt']; $arg->linkpatt = $arg->nofollow ? str_replace('<a ','<a rel="nofollow"', $mark['linkpatt']) : $mark['linkpatt']; $arg->sep .= $mark['sep_after']."n"; } $linkpatt = $arg->linkpatt; // упростим $q_obj = get_queried_object(); // может это архив пустой таксы? $ptype = null; if( empty($post) ){ if( isset($q_obj->taxonomy) ) $ptype = & $wp_post_types[ get_taxonomy($q_obj->taxonomy)->object_type[0] ]; } else $ptype = & $wp_post_types[ $post->post_type ]; // paged $arg->pg_end = ''; if( ($paged_num = get_query_var('paged')) || ($paged_num = get_query_var('page')) ) $arg->pg_end = $sep .

rintf( $loc->paged, (int) $paged_num ); $pg_end = $arg->pg_end; // упростим $out = ''; if( is_front_page() ){ return $arg->on_front_page ? sprintf( $wrappatt, ( $paged_num ? sprintf($linkpatt, get_home_url(), $loc->home) . $pg_end : $loc->home ) ) : ''; } // страница записей, когда для главной установлена отдельная страница. elseif( is_home() ) { $out = $paged_num ? ( sprintf( $linkpatt, get_permalink($q_obj), esc_html($q_obj->post_title) ) . $pg_end ) : esc_html($q_obj->post_title); } elseif( is_404() ){ $out = $loc->_404; } elseif( is_search() ){ $out = sprintf( $loc->search, esc_html( $GLOBALS['s'] ) ); } elseif( is_author() ){ $tit = sprintf( $loc->author, esc_html($q_obj->display_name) ); $out = ( $paged_num ? sprintf( $linkpatt, get_author_posts_url( $q_obj->ID, $q_obj->user_nicename ) . $pg_end, $tit ) : $tit ); } elseif( is_year() || is_month() || is_day() ){ $y_url = get_year_link( $year = get_the_time('Y') ); if( is_year() ){ $tit = sprintf( $loc->year, $year ); $out = ( $paged_num ? sprintf($linkpatt, $y_url, $tit) . $pg_end : $tit ); } // month day else { $y_link = sprintf( $linkpatt, $y_url, $year); $m_url = get_month_link( $year, get_the_time('m') ); if( is_month() ){ $tit = sprintf( $loc->month, get_the_time('F') ); $out = $y_link .

ep . ( $paged_num ? sprintf( $linkpatt, $m_url, $tit ) . $pg_end : $tit ); } elseif( is_day() ){ $m_link = sprintf( $linkpatt, $m_url, get_the_time('F')); $out = $y_link . $sep . $m_link . $sep . get_the_time('l'); } } } // Древовидные записи elseif( is_singular() && $ptype->hierarchical ){ $out = $this->_add_title( $this->_page_crumbs($post), $post ); } // Таксы, плоские записи и вложения else { $term = $q_obj; // таксономии // определяем термин для записей (включая вложения attachments) if( is_singular() ){ // изменим $post, чтобы определить термин родителя вложения if( is_attachment() && $post->post_parent ){ $save_post = $post; // сохраним $post = get_post($post->post_parent); } // учитывает если вложения прикрепляются к таксам древовидным - все бывает 🙂 $taxonomies = get_object_taxonomies( $post->post_type ); // оставим только древовидные и публичные, мало ли... $taxonomies = array_intersect( $taxonomies, get_taxonomies( array('hierarchical' => true, 'public' => true) ) ); if( $taxonomies ){ // сортируем по приоритету if( ! empty($arg->priority_tax) ){ usort( $taxonomies, function($a,$b)use($arg){ $a_index = array_search($a, $arg->priority_tax); if( $a_index === false ) $a_index = 9999999; $b_index = array_search($b, $arg->priority_tax); .

foreach( (array) $prior_terms as $term_id ){ $filter_field = is_numeric($term_id) ? 'term_id' : 'slug'; $_terms = wp_list_filter( $terms, array($filter_field=>$term_id) ); if( $_terms ){ $term = array_shift( $_terms ); break; } } } else $term = array_shift( $terms ); break; } } } if( isset($save_post) ) $post = $save_post; // вернем обратно (для вложений) } // вывод // все виды записей с терминами или термины if( $term && isset($term->term_id) ){ $term = apply_filters('kama_breadcrumbs_term', $term ); // attachment if( is_attachment() ){ if( ! $post->post_parent ) $out = sprintf( $loc->attachment, esc_html($post->post_title) ); else { if( ! $out = apply_filters('attachment_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'self' ); $parent_tit = sprintf( $linkpatt, get_permalink($po.

>taxonomy) ){ // метка if( is_tag() ) $out = $this->_add_title('', $term, sprintf( $loc->tag, esc_html($term->name) ) ); // такса elseif( is_tax() ){ $post_label = $ptype->labels->name; $tax_label = $GLOBALS['wp_taxonomies'][ $term->taxonomy ]->labels->name; $out = $this->_add_title('', $term, sprintf( $loc->tax_tag, $post_label, $tax_label, esc_html($term->name) ) ); } } // древовидная такса (рибрики) else { if( ! $out = apply_filters('term_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'parent' ); $out = $this->_add_title( $_crumbs, $term, esc_html($term->name) ); } } } // влоежния от записи без терминов elseif( is_attachment() ){ $parent = get_post($post->post_parent); $parent_link = sprintf( $linkpatt, get_permalink($parent), esc_html($parent->post_title) ); $_out = $parent_link; // вложение от записи древовидного типа записи if( is_post_ty.

{ // Ссылка на архивную страницу типа записи для: отдельных страниц этого типа; архивов этого типа; таксономий связанных с этим типом. if( $ptype && $ptype->has_archive && ! in_array( $ptype->name, array('post','page','attachment') ) && ( is_post_type_archive() || is_singular() || (is_tax() && in_array($term->taxonomy, $ptype->taxonomies)) ) ){ $pt_title = $ptype->labels->name; // первая страница архива типа записи if( is_post_type_archive() && ! $paged_num ) $home_after = sprintf( $this->arg->title_patt, $pt_title ); // singular, paged post_type_archive, tax else{ $home_after = sprintf( $linkpatt, get_post_type_archive_link($ptype->name), $pt_title ); $home_after .= ( ($paged_num && ! is_tax()) ? $pg_end : $sep ); // пагинация } } } $before_out = sprintf( $linkpatt, home_url(), $loc->home ) . ( $home_after ? $sep.$home_after : ($out ? $sep : '') ); $out = apply_filters('kama_breadcrumbs_pre_out', $out, $sep, $loc, $arg ); $out = sprintf( $wrappatt, $before_out . $out ); return apply_filters('kama_breadcrumbs', $out, $sep, $loc, $arg ); } function _page_crumbs( $post ){ $parent = $post->post_parent; $crumbs = array(); while( $parent ){ $page = get_post( $parent ); $crumbs[] = sprintf( $this->arg->linkpatt, get_permalink($page), esc_html($page->post_title) ); $parent = $page->post_parent; } return implode( $this->arg->sep, array_reverse($crumbs) ); } function _tax_crumbs( $term, $start_from = 'self' ){ $termlinks = array(); $term_id = ($start_from === 'parent') ? $term->parent : $term->term_id; while( $term_id ){ $term = get_term( $term_id, $term->taxonomy ); $termlinks[] = sprintf( $this->arg->linkpatt, get_term_link($term), esc_html($term->name) ); $term_id = $term->parent; } if( $termlinks ) return implode( $this->arg->sep, array_reverse($termlinks) ) /*. $this->arg->sep*/; return ''; } // добалвяет заголовок к переданному тексту, с учетом всех опций. Добавляет разделитель в начало, если надо. function _add_title( $add_to, $obj, $term_title = '' ){ $arg = & $this->arg; // упростим... $title = $term_title ? $term_title : esc_html($obj->post_title); // $term_title чиститься отдельно, теги моугт быть... $show_title = $term_title ? $arg->show_term_title : $arg->show_post_title; // пагинация if( $arg->pg_end ){ $link = $term_title ? get_term_link($obj) : get_permalink($obj); $add_to .= ($add_to ? $arg->sep : '') . sprintf( $arg->linkpatt, $link, $title ) . $arg->pg_end; } // дополняем - ставим sep elseif( $add_to ){ if( $show_title ) $add_to .= $arg->sep . sprintf( $arg->title_patt, $title ); elseif( $arg->last_sep ) $add_to .= $arg->sep; } // sep будет потом... elseif( $show_title ) $add_to = sprintf( $arg->title_patt, $title ); return $add_to; } } /** * Изменения: * 3.3 - новые хуки: attachment_tax_crumbs, post_tax_crumbs, term_tax_crumbs. Позволяют дополнить крошки таксономий. * 3.2 - баг с разделителем, с отключенным 'show_term_title'. Стабилизировал логику. * 3.1 - баг с esc_html() для заголовка терминов - с тегами получалось криво... * 3.0 - Обернул в класс. Добавил опции: 'title_patt', 'last_sep'. Доработал код. Добавил пагинацию для постов. * 2.5 - ADD: Опция 'show_term_title' * 2.4 - Мелкие правки кода * 2.3 - ADD: Страница записей, когда для главной установлена отделенная страница. * 2.2 - ADD: Link to post type archive on taxonomies page * 2.1 - ADD: $sep, $loc, $args params to hooks * 2.0 - ADD: в фильтр 'kama_breadcrumbs_home_after' добавлен четвертый аргумент $ptype * 1.9 - ADD: фильтр 'kama_breadcrumbs_default_loc' для изменения локализации по умолчанию * 1.8 - FIX: заметки, когда в рубрике нет записей * 1.7 - Улучшена работа с приоритетными таксономиями. */

Вставлять этот код нужно в файл шаблона functions.php или непосредственно в тот файл где вызывается функция.

Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:

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

Если нужно поменять разделитель между ссылками, укажите первый параметр:

<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' » '); ?>

меню

Примеры использование фильтров

#1 Установка параметров через фильтр

Измени дефолтные параметры через фильтр

add_filter('kama_breadcrumbs_default_args', function($args){ 	$args['on_front_page'] = 0; 	$args['show_post_title'] = ''; 	$args['priority_tax'] = array('mytax'); 	return $args; } );

Если установить параметры при вызове функции в третьем аргументе функции, то они перебьют параметры указанные в фильтре…

#3 Пример перевода крошек на английский

Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:

Вариант 1

При вызове функции нужно указать строки локализации так:

// Локализация if( function_exists('kama_breadcrumbs') ){  	$myl10n = array( 		'home' => 'Front page', 		'paged' => 'Page %d', 		'_404' => 'Error 404', 		'search' => 'Search results by query - <b>%s</b>', 		'author' => 'Author archve: <b>%s</b>', 		'year' => 'Archive by <b>%d</b> год', 		'month' => 'Archive by: <b>%s</b>', 		'day' => '', 		'attachment' => 'Media: %s', 		'tag' => 'Posts by tag: <b>%s</b>', 		'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', 		// tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'.  		// Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' 	);  	kama_breadcrumbs(' » ', $myl10n );  }
Вариант 2

C версии 1.9. Можно использовать хук kama_breadcrumbs_default_loc, чтобы для каждого вызова одно и тоже не указывать. Для этого рядом с исходным кодом крошек добавьте такой хук:

add_filter('kama_breadcrumbs_default_loc', function($l10n){ 	// Локализация 	return array( 		'home' => 'Front page', 		'paged' => 'Page %d', 		'_404' => 'Error 404', 		'search' => 'Search results by query - <b>%s</b>', 		'author' => 'Author archve: <b>%s</b>', 		'year' => 'Archive by <b>%d</b> год', 		'month' => 'Archive by: <b>%s</b>', 		'day' => '', 		'attachment' => 'Media: %s', 		'tag' => 'Posts by tag: <b>%s</b>', 		'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', 		// tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'.  		// Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' 	); });

Далее, используйте вызов в шаблоне как обычно, крошки будут переведены на англ.:

function_exists('kama_breadcrumbs') && kama_breadcrumbs();

#3 Добавление произвольной ссылки в начало крошек

Допустим нам нужно добавить после пункта «Главная» ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).

Для этого добавьте такой хук рядом с кодом крошек:

add_action('kama_breadcrumbs_home_after', 'my_breadcrumbs_home_after', 10, 4); function my_breadcrumbs_home_after( $false, $linkpatt, $sep, $ptype ){ 	// если мы в рубрике с ID 5 или в дочерней рубрике, 	// то дополним начало крошек ссылкой на страницу с ID 7 	$qo = get_queried_object(); 	if( is_category() && ( $qo->term_id == 5 || $qo->parent == 5 ) ){ 		$page = get_post( 7 ); 		return sprintf( $linkpatt, get_permalink($page), $page->post_title ) . $sep; 	}  	return $false; }

#4 Добавление еще таксономий в крошки

По умолчанию в крошках обрабатывается только одна таксономи. Но иногда нужно несколько, для этого в версии 3.3 я вставил хуки: 'attachment_tax_crumbs', 'post_tax_crumbs', 'term_tax_crumbs'.

Допустим, у нас есть тип записи realty и 3 таксы для него: country, type_deal, type_realty. Нужно, чтобы у страницы записи в крошках отображались все таксы в указанном порядке. Также нужно, чтобы на каждой странице таксы указывались все предыдущие таксы и текущая в указанном порядке: country > type_deal > type_realty

// apply_filters('term_tax_crumbs', '', $term, $that ); add_filter('term_tax_crumbs', 'more_tax_crumbs', 10, 3); add_filter('post_tax_crumbs', 'more_tax_crumbs', 10, 3); function more_tax_crumbs( $empty, $term, $that ){ 	$is_post_filter = doing_filter('post_tax_crumbs'); // else 'term_tax_crumbs'  	if( ( $is_post_filter && is_singular('realty') ) || is_tax('country') ){ 		global $post;  		$out = '';  		$out = $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // базовая такса - country  		// тип сделки 		$term = get_query_var('type_deal'); 		if( $term && ($term = get_term_by('slug', $term, 'type_deal')) ) 			$out .= $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // тип сделки  		// тип недвижимости 		$term = get_query_var('type_realty'); 		if( $term && ($term = get_term_by('slug', $term, 'type_realty')) ){ 			// запись 			if( $is_post_filter ){ 				$_crumbs = $that->_tax_crumbs( $term, 'self' ); 				$out .= $that->_add_title( $_crumbs, $post );  			} 			// такса 			else { 				$_crumbs = $that->_tax_crumbs( $term, 'parent' ); 				$out .= $that->_add_title( $_crumbs, $term, esc_html($term->name) );  			}  		}  		return $out; 	}  	return $empty; } 

меню

wp-kama.ru

Хлебные крошки на сайте что это такое?

Хлебные крошки — это HTML виджет или плагин, который помогает пользователю определить место его нахождение на сайте. Так же, благодаря этому виджету посетитель может в один клик открыть разделы к которым относиться читаемая им статья, где он сможет найти для себя еще какой нибудь интересный материал. На рисунке ниже вы можете посмотреть, как выглядит виджет Breadcrumbs на демо блоге.

Красная стрелка указывает на сам виджет. Как видите много места он не занимает. Состоит виджет из следующих частей:

  1. Ссылка ведущая на главную страницу
  2. Ссылка ведущая на страницы разделов в которых находится данная статья
  3. Заголовок читаемой статьи (порой виджет может не содержать его)

Итак, на данный момент мы с вами узнали, что такое Хлебные крошки и для чего они нужны. Так же стоит отметить, что в веб-дизайне существует такое понятие, как юзабилити оно означает удобство просмотра вашего сайта или блога. По-этому прежде всего Хлебные крошки относятся именно к юзабилити.

Влияние Хлебных крошек на продвижение в поисковых системах

Многие начинающие вебмастера и блогеры, часто спрашивают, влияют ли Хлебные крошки на SEO оптимизацию сайта. И здесь мнения бывалых верстальщиков разделились. Одни говорят, что да, другие утверждают обратное. Я же больше склоняюсь к той группе, которая утверждает, что данный элемент влияет на оптимизацию. Смотрите сами, виджет способствует дополнительным переходам по сайту, что само по себе повышает поведенческий фактор. К тому же на сегодняшний день «Хлебные крошки» выделяют для поисковых роботов микроразметкой schema.org (помогает поисковым ботом понять для чего нужен тот или иной элемент сайта). И напоследок, Breadcrumbs это навигация, которая принимает участие в перелинковке страниц, а перелинковка, как все мы знаем один из самых важных процессов SEO.

Как добавить Хлебные крошки в блог на Blogger 

Установка виджета для старых и новых тем (Soho, Notable, Emporio, Contempo) blogger немного отличается. Но я покажу вам, как это можно сделать для обеих вариантов. Первое, что нужно сделать, скачать файл с HTML кодом breadcrumbs. Что делать дальше смотрим на видео:

www.shablonu-dlya-blogger.ru

Основные SEO-требования к хлебным крошкам

1. Статический вес

Факт наличия/отсутствия и состав цепочки навигации важно учитывать при расчёте перелинковки внутри сайта. Ссылки из хлебных крошек ведут к повышению статического веса основных разделов, располагающиеся высоко по иерархии, что хорошо для продвижения категорийных запросов (ВЧ и СЧ), но может несколько негативно сказываться на продвижении товарных фраз (НЧ и мНЧ).

Базовый вывод: важно, чтобы ссылки из цепочки навигации вели на продвигаемые разделы с вхождением в них слов из продвигаемых фраз. Если ставка при продвижении проекта делается на товарные (теговые и прочие НЧ-запросы), то имеет смысл рассмотреть вариант скрытия части гиперссылок с помощью AJAX.

Если главная страница сайта продвигается по конкурентным запросам, то (не в ущерб навигации) лучше использовать в качестве анкора ссылки не слово «Главная», а фрагмент соответствующей фразы или весь запрос целиком. Скажем: Мебель > Офисная > Стулья и кресла.

2. Поведенческие факторы

Безусловно, понятная навигация внутри сайта повышает глубину просмотра и вовлеченность пользователя. Как следует из ряда SEO-исследований [1, 2] данные поведенческие факторы (доля переходов из поиска со временем просмотра более 1 минуты, глубина просмотра) существенно сказываются на ранжировании сайта по продвигаемым запросам.

Увеличение данных метрик положительно сказывается не только на позициях сайта, но и на показателях конверсии.

Базовый вывод: внедрение хлебных крошек, если они упрощают пользователю навигацию, положительно сказывается на значимых поведенческих метриках и может вести к улучшению позиций продвигаемого ресурса.

3. Представление сайта на выдаче (сниппет)

Используя передачу структурированных данных можно несколько улучшить представление сайта в результатах выдачи Google. Поисковая система Яндекс пока не поддерживает данный вид разметки, но часто и самостоятельно, без дополнительных усилий со стороны SEO-специалиста, формирует наглядную цепочку навигации для результата в SERP.

Наглядная цепочка в Яндексе
Рис. 1. Отображение наглядной цепочки навигации в выдаче Яндекса.

Сравнение в Google
Рис. 2. Отображение оформленной с помощью структурированных данных и не оформленной цепочки навигации в выдаче Google.

Google поддерживает три формата передачи структурированных данных — JSON-LD, Microdata, RDFa [3]. Для оформления хлебных крошек рекомендуется использовать Microdata и RDFa [4]. Пример оформления кода в формате Microdata для данных типа BreadcrumbList представлен ниже (сама цепочка: SEO > Трафик > Заказ).

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»>
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO»>
        <span itemprop=»name»>SEO</span>
        <img itemprop=»image» src=»http://example.com/images/icon-SEOicon.png» alt=»SEO»/></a>
    <meta itemprop=»position» content=»1″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic»>
      <span itemprop=»name»>Трафик</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Traffic.png» alt=»Traffic»/></a>
    <meta itemprop=»position» content=»2″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic/Order»>
      <span itemprop=»name»>Заказ</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Order.png» alt=»Order»/></a>
    <meta itemprop=»position» content=»3″ />
  </li>
</ol>

После внедрение микроразметки на сайт, важно произвести проверку правильности использования структурированных данных с помощью валидатора от Google. Доступна как проверка URL, так и фрагмента кода.

Контролировать правильность обработки и отображение структурированных данных можно с помощью соответствующей вкладки в Search Console от Google, путь: Вид в поиске > Структурированные данные.

Структурированные данные
Рис. 3. Инструмент работы со структурированными данными от Google в Search Console.

4. Добрые советы

  • Включение текущий страницы с отсутствием ссылки на неё в конце дублирующей навигации — является хорошим тоном.
    Скажем: SEO > Тарифы > Трафик > Онлайн-заказ.

  • Не стоит злоупотреблять вхождением ключевых фраз в цепочке — это повышает плотность их вхождений и увеличивает вероятность применения текстовых пост-фильтров. 1–2 вхождений для слова будет достаточно.

  • Наличие хлебных крошек не является строго обязательным требованием и её использование всегда остается на усмотрение администраторов ресурса. Тем не менее, внедрение цепочки часто позволяет улучшить удобство навигации.

Полезные ссылки

  1. Эффективная работа с коммерческими и поведенческими факторами в 2016 году, Cybermarketing, 2016, http://www.slideshare.net/SergeyYurkov1/2016-cybermarketing-16.

  2. Аналитика поведенческих факторов Яндекс/Гугл, SEO conference в Казани, 2015, http://www.slideshare.net/staspolomar/ss-53154946.

  3. Introduction to Structured Data, Google Developers, 2016, https://developers.google.com/search/docs/guides/intro-structured-data.

  4. Breadcrumbs, Google Developers, 2016, https://developers.google.com/search/docs/data-types/breadcrumbs.

pixelplus.ru

Пример

Хочу сказать, что данная статья будет делиться на две части. В первой части мы будем делать само оформление хлебных крошек, примеров будет 4. А во второй части мы будем прикреплять одно из понравившихся оформлений на блог WordPress. В общем надеюсь, что Вам всё понятно, теперь приступаем к работе.

Для начала нам нужно будет создать обычный html файл, например, index.html. Затем открыть его с помощью любого текстового редактора (например блокнот) и добавить следующее:

HTML

<ul id="breadcrumbs-one">   <li><a href="">Крошки1</a></li>   <li><a href="">Крошки2</a></li>   <li><a href="">Крошки3</a></li>   <li><a href="">Крошки4</a></li>   <li><a href="" class="current">Крошки5</a></li>   </ul>

Далее для тега <ul> добавляем стили CSS:

CSS

ul{   margin: 0;   padding: 0;   list-style: none;   }

Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.

Первый пример

Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:

Хлебные крошки на сайте пример

#breadcrumbs-one{   background: #eee;   border-width: 1px;   border-style: solid;   border-color: #f5f5f5 #e5e5e5 #ccc;   border-radius: 5px;   box-shadow: 0 0 2px rgba(0,0,0,.2);   overflow: hidden;   width: 100%;   }    #breadcrumbs-one li{   float: left;   }    #breadcrumbs-one a{   padding: .7em 1em .7em 2em;   float: left;   text-decoration: none;   color: #444;   position: relative;   text-shadow: 0 1px 0 rgba(255,255,255,.5);   background-color: #ddd;   background-image: linear-gradient(to right, #f5f5f5, #ddd);   }    #breadcrumbs-one li:first-child a{   padding-left: 1em;   border-radius: 5px 0 0 5px;   }    #breadcrumbs-one a:hover{   background: #fff;   }    #breadcrumbs-one a::after,   #breadcrumbs-one a::before{   content: "";   position: absolute;   top: 50%;   margin-top: -1.5em;   border-top: 1.5em solid transparent;   border-bottom: 1.5em solid transparent;   border-left: 1em solid;   right: -1em;   }    #breadcrumbs-one a::after{   z-index: 2;   border-left-color: #ddd;   }    #breadcrumbs-one a::before{   border-left-color: #ccc;   right: -1.1em;   z-index: 1;   }    #breadcrumbs-one a:hover::after{   border-left-color: #fff;   }    #breadcrumbs-one .current,   #breadcrumbs-one .current:hover{   font-weight: bold;   background: none;   }    #breadcrumbs-one .current::after,   #breadcrumbs-one .current::before{   content: normal;   }

Второй пример

Тут как и в первом примере, элемент состоит из трёх частей, которые соеденяются в одну часть с помощью CSS.

Хлебные крошки на сайте пример

#breadcrumbs-two{   overflow: hidden;   width: 100%;   }    #breadcrumbs-two li{   float: left;   margin: 0 .5em 0 1em;   }    #breadcrumbs-two a{   background: #ddd;   padding: .7em 1em;   float: left;   text-decoration: none;   color: #444;   text-shadow: 0 1px 0 rgba(255,255,255,.5);   position: relative;   }    #breadcrumbs-two a:hover{   background: #99db76;   }    #breadcrumbs-two a::before{   content: "";   position: absolute;   top: 50%;   margin-top: -1.5em;   border-width: 1.5em 0 1.5em 1em;   border-style: solid;   border-color: #ddd #ddd #ddd transparent;   left: -1em;   }    #breadcrumbs-two a:hover::before{   border-color: #99db76 #99db76 #99db76 transparent;   }    #breadcrumbs-two a::after{   content: "";   position: absolute;   top: 50%;   margin-top: -1.5em;   border-top: 1.5em solid transparent;   border-bottom: 1.5em solid transparent;   border-left: 1em solid #ddd;   right: -1em;   }    #breadcrumbs-two a:hover::after{   border-left-color: #99db76;   }    #breadcrumbs-two .current,   #breadcrumbs-two .current:hover{   font-weight: bold;   background: none;   }    #breadcrumbs-two .current::after,   #breadcrumbs-two .current::before{   content: normal;   }

Третий пример

В третьем предмете элементы состоят из двух частей.

Хлебные крошки

#breadcrumbs-three{   overflow: hidden;   width: 100%;   }    #breadcrumbs-three li{   float: left;   margin: 0 2em 0 0;   }    #breadcrumbs-three a{   padding: .7em 1em .7em 2em;   float: left;   text-decoration: none;   color: #444;   background: #ddd;   position: relative;   z-index: 1;   text-shadow: 0 1px 0 rgba(255,255,255,.5);   border-radius: .4em 0 0 .4em;   }    #breadcrumbs-three a:hover{   background: #abe0ef;   }    #breadcrumbs-three a::after{   background: #ddd;   content: "";   height: 2.5em;   margin-top: -1.25em;   position: absolute;   right: -1em;   top: 50%;   width: 2.5em;   z-index: -1;   transform: rotate(45deg);   border-radius: .4em;   }    #breadcrumbs-three a:hover::after{   background: #abe0ef;   }    #breadcrumbs-three .current,   #breadcrumbs-three .current:hover{   font-weight: bold;   background: none;   }    #breadcrumbs-three .current::after{   content: normal;   }

Четвёртый пример

Хлебные крошки

#breadcrumbs-four{   overflow: hidden;   width: 100%;   }    #breadcrumbs-four li{   float: left;   margin: 0 .5em 0 1em;   }    #breadcrumbs-four a{   background: #ddd;   padding: .7em 1em;   float: left;   text-decoration: none;   color: #444;   text-shadow: 0 1px 0 rgba(255,255,255,.5);   position: relative;   }    #breadcrumbs-four a:hover{   background: #efc9ab;   }    #breadcrumbs-four a::before,   #breadcrumbs-four a::after{   content:'';   position:absolute;   top: 0;   bottom: 0;   width: 1em;   background: #ddd;   transform: skew(-10deg);   }    #breadcrumbs-four a::before{    left: -.5em;   border-radius: 5px 0 0 5px;   }    #breadcrumbs-four a:hover::before{   background: #efc9ab;   }    #breadcrumbs-four a::after{   right: -.5em;   border-radius: 0 5px 5px 0;   }    #breadcrumbs-four a:hover::after{   background: #efc9ab;   }    #breadcrumbs-four .current,   #breadcrumbs-four .current:hover{   font-weight: bold;   background: none;   }    #breadcrumbs-four .current::after,   #breadcrumbs-four .current::before{   content: normal;   }

Пример

Вот и всё, я считаю, что очень стильные и одновременно простые крошки. Тем более нет никаких изображений, соответственно быстрее загружаются.

Во всех примерах в стилях используется тег hover, который меняет цвет элемента при наведении, так же если Вам не нравится не один из представленных цветов, Вы с лёгкость сможете заменить его на свой.

Теперь пришло время перейти к второй части, а именно, будем прикреплять один из примеров на свой блог WordPress, поехали.

И так, для начала нам нужно скачать плагин Breadcrumb NavXT, скачать его Вы сможете тут. После того как плагин будет скачан и активирован, нужно будет произвести некоторые настройки:

Настройки плагина находятся в параметрах. Во вкладке General нужно найти строчку Breadcrumb Separator и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.

Хлебные крошки на сайте пример

Далее выбираем вторую вкладку Current Item и на против строчки Link Current Item ставим галочку. Обязательно после того как всё сделаете,  не забудьте сохраниться.

Хлебные крошки на сайте пример

Всё, с плагином закончили, теперь нужно выбрать то оформление, которое Вам больше всего понравилось. В данном случае на примере будет вот этот стиль:

Хлебные крошки на сайте пример

Это второй пример, который находится выше в статье.

Берём и просто копируем данные стили, а затем добавляем их в style.css Вашей темы, в любое место, которое больше всего Вам понравится, советую выделить начало и конец стилей крошек, потому что если в будущем захочется что либо там изменить, запутаетесь.

Теперь нужно хлебные крошки добавить непосредственно на блог.

В админке блога находим внешний вид, затем редактор, и выбираем single.php. Далее добавьте следующее:

<div id="breadcrumbs-two">  <?php  if(function_exists('bcn_display'))  {   bcn_display();  }  ?>  </div>

Важно

Обратите внимание, что сама функция вызова крошек стоит между тегами <div></div> id которых breadcrumbs-two, не забудьте поменять данный id на пример который  добавили в стили. Например, если это первый пример (который выше) тогда должно быть так: <div id=»breadcrumbs-one»> и так далее. (Извиняюсь за ребус) 🙂

Если у Вас шаблон на блоге похож на мой, в том смысле, что бэкграунд серый а сам блок с контентом белый, крошки лучше всего ставить над блоком, как у меня. Потому что они могут перенестись на новую строку если название слишком длинное и, поверьте, это не очень красиво. 🙂

Вот и всё. Дорогие друзья, если возникнут какие то трудности обязательно спрашивайте в комментариях. До скорых встреч.

beloweb.ru

Что такое хлебные крошки

Это навигационная цепочка или навигационное меню, которое представляет из себя путь по всему сайту, с его главной страницы до текущей, на которой в данный момент находится пользователь. Такая строчка присутствует и на моем блоге, найти ее можно сверху каждой статьи. Сложного абсолютно ничего нет, подводных камней никаких нет, ошибок при работе тоже нет.

Из Википедии:  Элемент навигации ( обычно в разных файловых менеджерах на подобии Total Commander ), который представляет собой полный путь по всей файловой системы от корня до текущей папки, в которой находится пользователь.

Такой вариант навигации присутствует на большом количестве различных сайтов, блогов, интернет магазинов и портал. Можно открыть известные порталы или интернет магазины и убедиться в этом самому. Если такой способ использует большинство владельцев сайтов, значит в этом есть смысл.

Что такое хлебные крошки

Добавление навигации из хлебных крошек не является обязательным, все зависит от вас самих. Некоторые сеошники наоборот не используют данный метод, считают это не нужным. Все зависит от вас, использовать такой метод навигации или нет.

к оглавлению ^

Как сделать хлебные крошки

В первую очередь необходимы сложным по своей структуре сайтам, которые используют рубрики, каталоги товаров и т.д. Все делается для удобства пользователя, чтоб он всегда знал, на какой странице он сейчас находится. В любой момент можно перейти на предыдущую страницу или раздел.

Первый способ, как сделать хлебные крошки на сайте, добавить небольшой php код, после чего вывести с помощью команды в нужном месте. Код проверен, все работает. Перед добавлением обязательно сделайте резервную копию базы данных. Копируем код в файл functions.php и сохраняем. Ошибки выкинуть не должно, код проверен и рабочий.

к оглавлению ^

Пример хлебных крошек

После этого переходим в файл single.php или header.php, в зависимости от вашего шаблона, и ставим в нужное нам место вот этот короткий код. Переходим на любую статью на сайте и смотрим на результат.

Как сделать хлебные крошки на сайте

Первую часть кода необходимо вставить в самый конец файла, как некоторые любят копировать в середину файла а потом говорить, что у них показывает ошибку и ничего не работает. Вторая часть отвечает на вывод, ее нужно вставить именно в то место, где они должны показываться на странице.

к оглавлению ^

Добавляем крошки на Wordpress без плагина

Для вывода на WordPress можно так же воспользоваться кодом, без плагина. Второй способ вставки не сильно отличается от первого. Можно попробовать оба варианта, если по какой то причине один из них не подходит или не нравится.

  • Делаем резервную копию баз данных;
  • Копируем готовый код в functions.php;
  • Вызываем функцию в файле single.php;
  • Проверяем хлебные крошки на странице записей.

Не забываем про резервную копию базы данных. Заходим через FTP клиент в папку с вашей темой или через админ панель «Внешний вид — Редактор». Открываем файл functions.php и в самый конец копируем код. В девятой строчке кода, где выводиться название главной страницы, ее можно изменить на любое другое название. Например «Home», «Главная страница» и так далее. Все на ваше усмотрение, как больше понравится, так и делайте.

Далее переходим в файл single.php или header.php, в зависимости от вашего шаблона, и в нужное место, где должна отображаться сама навигация, вставляем одну строчку, вывод функции. Все проверено и должно работать. Вставить эту строчку нужно в самом верху, перед названием статьи на сайте.

Хлебные крошки wordpress без плагина

Если по некоторым причинам у вас первые два способа не работают, что то не получается или криво становится, попробуйте третий вариант. Попробуйте третий вариант, он точно должен вам помочь. Все действия делаются точно так же. Для начала копируем в файл functions.php вот этот код.

После этого переходим в файл single.php или header.php и в нужное место вставляем вывод данной функции. Результат будет точно такой же. В какой файл нужно копировать, зависит уже от вашего шаблона, который вы устанавливали на сайт. В большинстве случаев данную надпись копируют в single.php в самом верху перед заголовком статьи.

Хлебные крошки без плагина

Все три варианта работают, пользоваться можно любым из них. При желании можно добавить несколько своих стилей. Я лично ничего не дополнял, чтоб не переборщить…может в дальнейшем поменяю решение, пока не решился. В третьем примере используется блок div breadcrumbs (#breadcrumbs). С его помощью можно добавить свои стили в файл style.css для оформления навигации крошек.

Если есть возможность добавить новую фишку на wordpress без плагина, всегда нужно этим пользоваться. Я вообще не сторонник плагинов, всегда ищу им замену. Бывают конечно случаи, когда нужно пользоваться только плагинами, но не в этом случае. Поставили код один раз и забыли навсегда. Дополнительные плагины это всегда лишняя нагрузка на сайт, в добавок дополнительная ячейка для взлома.

к оглавлению ^

Самые знаменитые плагины

Если вы не умеете или боитесь вставлять дополнительный код на сайт, поставить хлебные крошки на wordpress можно с помощью плагинов. Большой популярностью пользуются вот эти два плагина. Первый плагин Yoast SEO вообще является сео комбайном, в котором очень много разных возможностей. Второй плагин устанавливает только хлебные крошки. Каким из них будете пользоваться, решать уже вам.

  1. Сео комбайн Yoast SEO.
  2. Плагин BreadCrumb NavXT.

к оглавлению ^

Плагин Yoast SEO

Раньше этот плагин назывался по другому, сейчас его название Yoast SEO. Если на других ресурсах вы найдете старое название плагина, знайте это один и тот же плагин. Заходим в админку сайта, «Плагины — Установить новый». После установки плагина, слева в меню появится новая кнопка «SEO». Нажимаем на нее, раздел «Дополнительно». Первая вкладка называется «Навигационная цепочка (breadcrumbs)».

Хлебные крошки wordpress с плагином

Немного ниже есть ссылка на статью от автора, в которой идет описание всего процесса работы создания навигационной цепочки. Если вы хотите сами разобраться что и как делается, можно прочитать. Нажимаем на «Включить навигационную цепочку (breadcrumbs)». Сразу после нажатия открывается дополнительное меню.

Хлебные крошки плагин yoast seo

В первом пункте пишем разделитель внутри цепочки, я указал несколько вариантов, которые мне приходилось встречать. Выбираем один из них, какой будет присутствовать на вашем сайте. Текст ссылки на главную страницу — в этой ячейке пишем текст, который будет вести на главную страницу. Ранее я уже приводил примеры ( Главная страница, Home, Главная, адрес, название и т.д.). Остальные пункты оставляем как есть.

При желании можно выделить жирным шрифтом последнюю страницу ( как показано на скриншоте). Самый главный момент, если у вас есть рубрики, в том же окне настроек «Таксономия, которая будет показана в навигационной цепочке», нужно выбрать тип записи «Рубрика». Если не указать данный пункт, в ваших хлебных крошках не будут выводиться рубрики.

Хлебные крошки плагин yoast

Сохраняем и открываем в админке файл single.php, который отвечает за вывод статьи на движке вордпресс. Находим место, где будет находиться навигация из хлебных крошек, желательно в самом верху перед названием статьи или сразу после нее и вставляем вот этот код. Данный код написан в инструкции плагина Yoast по установке крошек. Не забываем все это сохранить, открываем любую страницу записей и любуемся.

к оглавлению ^

Плагин BreadCrumb NavXT

Если вы не можете установить первый плагин от Yoast из-за своих личных причин, можно воспользоваться плагином BreadCrumb NavXT, который отвечает только за вывод на сайте wordpress. Так же само заходим в админку, «Плагины — Установить новый плагин».

В самих настройках ничего менять не нужно. Можно изменить тип разделителя на ваше усмотрение. Включить «Показывать текущую позицию в виде ссылки» если в этом есть необходимость. Убирать ссылку на главную страницу не нужно. Пройдитесь по всех вкладках для ознакомления на всякий случай, может с выходом новых версий появится что то новенькое.

После этого переходим в файл single.php и в нужное место, где будут показаны хлебные крошки, вставляем вот этот код, который отвечает за вывод цепочки навигации. Проблем с этим плагином возникнуть не должно.

Спасибо, что прочитали статью до конца, буду очень признателен за комментарий или репост через социальные сети. До скорого, с вами был Евгений Несмелов.

nesmelov.ru

Разметка HTML

Разметка проста и минимальна. Она основана на неупорядоченном списке.

 

CSS

Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка:

Для дизайна наших «хлебных крошек» будут использоваться псевдо-элементы.

Первый пример

В данном примере используется очень простая техника. Создается треугольник на рамке справа с помощью псевдо-элементов, размещаемых один над другим. Темный треугольник смещается, чтобы создать эффект рамки.

Первый вариант дизайна "хлебных крошек"

Второй пример

Формы CSS строятся с помощью псевдо-элементов, размещаемых перед и после элемента.

Второй пример "хлебных крошек"

Третий пример

С помощью свойства border-radius скругляются углы прямоугольника и квадратов. Квадрат поворачивается, чтобы сделать из него бриллиант.

Третий пример "хлебных крошек"

Четвертый пример

С помощью псевдо-элементов добавляются два прямоугольника. Затем им скругляются углы.

Четвертый пример "хлебных крошек"

Преимущества дизайна «хлебных крошек» на основе CSS3

  • Нет изображений, поэтому просто обновлять и поддерживать.
  • Легко масштабируется.
  • Обратная совместимость со старыми браузерами.

ruseller.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.