Установка и настройка карты сайта для Blogger
Карта сайта - это страница, где собраны все публикации вашего блога в удобном списке. Она помогает читателям быстро находить нужные материалы, а также улучшает навигацию по ресурсу. В этой статье разберём, как установить карту сайта в Blogger, какие есть особенности и что можно дополнительно настроить.
Что такое карта сайта в Blogger
В Blogger карта сайта может быть реализована двумя способами:
- XML-карта сайта - технический файл для поисковых систем (например,
/sitemap.xml
), который нужен для индексации. - HTML-карта сайта - обычная страница блога со списком всех статей. Её удобно делать для людей: она облегчает навигацию и повышает юзабилити.
Сегодня мы рассмотрим именно HTML-карту сайта.
Создание страницы под карту сайта
- Зайдите в панель управления Blogger.
- Перейдите в раздел Страницы и нажмите Создать страницу.
- Назовите страницу, например, «Карта сайта» или «Все статьи».
- Сохраните черновик, но пока не публикуйте.
Вставка скрипта карты сайта
Чтобы карта сайта автоматически подгружала список статей, используем готовый 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. Публикация страницы
После вставки кода сохраните и опубликуйте страницу. В меню блога добавьте ссылку на неё, чтобы пользователи могли легко находить карту сайта.
Так должна выглядеть Карта сайта
Особенности и советы
- Карта сайта обновляется автоматически - новые посты будут появляться сами.
- Можно изменить количество помечаемых «новых» постов, заменив число
MARK_LAST = 3
на нужное. - При большом блоге скрипт подгружает записи порциями (по 150 штук).
- Для поисковых систем также полезно добавить XML-карту сайта по адресу
/sitemap.xml
в Google Search Console.
Итог
HTML-карта сайта в Blogger - простой и полезный инструмент. Она облегчает навигацию для читателей, делает блог более удобным и помогает выделять новые статьи. Всего за несколько шагов можно добавить на сайт полноценную страницу с автоматическим списком всех публикаций.
Комментарии
Отправить комментарий