Как в Blogger сделать индексируемые страницы с ярлыками

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

Касательно минуса, не так давно я опубликовал две статьи относительно ярлыков:

 Blogger ярлыки, что это и для чего нужно их использовать
 Почему не стоит добавлять виджет ярлыки

Рекомендую вам сперва ознакомиться с этими публикациями.

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

Самое интересное, что за все время никто так и не поднял вопрос по поводу того, как решить эту проблему, даже самые продвинутые зарубежные спецы (там blogspot пользуется значительно большим спросом).

Польза индексируемых разделов

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

Разбили мы посты по соответственным рубрикам, что дальше? Дальше наполняем сайт и ждем посещений. Естественно, что по запросу новостные шаблоны для blogger, пользователь должен попадать в раздел с новостными шаблонами, по запросу шаблоны визитки в раздел с шаблонами визитками. В нашем случае пользователь не найдет такие страницы нашего сайта в поисковике, потому что робот попросту не добавит их туда и причину этого вы уже знаете (они скрыты от индексации). А вот, если бы они были открыты для индексации тогда, трафик сайта мог бы быть в разы больше.

Особенности разделов

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

Кроме того, разделам, как и обычным страницам сайта можно задать мета тег description (описание поста) и сопровождающий контент (текст, картинки, видео, прочее). Все это способствует их продвижению в поисковых системах. Но в каждом движке это сделать достаточно трудно, нужны специальные плагины или редактировать все это через HTML редактор. Тогда, как мой вариант на blogger упрощает все это в разы.   

Blogger, как создать индексируемые разделы?

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

Создали? Замечательно, готовимся добавлять виджет. Собственно на поиски и редактирование подходящего виджета ушло не мало времени и усилий. Ведь для этого он должен не просто отображать посты по определенным ярлыкам, но и владеть функцией постраничной навигации или еще лучше Infinite scrolling, а таких игрушек не так и много. Кроме того, виджет будет способствовать лучшему взаимодействию блога с поисковыми роботами, потому как будет выполнятся функция карты сайта. Демо вариант можете посмотреть на странице Виджеты и гаджеты для Blogger

Установка виджета.

Откройте раздел Тема - Изменить HTML в самом конце кода перед тегом </body> вставьте код:



<style type="text/css">
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container {list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:!important}
}
.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important;}
</style>

<script type='text/javascript'>
//<![CDATA[
//Script Recent Pos By Label
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"https://"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Дальше &#9660;",resetToc:"Больше постов нет",noImage:"https://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>:Загрузка...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Всего постов: "+n.feed.openSearch$totalResults.$t+" </div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>

Если у вас все еще http протокол, тогда в строке выделенной красным: https, удалите букву s.

Сохраните шаблон.

Теперь в разделе Страницы откройте любую из ваших созданных страниц, перейдите на вкладку HTML и в любом месте вставьте код:

<div id="result-desc">
</div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javaScript">
  var label="Шаблоны";
</script>



Ярлык Шаблоны замените на свой ярлык. Обновите страницу.

Видео по теме:

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

Z193872664124
R827561760916


 Если туго с деньгами, подписывайтесь на сайт. Будет еще много полезного материала.



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

28 Коммент.

Оставить комментарий
avatar
Vitino. info
июня 28, 2017

Спасибо! Клевая и полезная статья!

Ответить
avatar
BlogSK
ноября 23, 2017

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

Ответить
avatar
Марк Корвин
ноября 23, 2017

Что-то вроде этого. Получается индексируемый раздел (страница) ярлык просто играет вспомогательную роль, так, как благодаря ему срабатывает виджет с сообщениями. Но можно обойтись и без этого виджета, просто создать страницу с нужным заголовком по соответствующему ярлыку например "Первые блюда" добавить нужный текст, картинки и самое главное добавить ссылку (можно кнопку с ссылкой, чтобы было более приметно) которая ведет на страницу с сообщениями по этому ярлыку, например "смотреть посты с первыми блюдами". Все, таким образом вы создаете раздел, который индексируется в поисковых системах. Надеюсь более менее понятно изложил суть)

Ответить
avatar
ІБВ Херсонська ЦБС
января 12, 2018

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

Ответить
avatar
Марк Корвин
января 12, 2018

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

Ответить
avatar
travel
марта 31, 2018

Какова причина появления непонятного изображения на главной странице во всех миниатюрах??? Эта же штука появляется и в каждом открытом сообщении - картинок в сообщении много. На созданной странице - ок, никаких претензий. вот ссылка на мой блог, пока я не убила код https://100500travel.blogspot.in/

Ответить
avatar
Марк Корвин
апреля 01, 2018

Добавьте перед началом первого кода:
<b:if cond='data:blog.pageType != &quot;index&quot;'>

а после него:
</b:if>

Ответить
avatar
travel
апреля 01, 2018

Да, ок, все сделала - с первой страницы ушло)) Однако осталось в каждом открытом сообщении, кроме центрального, которое выводит отдельный виджет. Код пока не убила))

Ответить
avatar
Марк Корвин
апреля 01, 2018

Перейдите по ссылке goo.gl/BLsXXy на картинке отметил ссылку, которую нужно удалить.

Ответить
avatar
travel
апреля 01, 2018

Большое спасибо, все вроде заработало)) Реально виджет крутой и ооооочень полезный)))

Ответить
avatar
Кузнецова Алена
апреля 07, 2018

Подскажите, пожалуйста, после вставки кода и созданию сообщений с ярлыками все заработало.
Но на тех страницах, на которых еще нет сообщений с данным ярлыком, появилась картинка "загрузки" (прямоугольник с движущимися наклонными полосами).
При добавлении на страницу хотя бы одного сообщения это пропадает - так что не страшно.
НО. При переходе на сообщение в нем тоже появляется эта "загрузка". С чем это может быть связано, и как можно убрать?
Спасибо

Ответить
avatar
Кузнецова Алена
апреля 07, 2018

при переходе на сообщение это пропало.
Но осталось на Главной странице

Ответить
avatar
Марк Корвин
апреля 08, 2018

Перейдите по ссылке goo.gl/BLsXXy на картинке отметил ссылку, которую нужно удалить.

Ответить
avatar
Свеmлана
июля 15, 2018

У меня не получилось ничего. Создала страницу, вставила скрипт Ваш. Далее написала на этой странице сообщение, но никаких превью постов нет(( Видимо я что-то не поняла((( ссылка https://goo.gl/gK9gji

Ответить
avatar
Марк Корвин
июля 15, 2018

Нужно подключить библиотеки jquery - https://www.shablonu-dlya-blogger.ru/2017/07/blogger-ustanovit-vidzhet-sledujushhee-predydushhee-s-miniatjurami.html - смотрите 1 пункт.

Ответить
avatar
Svetlana Malyshevskaya
января 23, 2019

Ребята,огромное спасибо! Всё получилось, даже с «картинка типа радуги»!!!

Ответить
avatar
Татьяна Рязанцева
апреля 08, 2019

Марк, здравствуйте! Статья хорошая, спасибо. Только вот незадача: не могу в режиме html найти в конце кода найти тег bodу?:-((( Все, что угодно, только не этот тег. Что посоветуете?

Ответить
avatar
Mark Korvin
апреля 09, 2019

Здравствуйте. Попробуйте нажать клавиши CTRL+F в появившемся окне вставить тег </body> и нажать Enter? https://utka.su/2aEI8
В некоторых шаблонах тег </body> выглядит следующим образом: https://utka.su/yz6Ri
Он точно должен быть, поскольку блог без этого тега не может функционировать.

Ответить
avatar
Татьяна Рязанцева
апреля 09, 2019

Добрый день, Марк! Спасибо за такую мобильную реакцию и ответ - даже не ожидала:-) Нашла я этот тег, он был приблизительно посредине кода. Вставила ваш код и получила такую картинку: https://drive.google.com/open?id=1ebCTe7IK8-sKiE8KGHv36z1eyXT0_785
Т.е сообщения по ярлыку все равно не появились. Скажите, может это быть связано с темой? Хотя я взяла классическую, "Корпорация чудеса". Может она творить такие чудеса, или проблема в чем-то другом? Буду благодарна за комментарий:-)

Ответить
avatar
Mark Korvin
апреля 09, 2019

Хм...попробуйте подключить библиотеки jquery - https://www.shablonu-dlya-blogger.ru/2017/07/blogger-ustanovit-vidzhet-sledujushhee-predydushhee-s-miniatjurami.html - смотрите 1 пункт.

Ответить
avatar
Татьяна Рязанцева
апреля 09, 2019

Насколько я поняла, то подключение библиотеки автоматически вставит виджет Следущее-предыдущее с миниатюрами, а мне как бы не актуально. Ладно, я попробую еще позжее поиграться с кодами. Хотя у меня и шрифты как-то странно себя ведут: в редактировании - большие, а при публикации - диаметрально маленькие. В общем, ежели не разберусь - постучусь за платной помощью:-)

Ответить
avatar
Mark Korvin
апреля 09, 2019

😃 Для того, чтобы срабатывал виджет предыдущее-следующее нужно добавить его код, а вам нужно добавить только библиотеки. Библиотеки jquery необходимы для активации некоторых скриптов, которые без этих самых библиотек не могут полноценно функционировать, это относится и к виджету, который вы пытаетесь установить. Изначально библиотеки jquery не установлены в стандартные темы Blogger. Обращайтесь.

Ответить
avatar
Татьяна Рязанцева
апреля 10, 2019

Марк, здравствуйте еще раз:-) Поискала на других источниках про установку этой библиотеки и потом поняла, что п.1 относится именно к установке этой библиотеки. В статье идет речь об установке виджета, "чайники" так буквально это и понимают. Мож, просто добавить туда уточнение, что именно код в п.1 добавляет. Кстати, в других источниках этот же код библиотеки в конце имеет закрывающий тег скрипт, у Вас немножко по-другому, это влияет на результат? В общем, что получилось: вернулась к резервной копии и переустановила библиотеки и код по новой. В результате список из сообщений по ярлыку появился!:-)) Но! На остальных статичных страницах маячит та же волшебная палочка с полосками, прям посредине страниц. Вот ссылка, пока не убирала тестовый вариант, гляньте: https://razvivalkina.blogspot.com
Скажите, с Вордпресс та же возня, даже если на готовом конструкторе делать, или поадаптивнее для "чайников" будет?

Ответить
avatar
Mark Korvin
апреля 11, 2019

Здравствуйте. Уберите из скрипта ссылку выделенную на скриншоте - goo.gl/BLsXXy
На WordPress будет в несколько раз сложнее, хотя у них с Blogger немного схожие панели управления. Человеку познавшему Blogger будет немного легче в ознакомлении с WP.

Ответить
avatar
Татьяна Рязанцева
апреля 11, 2019

Убрала - заработало хорошо!:-) Спасибо. Осталась проблемка с поплывшими картинками(они стали не пропорциональными) на миниатюрах постов по одному ярлыку. Там надо задавать определенное разрешение?

Ответить
avatar
Mark Korvin
апреля 11, 2019

Попробуйте в конце этой строки:
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
Дописать перед закрывающей скобкой значение:
object-fit:cover;
Сохраните тему.

Ответить
avatar
Татьяна Рязанцева
апреля 12, 2019

Дописала - помогло наполовину:-) Картинки стали симметричными, но верх по головам урезался:-( Размер картинок уменьшила до минимума. Я пока тестирую - не убирала, посмотрите на моем блоге. Если по-другому не получится, то я нашла еще один метод, реализовала его на другой странице, но с тем же ярлыком - получается плиточка из публикаций.Симпатично.Но ваш метод тоже хорош, как вариант. Только с картинками бы еще подладить.
Марк, хотела Вас еще раз поблагодарить за библиотеки jquery. Благодаря их установке я наконец-то могу нормально работать с шрифтами - из-за них я когда-то забросила этот блог.А теперь вот благодаря вашей помощи - второй шанс, так сказать:-))

Ответить
avatar
Mark Korvin
апреля 13, 2019

В скрипте есть значения thumbWidth:140,thumbHeight:95
Попробуйте их настроить под свои картинки. 140 это ширина, 90 высота картинки. Сперва удалите Object-fit:cover который дописывали ранее. Рад, что хоть чем-то помог)

Ответить