Как создать карту сайта на Blogger для людей.

Карта сайта на Blogger для людей. Теория.

Задумывались когда-нибудь, почему в огромных гипермаркетах мы не блуждаем часами в поисках пачки соли? Везде указатели: (Бакалея), (Молочные продукты), (Бытовая химия). А на входе часто висит план всего магазина. Все для того чтоб мы покупатели не психовали и не ушли к конкурентам. А теперь зайдите мысленно на свой сайт, в котором уже полсотни статей. Или сотня. Как там себя чувствует новый посетитель? Он как в лесу без тропинок. Он видит пару свежих постов на главной, может глянет на облако тегов… и всё. Шанс что он найдет ту самую гениальную вашу статью двухлетней давности, стремится к нулю. Он просто не знает о её существовании. И вот тут-то и нужна карта. Не для роботов, нет. Для живых людей. А как создать такую карту на Блогспот мы сейчас разберемся.

Сразу разграничим понятия. Существует карта сайта для поисковиков, тот самый файл sitemap.xml. Это технический документ, инструкция для Гугла и Яндекса: "Эй робот вот список всех моих разделов иди и проиндексируй их". В Blogger, он создается автоматом. Но мы сегодня говорим не про него. Мы говорим про карту сайта для человека. Это обычная созданная страница на вашем сайте, такое оглавление, где аккуратным списком собраны линки на все-все ваши публикации. Понимаешь это жест уважения к читателю. Вы как бы говорите ему: "Дружище я ценю твое время для тебя создал карту сайта. Вот, смотри, всё что я написал, разложено по полочкам. Выбирай что интересно".

Такая страница решает сразу несколько проблем. Во-первых, она кардинально улучшает навигацию. Человек попавший на блог из поиска по конкретному запросу, может заинтересоваться и другими темами. Куда ему идти? Листать архивы по месяцам? Неудобно. Кликать по меткам? Тоже вариант, но метки дробят контент а созданная карта сайта формирует целостную картину. Он заходит на вашу (Карту сайта) и видит всё богатство выбора. Это напрямую влияет на поведенческие факторы. Человек проводит больше времени на сайте, смотрит больше материалов. А это уже сигнал для тех самых поисковиков: "Тут интересно надо бы этот сайт в поиске повыше поднять". Создаём для людей а роботы тоже радуются. Идеально.

Когда-то давно еще на заре интернета (Карта сайта) существовала практически на каждом уважающем себя ресурсе. Потом с развитием поисковых систем о ней как-то подзабыли. Зачем если Гугл всё найдет? А зря. Поисковик приведет пользователя на одну запись. Ваша задача сделать чтоб он не ушел с нее сразу же. Надо его зацепить, показать что у вас тут целый мир а не одинокий пост. И созданная карта сайта лучший инструмент для этого. Это как меню в хорошем ресторане. Вы же не хотите чтоб гость заказал только стакан воды и ушел? Вы даете ему красивую папку, где расписаны все блюда от закусок до десертов.

Ну ладно с теорией думаю понятно. Переходим к практике. Как же создать это чудо на нашем многострадальном Blogger? Перед тобой два выбора: путь самурая и путь хитрого мастера.

Путь самурая это делать всё руками. Открываешь блокнот и начинаешь методично копировать название каждого своего сообщения и вставлять на него ссылку. Если у вас 10-15 постов это еще куда ни шло. За полчаса управитесь. А если их 150? Или 500? Это же адский труд. Написал новый текст иди на карту сайта размести ссылку. Забыл, карта уже неактуальна. Честно? Гиблое дело. Я делал один раз для клиентского сайта лет пятнадцать назад. Проклял всё на свете. Больше никогда.

Поэтому мы пойдем путем хитрого мастера. Мы заставим Blogger делать всю грязную работу за нас. С помощью небольшого но очень полезного скрипта. Не пугайтесь слова (скрипт). Вам не нужно обладать навыками программиста чтобы его использовать. Нужно просто скопировать готовый код и вставить в нужное место. Этот код как маленький трудолюбивый гномик сам пробежится по вашему сайту соберет все заголовки и линки и выведет их красивым списком. И он будет делать это автоматически. Опубликовали новый контент он тут же появится на карте сайта. Без вашего участия.

---

Пошаговая инструкция Как создать карту сайта на Блогспот (Blogger). Прям проще некуда.

Сначала идем в панель управления Blogger. Слева в меню находим пункт (Страницы) и нажимаем (Создать страницу). Не (Сообщение), а именно (Страницу)! Это статичная публикация которая не попадает в общую ленту. То что нам и нужно.

Откроется редактор. Дайте заголовок. Что-то простое. (Карта сайта), (Оглавление), (Архив публикаций). Мне лично нравится (Все статьи блога). Звучит солидно.

Теперь самый ответственный момент. В левом верхнем углу редактора расположена иконка карандаша. Нажмите на нее и выберите режим (HTML). Не (Режим верстки), а именно (HTML). Весь текст который там по умолчанию смело стирайте. У вас должно остаться чистое белое поле.

Вот в это чистое поле и создадим карту сайта на Blogger всё что нужно вставить (мой-ваш=наш 😂) волшебный код. Я дам вам один из самых простых и рабочих вариантов. Просто копируйте всё, что находится ниже:

<style type="text/css">
#toc-container {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  /* Добавлено для корректной работы скрытия */
  display: block; 
}
#toc-container ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 15px; /* Добавлен отступ снизу */
}
#toc-container ul li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
#toc-container ul li:before {
  content: '\2713'; /* Галочка */
  position: absolute;
  left: 0;
  color: #008000; /* Зеленый цвет */
}
.toc-loading {
  font-size: 1.2em;
  color: #666;
  text-align: center;
}
.toc-link {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.toc-link:hover {
  color: #0056b3;
}
/* Стили для копирайта */
.toc-copyright {
  text-align: right;
  font-size: 8px;
  color: #888;
}
.toc-copyright a {
  color: #555;
  text-decoration: none;
}
.toc-copyright a:hover {
  text-decoration: underline;
}
</style>

<div id="toc-container">
  <p class="toc-loading">Загрузка статей, подождите немного...</p>
</div>

<script type="text/javascript">
//<![CDATA[
function generateTableOfContents(json) {
  var tocContainer = document.getElementById('toc-container');
  if (!tocContainer) return;

  var list = document.createElement('ul');
  var entries = json.feed.entry;

  if (!entries) {
    tocContainer.innerHTML = 'Статей пока нет. Но скоро будут!';
    return;
  }

  // Сортировка статей по алфавиту
  entries.sort(function(a, b) {
    return a.title.$t.localeCompare(b.title.$t);
  });

  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var link = '';

    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == 'alternate') {
        link = entry.link[j].href;
        break;
      }
    }

    var listItem = document.createElement('li');
    var anchor = document.createElement('a');
    anchor.href = link;
    anchor.className = 'toc-link';
    anchor.appendChild(document.createTextNode(title));
    listItem.appendChild(anchor);
    list.appendChild(listItem);
  }

  tocContainer.innerHTML = ''; // Очищаем сообщение о загрузке
  tocContainer.appendChild(list);


  var copyrightDiv = document.createElement('div');
  copyrightDiv.className = 'toc-copyright';
  // ВАЖНО: У ссылки есть id="bpsitemap" для проверки
  copyrightDiv.innerHTML = 'Карта сайта от <a id="bpsitemap" href="https://www.bloggers-put.com/" target="_blank" rel="noopener">Bloggers Put</a>';
  tocContainer.appendChild(copyrightDiv);

  
  setTimeout(function() {
    var creditLink = document.getElementById('bpsitemap');
    
    if (!creditLink || creditLink.href !== 'https://www.bloggers-put.com/') {
      tocContainer.style.display = 'none';
    }
  }, 100);

}
//]]>
</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=999&callback=generateTableOfContents" type="text/javascript"></script>

Скопировали? Вставили. Что тут происходит? Первая часть, в тегах style, это просто украшательство. Рамочка, фон, симпатичные галочки перед каждой строкой. Можете потом поиграться с цветами, если захотите. Вторая часть это сам скрипт. Он обращается к вашему же блогу, запрашивает у него список всех постов (вот эта строчка src="/feeds/posts/default... как раз это и делает), а потом функция generateTableOfContents красиво выводит их в виде списка, отсортированного по алфавиту. Обратите внимание на max-results=999. Это говорит нам, что скрипт выведет до 999 постов. Если у вас блог-тысячник, увеличьте это число. Хотя по-моему, 999 хватит почти всем.

После того как вставили код, можете справа в настройках отключить комментарии. Они там ни к чему. И всё. Нажимайте кнопку (Опубликовать).

Готово? Почти. Ее нужно (вывести в люди 😂). Нужно разместить на нее ссылку на видном месте. Самые очевидные варианты это верхнее меню навигации (если оно у вас имеется в шаблоне) и футер (подвал сайта). Я всегда рекомендую вставлять в оба места.

Чтобы добавить в меню, идем в (Дизайн) ▶ (Макет). Ищите там блок который отвечает за меню (может называться (Pages), (Cross-Column) или как-то похоже, в моём случае (Header-menu)).

Нажимаете (Изменить), (Добавить новый элемент), вставляете название, например (Карта сайта) и ее URL-адрес. То же самое с футером. Обычно там есть гаджет (Ссылки). размещайте туда вашу новую карту сайта. Всё. Теперь любой посетитель вашего сайта сможет в один клик попасть в оглавление. Миссия выполнена.

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

А теперь небольшое отступление. Помните, я говорил про два типа карт? Для людей и для роботов. Сейчас немного про роботов. Чисто для общего развития. Ваш sitemap.xml лежит по адресу ваш-блог.blogspot.com/sitemap.xml. Он генерируется автоматически и включает в себя последние 150 измененных публикаций. Если постов больше то у него появляются (филиалы), вроде sitemap.xml?page=2 и так далее. Обычно вам туда лезть не нужно. Но если очень хочется убедиться что Гугл о вас знает, зайдите в Google Search Console, найдите раздел Файлы Sitemap, вставьте туда sitemap.xml и нажмите (Отправить). Консоль покажет, видит ли она ваши публикации. В 99% случаев там все будет в порядке без вашего участия. Просто знайте что это существует но не забивайте себе голову. Потратьте это время на написание нового материала, который потом появится на вашей карте сайта для людей.

✅ В этой статье Sitemap для Blogger более подробно описал что такое sitemap.xml. Читать!

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

---

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

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

💬 Друзья я буду очень благодарен если вы оставите отзыв 👍 и поделитесь этим материалом в социальных сетях. 😤 Остались вопросы задай в комментариях.

---

Николай - (LeV)

Опубликовано: 13 апреля 2025
Обновлено: 22 августа 2025
Обновлено: 12 октября 2025