Как сделать хлебные крошки joomla
Добавил пользователь Евгений Кузнецов Обновлено: 08.09.2024
Вот так выглядит микроразметка хлебных крошек на сайте:
Breadcrumbs отображаются и в сниппете в SERP. Последовательная цепочка слов выглядит приятнее, чем ссылка, посетителю легче понять, что он найдет на странице и что еще есть на сайте. Также breadcrumbs заменяют ссылки на разделы и подразделы.
URL-адреса, которые входят в микроразметку хлебных крошек, также создают внутреннюю перелинковку на ресурсе. При грамотной навигации можно правильно перераспределить ссылочный вес по страницам сайта.
На некоторых ресурсах использовать микроразметку с крошками не рекомендуется. Например, на форумах структура меняется за счет появления новых тем и удаления старых разделов. Но для онлайн-магазинов разметка обязательно. Это относится и к онлайн-библиотекам, энциклопедиям, кинотеатрам, блогам и другим сайтам, где много информации.
Влияние хлебных крошек на SEO
Хотя хлебные крошки не играют ключевой роли для SEO, они положительно влияют на поведенческие факторы, что полезно для оптимизации.
Разделы с ссылками влияют на статический вес других страниц, помогая равномерно распределить его для лучшего ранжирования.
Теперь рассмотрим на примере, как НЕ нужно прописывать ключи в Breadcrumbs:
Как сделать хлебные крошки на сайте: подробная инструкция
Разметка предполагает применение микроданных или RDFa. То есть, чтобы создать хлебные крошки вручную, необходимо внести изменения в html-код.
Вот так выглядит на примере разметка хлебных крошек при помощи микроданных:
А вот так, если использовать RDFa:
Первоначальный вариант: Главная > Услуги > Омолаживающие процедуры > Пилинг anti-age.
Корректная разметка: Косметология > Омолаживающие процедуры > Пилинг anti-age.
Плагины CMS для хлебных крошек
1. Wordpress
Помимо этого инструмента, можно использовать такие сервисы, как Flexy Breadcrumb, breadcrumb simple, Instant Breadcrumbs.
2. Joomla
Модуль настраивается под каждую площадку. Оптимизатору необходимо указать:
3. Opencart
4. Webasyst
5. 1С Битрикс
6. Moguta
Как сниппет с хлебными крошками может повысить CTR
Часто хороший результат дают эмодзи. Чем ярче и заметней элементы, тем больше внимания аудитории. На ранжирование в поисковиках наличие смайлов никак не влияет.
Джон Мюллер, главный аналитик Гугл, прокомментировал использование эмодзи:
Рекомендуем тестировать сниппеты с эмодзи и без. Главное — не переборщить с количеством смайлов, чтобы ссылка не выглядела слишком несерьезно. Лучше использовать тематические эмодзи — сниппет будет смотреться органично и сработает в плюс конверсии.
Эмодзи и смайлы для микроразметки берутся из специальных каталогов. Но не все варианты корректно отобразятся на странице поисковой выдачи. Иногда значок или смайлик выглядит как монохромный символ, часто поисковик потом самостоятельно возвращает элемент в первоначальный вид. Такие изменения происходят внезапно.
Рекомендации, как улучшить микроразметку крошек на сайте
Главная страница не может ссылаться сама на себя. Это ухудшает ранжирование площадки.
Пользователь просматривает страницу сверху вниз: навигация, меню и баннер. Поэтому микроразметка должна зацепить взгляд человека.
Последним в хлебных крошках идет название текущей страницы. Жирный шрифт делает его заметнее.
Оптимизаторы использует для хлебных крошек эмодзи. В некоторых случаях наличие ярких элементов повышает конверсию. Но важно, чтобы эмодзи сочетались с общим стилем ресурса. Если это сайт юридической фирмы, то неуместно использовать смайлы, а вот цветные стрелки вполне подойдут.
Хлебные крошки хорошо смотрятся на странице и улучшают поведенческие факторы, но не играют ключевой роли для SEO. Если вы хотите полноценно оптимизировать сайт и вывести его на лучшие позиции в выдаче, узнайте больше о нашей услуге SEO-продвижение.
Для тех, кто сам разрабатывает шаблоны для любимой Joomla 3. Здесь я расскажу, как я изменила немного вид навигационной цепочки с помощью подключения стилей Bootstrap и изменения программного кода.
Вы создаёте свой шаблон, разработали его макет, позиции и прописали всё index.php в директории шаблона.
Для позиции навигационной последовательности ("Хлебные крошки", навигационный бар) в index.php Вы прописали соответствующий модуль. Обычно, навигационную последовательность называют Breadcrumbs.
По умолчанию на сайте это выглядит так:
А хочется чего-нибудь другого.
Далее делеаем переопределение для модуля breadcrumbs (Create Overrides в Joomla 3: что это и зачем?).
Подсоединяем файл стилей bootstrap.css в index.php (Bootstrap с чего начать)
В переопределённом файле templates/ВАШ_ШАБЛОН/html/mod_breadcrumbs/default.php вместо всего кода пишем
Смотрим что получилось
За разделитель отвечает следующая строка кода:
Поменяем её на следующий код
Теперь посмотрим что работает в настройках самого модуля
Не работает только Разделитель текста, так как мы его заложили в программном коде, всё остальное работает.
Мои выкладки - это просто мои исследования, вполне возможно, что есть и другие способы. Удачи.
Но как говорится не будем останавливаться на достигнутом. Во время поисков решения данного вопроса, случайно была найдена интересная статья в которой рассказано о более глубокой модернизации отображения строки breadcrumbs.
После перевода и правки – статья выглядит следующим образом:
Стилизация модуля Breadscrum - в Joomla 2_5
Один из элементов, который вы не можете стилизировать при проектировании с Artisteer для Joomla! - является модуль Breadcrumbs (горизонтальные стрелки, которые показывают вам, где вы находитесь на сайте . ).
Конечно, "хлебные крошки" отображаются в соответствии с выбранными установками, так что это не выглядит совсем уж плохо ..
- Но часто возникает необходимость в установке индивидуальных стилей. Это один из стандартных модулей Joomla!.
Наша цель заключается в изменении стилей модуля "Breadscrum" и придания ему большего индивидуального, соответствующего вида.
Давайте начнем .
Неудивительно, что оно выглядит одинаково не зависимо от шаблона! Это стандартная опция в панели управления. Прежде чем мы начнем менять код – давайте проверим, если у нас какие либо варианты без использования кодирования, в администрации области . возможностями, предоставляемыми Joomla! являются:
Будем откровенными - из здесь не много. Мы можем только изменить изображений по умолчанию сепаратор используя эквивалентный текст ("Text разделитель" поля).
Хорошо, давайте попробуем ввести там "->".
Мы сохраняем изменения и .
Ну разве - это перемены! - может сказать Оптимист. Действительно изменения внесены, но результаты не впечатляющие . Отмените изменения. У нас нет выбора - мы должны кодировать для себя .
Внутри кода .
Мы можем изменить код в двух местах:
- Мы можем изменить код стандартного модуля Joomla - Breadcrumbs!
- Или мы можем попытаться сделать изменения в области наших шаблонов.
Если мы выбираем первый вариант - изменения затронет весь Joomla!
- Не важно, какой шаблон установлен. Это не кажется, лучшим решением - мы должны стараться работать в рамках наших собственных шаблонов, насколько это возможно. Мы не повлияем на внешний вид других шаблонов . Кроме того, если мы изменим исходный код в Joomla! - Есть риск, что во время обновления, наша модификация будет заменена новым оригинальным файлом. Тогда мы должны будем сделать правку еще раз.
Внешним элементом является текст "Вы находитесь здесь". Он относится к классу "showHere".
Давайте сделаем эго "жирным" и запишем этот класс в наш файл:
.showHere
font-size: 12pt;
font-weight: bold;
>
Осталась последняя часть, чтобы решить проблему, c разделителем изображения. Это то, что мы должны сделать, к сожалению, модифицируя оригинальной Joomla! файлы. Помните, что наша цель это не влиять на другие шаблоны, поэтому мы не можем просто поменять картинку по умолчанию .
Давайте предположим, что название этой картины будет всегда "separator.jpg", и что эта картина будет храниться в "images" папке нашего шаблона. Моя картина выглядит следующим образом:
Отредактируйте файл / модули / mod_breadcrumbs / helper.php и посмотрите на
следующий фрагмент кода:
public static function setSeparator($custom = null)
$lang = JFactory::getLanguage();
// If a custom separator has not been provided we try to load a template
// specific one first, and if that is not present we load the default separator
if ($custom == null) if ($lang->isRTL()) $_separator = JHtml::_('image', 'system/arrow_rtl.jpg', NULL, NULL, true);
>
else $_separator = JHtml::_('image', 'system/arrow.jpg', NULL, NULL, true);
>
> else $_separator = htmlspecialchars($custom);
>
Это функция, которая возвращает изображение разделителя. Если Adminsitrator сайта набрал что-то в поле "Текст разделитель"(в административной области Joomla!) - Возвращает этот текст разделителя. В другом случае - он возвращает изображение по умолчанию. Измените эту функцию следующим образом:
public static function setSeparator($custom = null)
$lang = JFactory::getLanguage();
// If a custom separator has not been provided we try to load a template
// specific one first, and if that is not present we load the default separator
if ($custom == null) if ($lang->isRTL()) $_separator = JHtml::_('image', 'system/arrow_rtl.jpg', NULL, NULL, true);>
else $_separator = JHtml::_('image', 'system/arrow.jpg', NULL, NULL, true);
-------------------------------------------------------------------------------------------
/***** My modification *****/
//if a template contain file "breadcrumbsSeparator.jpg" then use it.
$getapps= & JFactory::getApplication();
$template = $getapps->getTemplate();
$ourSeparatorFile = JPATH_ROOT.DS.'templates'.DS. $template.DS.'images'.DS.'separator.jpg';
if (file_exists($ourSeparatorFile))
$app = JFactory::getApplication();
$templateDir = JURI::base() . 'templates/' . $app->getTemplate();
$_separator = ' ';
>
/***** End of my modification *****/
-----------------------------------------------------------------------------------------------------------
>
> else $_separator = htmlspecialchars($custom);
>
С помощью этой новой линии мы достигли следующих функций:
когда "текст разделитель" поле пустое - функция проверяет, является ли изображение "separator.jpg" существующим (в "images" папке текущего шаблона). Если это так - он показывает это изображение в качестве разделителя. Если нет (еще один шаблон без изображения) - он возвращает изображение по умолчанию. Поэтому мы уверены, мы не будем выглядеть плохо в любом другом шаблоне.
Заключение
По сути - мы изменили "Breadscrum" модуль и сделали его выглядящим следующим образом:
Окончательный эффект нашей работы, что также важно - наше решение является нейтральной для других шаблонов.
1) Поскольку хлебные крошки в Joomla являются модулем, в первую очередь нужно определиться с позицией, в которой этот модуль будет выводиться. В идеале, вам нужно подобрать позицию, которая находится непосредственно над статьей, хотя, в зависимости от дизайна и вкуса, вы можете выбрать и другую позицию.
После выбора позиции не забудьте отключить просмотр позиций модулей Joomla.
3) В настройках помимо названия модуля нужно указать:
После выполнения всех указанных действий, сохраняем модуль и любуемся на результат:
Читайте также: