Установка и настройка карты сайта для Blogger

Карта сайта для Blogger

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

Что такое карта сайта в Blogger

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

  • XML-карта сайта - технический файл для поисковых систем (например, /sitemap.xml), который нужен для индексации.
  • HTML-карта сайта - обычная страница блога со списком всех статей. Её удобно делать для людей: она облегчает навигацию и повышает юзабилити.

Сегодня мы рассмотрим именно HTML-карту сайта.

Создание страницы под карту сайта

  1. Зайдите в панель управления Blogger.
  2. Перейдите в раздел Страницы и нажмите Создать страницу.
  3. Назовите страницу, например, «Карта сайта» или «Все статьи».
  4. Сохраните черновик, но пока не публикуйте.

Вставка скрипта карты сайта

Чтобы карта сайта автоматически подгружала список статей, используем готовый JavaScript-код. Он получает список постов из фида Blogger и выводит их в виде списка.

Пример скрипта:


<div id="sitemap"><em>Загружаю…</em></div>

<script>
(function () {
  var TITLE = "Список всех статей блога";
  var PER_PAGE = 150;
  var MARK_LAST = 3;

  var siteUrl = location.protocol + '//' + location.host;
  var allEntries = [];
  var startIndex = 1;

  function addJsonp(src) {
    var s = document.createElement('script');
    s.src = src;
    document.body.appendChild(s);
  }

  function esc(s){
    return String(s || '').replace(/[&<>\"]/g, function(c){
      return ({'&':'&','<':'<','>':'>','"':'"'}[c]);
    });
  }

  function getAltLink(entry){
    if (!entry || !entry.link) return '';
    for (var i=0; i<entry.link.length; i++){
      var L = entry.link[i];
      if (L.rel === 'alternate') return L.href || '';
    }
    return '';
  }

  window.__sitemapBatch = function (json) {
    var entries = (json && json.feed && json.feed.entry) ? json.feed.entry : [];
    allEntries = allEntries.concat(entries);

    var total = 0;
    if (json && json.feed && json.feed.openSearch$totalResults && json.feed.openSearch$totalResults.$t) {
      total = parseInt(json.feed.openSearch$totalResults.$t, 10) || 0;
    } else {
      total = allEntries.length;
    }

    if (startIndex + PER_PAGE <= total) {
      startIndex += PER_PAGE;
      addJsonp(siteUrl + '/feeds/posts/default?alt=json-in-script'
        + '&max-results=' + PER_PAGE
        + '&start-index=' + startIndex
        + '&callback=__sitemapBatch');
    } else {
      render();
    }
  };

  function render() {
    var items = [];
    for (var i=0; i<allEntries.length; i++){
      var e = allEntries[i] || {};
      var title = (e.title && e.title.$t) ? e.title.$t : '(без названия)';
      var href  = getAltLink(e);
      var pub   = (e.published && e.published.$t) ? new Date(e.published.$t).getTime() : 0;
      if (href) items.push({title:title, href:href, pub:pub});
    }

    items.sort(function(a,b){ return b.pub - a.pub; });

    var out = ['<h3>' + esc(TITLE) + '</h3><ul>'];
    for (var k=0; k<items.length; k++){
      var it = items[k];
      var line = '<li><a href="' + it.href + '">' + esc(it.title) + '</a>';
      if (k < MARK_LAST) line += ' <span style="color:red;font-weight:bold;">New</span>';
      line += '</li>';
      out.push(line);
    }
    out.push('</ul>');

    var box = document.getElementById('sitemap');
    if (box) box.innerHTML = out.join('');
  }

  addJsonp(siteUrl + '/feeds/posts/default?alt=json-in-script'
    + '&max-results=' + PER_PAGE
    + '&start-index=1'
    + '&callback=__sitemapBatch');
})();
</script>

Этот скрипт автоматически загрузит все публикации и выведет их списком. Три последних статьи будут помечены красным словом New.

Шаг 3. Публикация страницы

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

Так должна выглядеть Карта сайта

Карта сайта Blogger

Особенности и советы

  • Карта сайта обновляется автоматически - новые посты будут появляться сами.
  • Можно изменить количество помечаемых «новых» постов, заменив число MARK_LAST = 3 на нужное.
  • При большом блоге скрипт подгружает записи порциями (по 150 штук).
  • Для поисковых систем также полезно добавить XML-карту сайта по адресу /sitemap.xml в Google Search Console.

Итог

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

Комментарии