Как сделать уникальные метатеги и сниппеты для каждого поста в Blogger?

SEO-оптимизированые мета-теги для blogger и их значение

Доброго времени, блогеры и вебмастера!
Сегодня я поделюсь с вами своей наработкой в области оптимизации блога Blogspot с помощью мета тегов.

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

Где проверить ваш сайт на внешний вид сниппетов

Не самая главная часть этот статьи, однако не менее важная.
  • Шаринг дебаггер для Facebook - https://developers.facebook.com/tools/debug/
  • Валидатор карточек от Twitter - https://cards-dev.twitter.com/validator
  • Сервис Iframely, который объединяет Open Graph и Twitter Cards и показывает как "видит" соц. сеть ваши метатеги.
  • Тестирование структуированных данных от Google - https://developers.google.com/structured-data/testing-tool/
  • Для Вконтакте подобных инструментов нет. Однако есть выход с положения. Вставьте в адресную строку адрес https://vk.com/share.php?url=ваш_урл и вместо ваш_урл - вставьте нужный вам URL.

Сниппет для соц сети Вконтакте
Так выглядит хороший сниппет для Вконтакте

Как добавить метатеги в Blogger

Итак, начнем с того, что Вы уже знаете как и где добавлять метатеги на блог Blogspot. А кто не помнит или забыл, то напоминаю как это делаеться. Заходим в Панель упралвение блогами и выбираем нужный блог. Затем в левом боковом меню выбираете раздел Шаблон и Изменить HTML.

Все изминения будем делать в теге <head>. Готовы?

SEO и SMO оптимизированные мета теги для блога

Почти три года назад, я написал заметку «Мета-теги описания и ключевых слов для каждого сообщение на Blogger.com», в которой рассказывал как улучшить метатеги по умолчанию и добавить новые. Можно считать, что материал, который Вы сейчас читаете - сиквел того поста.

Чтобы было наглядней, что именно изменилось у меня в шаблоне - представляю Вам код мета тегов, который был у меня ранее:

<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='Igor Petrenko' name='author'/>
<meta content='(c) Igor Petrenko' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='all' name='robots'/>
<b:include data='blog' name='all-head-content'/>
<meta content='ru_RU' property='og:locale'/>
<meta content='article' property='og:type'/>
<meta content='IPetrenko.ru' property='og:site_name'/>
<meta content='SEO' property='article:section'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@Igor_Petrenko' name='twitter:site'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        IPetrenko.ru - новости блогосферы и блоггинга, раскрутка и настройка блога на Blogger, а также красивые шаблоны Blogspot
      </title>
      <meta content='Всё для Blogger: полезные статьи про блоггинг и блогосферу, виджеты для Blogspot, SEO и SMM, о раскрутке и продвижение блога, бесплатные шаблоны и темы для Blogger ' property='og:description'/>
      <meta content='Всё для Blogger: полезные статьи про блоггинг и блогосферу, виджеты для Blogspot, SEO и SMM, раскрутке и продвижение блога, бесплатные шаблоны и темы для Blogger  ' name='description'/>
      <meta content='Виджеты, Blogger, полезные статьи, HTML, CSS, Google, SEO, Яндекс, домен, хостинг, бесплатные шаблоны Blogger, blogger templates' name='keywords'/>
      <meta content='IPetrenko.ru - новости блогосферы и блоггинга, раскрутке и настройка блога на Blogger, а также красивые шаблоны Blogspot' property='og:title'/>
      <meta content='http://3.bp.blogspot.com/--JBsZCXnJFQ/VKguEG8LYCI/AAAAAAAAI7s/YO5BOQ8N6NU/s1600/big-logo-ipetrenko.png' property='og:image'/>
      <b:else/>
      <title>
        <data:blog.pageName/>
        | 
        <data:blog.title/>
      </title>
      <meta expr:content='data:blog.metaDescription' name='description'/>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      <meta expr:content='data:blog.pageName + &quot;,&quot;' name='keywords'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
      <meta content='summary_large_image' name='twitter:card'/>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:else/>
      <meta content='summary' name='twitter:card'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
      </b:if>
    </b:if>
    </b:if>
    <meta content='nnY7T5Timg7pJ6ox' name='mailru-domain'/>
    <meta content='25ACB51BE84A3D2C588E9BBE8B0AB8B4' name='msvalidate.01'/>
    <meta content='380067dd1197b2b7' name='wmail-verification'/>
    <meta content='653f3d4638597cde' name='yandex-verification'/>
    <meta content='100002773112061' property='fb:page_id'/>
    <meta content='22def4239b474077c9e24330f7fe426b' name='p:domain_verify'/>
    <meta content='709585222505266' property='fb:app_id'/>

Даже на первый взгляд выглядит всё запутано и непонятно, но вполне работоспосбно. Но меня не устраивало, что на некоторых страницах (архив, страница записей определенного ярлыка и тд.) сайта не было описания и уникального заголовка.

И теперь внимание. После моих улучшений, наработок и оптимизации кода получился такой результат:

<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='index, follow' name='robots'/>
<meta content='all' name='robots'/>
<b:include data='blog' name='all-head-content'/>
<meta content='ru_RU' property='og:locale'/>
<meta content='article' property='og:type'/>
<meta content='IPetrenko.ru' property='og:site_name'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Метатеги на странице поста-->
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
            <b:if cond='data:blog.postImageUrl'>
                <meta content='summary_large_image' name='twitter:card'/>
                 <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
            <b:else/>
                  <meta content='summary' name='twitter:card'/>
              <b:if cond='data:blog.postImageThumbnailUrl'>
                   <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
                </b:if>
            </b:if>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
            <b:if cond='data:blog.postImageUrl'>
                <meta content='summary_large_image' name='twitter:card'/>
                 <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
            <b:else/>
                  <meta content='summary' name='twitter:card'/>
              <b:if cond='data:blog.postImageThumbnailUrl'>
                   <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
                </b:if>
            </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!-- Метатеги на странице 404-->
 <title>404 - К сожалению, такой страницы нету... </title>
<meta content='404- Здесь ничего нету...' itemprop='headline' name='twitter:title' property='og:title'/>
<meta content='Здесь ничего нету...' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>

            
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Метатеги на странице архива-->
 <title> Архив записей с <data:blog.pageName/></title>
<meta expr:content='&quot;Все материалы с &quot; + data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot;Каталог статьей с &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>

<b:if cond='data:blog.searchQuery'>
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot;Релевантные результаты поиска для &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
<meta content='http://3.bp.blogspot.com/--JBsZCXnJFQ/VKguEG8LYCI/AAAAAAAAI7s/YO5BOQ8N6NU/s1600/big-logo-ipetrenko.png' property='og:image'/>
</b:if>

<b:if cond='data:blog.searchLabel'>
     <title><data:blog.pageName/> - все материалы по теме</title>
<meta expr:content='data:blog.pageName + &quot; - все статьи &quot;' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot; Архив записей в категории &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
<meta content='http://3.bp.blogspot.com/--JBsZCXnJFQ/VKguEG8LYCI/AAAAAAAAI7s/YO5BOQ8N6NU/s1600/big-logo-ipetrenko.png' name='twitter:image' property='og:image'/>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Метатеги на главной странице-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title>IPetrenko.ru - новости блогосферы, секреты блоггинга, настройка блога на Blogger</title>
<meta content='Всё для Blogger: полезные статьи про блоггинг и блогосферу, виджеты для Blogspot, SEO и SMM, раскрутке и продвижение блога, бесплатные шаблоны и темы для Blogger' name='twitter:description' property='og:description'/>
<meta content='IPetrenko.ru - новости блогосферы, секреты блоггинга, настройка блога на Blogger ' itemprop='headline' name='twitter:title' property='og:title'/>
<meta content='Виджеты, Blogger, полезные статьи, HTML, CSS, Google, SEO, Яндекс, домен, хостинг, бесплатные шаблоны Blogger, blogger templates' name='keywords'/>
</b:if>
</b:if>

    <meta content='Игорь Петренко' name='author'/>
    <meta content='(c) Igor Petrenko' name='copyright'/>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@ip_blogger' name='twitter:site'/>
    <meta content='nnY7T5Timg7pJ6ox' name='mailru-domain'/>
    <meta content='@Igor_Petrenko' name='twitter:creator'/>
    <meta content='25ACB51BE84A3D2C588E9BBE8B0AB8B4' name='msvalidate.01'/>
    <meta content='380067dd1197b2b7' name='wmail-verification'/>
    <meta content='653f3d4638597cde' name='yandex-verification'/>
    <meta content='22def4239b474077c9e24330f7fe426b' name='p:domain_verify'/>
    <meta content='709585222505266' property='fb:page_id'/>
    <meta content='709585222505266' property='fb:app_id'/>

Сейчас многие из вас подумают: «Ты вообще о чем? Где ты тут оптимизацию нашел?». Огорчу вас, ибо Вы попутали оптимизацию и минимазцию. Однако позже станет ясно, что количество кода уменьшилось, благодаря тегам b:if и b:else, которые используются для отображения конкретного содержания в указанных случаях.

А теперь более подробно разберем каждую часть SEO-оптимизированого, но огромного кода.

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

<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='index, follow' name='robots'/>
<meta content='all' name='robots'/>
<b:include data='blog' name='all-head-content'/>
<meta content='ru_RU' property='og:locale'/>
<meta content='article' property='og:type'/>
<meta content='IPetrenko.ru' property='og:site_name'/>

Особое внимание нужно обратить на то, чтобы у вас обязательно был в коде подключаемый сегмент all-head-content. Его код выглядит так:

<b:include data='blog' name='all-head-content'/> 

Всего одна строчка иницирует вывод многих важных дефолтных метатегов. Например, на странице сообщения 3 проверенных способа вставки музыки на свой сайт, я получил вооот такой код:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { (function(){function c(a){this.t={};this.tick=function(a,c,b){var d=void 0!=b?b:(new Date).getTime();this.t[a]=[d,c];if(void 0==b)try{window.console.timeStamp("CSI/"+a)}catch(e){}};this.tick("start",null,a)}var a;window.performance&&(a=window.performance.timing);var h=a?new c(a.responseStart):new c;window.jstiming={Timer:c,load:h};if(a){var b=a.navigationStart,e=a.responseStart;0<b&&e>=b&&(window.jstiming.srt=e-b)}if(a){var d=window.jstiming.load;0<b&&e>=b&&(d.tick("_wtsrt",void 0,b),d.tick("wtsrt_",
"_wtsrt",e),d.tick("tbsd_","wtsrt_"))}try{a=null,window.chrome&&window.chrome.csi&&(a=Math.floor(window.chrome.csi().pageT),d&&0<b&&(d.tick("_tbnd",void 0,window.chrome.csi().startE),d.tick("tbnd_","_tbnd",b))),null==a&&window.gtbExternal&&(a=window.gtbExternal.pageT()),null==a&&window.external&&(a=window.external.pageT,d&&0<b&&(d.tick("_tbnd",void 0,window.external.startE),d.tick("tbnd_","_tbnd",b))),a&&(window.jstiming.pt=a)}catch(k){}})();window.tickAboveFold=function(c){var a=0;if(c.offsetParent){do a+=c.offsetTop;while(c=c.offsetParent)}c=a;750>=c&&window.jstiming.load.tick("aft")};var f=!1;function g(){f||(f=!0,window.jstiming.load.tick("firstScrollTime"))}window.addEventListener?window.addEventListener("scroll",g,!1):window.attachEvent("onscroll",g);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='http://www.ipetrenko.ru/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://www.ipetrenko.ru/2016/04/insert-music-into-blogger.html' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="IPetrenko.ru - Atom" href="http://www.ipetrenko.ru/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="IPetrenko.ru - RSS" href="http://www.ipetrenko.ru/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="IPetrenko.ru - Atom" href="https://www.blogger.com/feeds/3134607703336250876/posts/default" />
<link rel="alternate" type="application/atom+xml" title="IPetrenko.ru - Atom" href="http://www.ipetrenko.ru/feeds/8655462075812271604/comments/default" />
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/20363762-ieretrofit.js"></script>
<![endif]-->
<link href='https://2.bp.blogspot.com/-NZBSFogNdO0/VxErHko4r4I/AAAAAAAALbU/L7jMWgyQjdYDm4EBacMKZt81S0_i22weQCLcB/s640/music-on-blogspot-min%25282%2529.jpg' rel='image_src'/>
<meta content='А Вы знаете как в блог вставить музыку?' name='description'/>
<meta content='http://www.ipetrenko.ru/2016/04/insert-music-into-blogger.html' property='og:url'/>
<meta content='https://2.bp.blogspot.com/-NZBSFogNdO0/VxErHko4r4I/AAAAAAAALbU/L7jMWgyQjdYDm4EBacMKZt81S0_i22weQCLcB/w1200-h630-p-nu/music-on-blogspot-min%25282%2529.jpg' property='og:image'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Сразу скажу - весь этот код важен, включая подключаемые скрипты. Предлагаю на зацикливаться на этой часте кода, а рассмотреть остальные участки оптимизированных метатегов для Blogspot. 

Метатеги для страницы сообщения (пример вы смотрите сейчас)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Метатеги на странице поста-->
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
            <b:if cond='data:blog.postImageUrl'>
                <meta content='summary_large_image' name='twitter:card'/>
                 <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
            <b:else/>
                  <meta content='summary' name='twitter:card'/>
              <b:if cond='data:blog.postImageThumbnailUrl'>
                   <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
                </b:if>
            </b:if>
</b:if>

Метатеги для статической страницы (пример)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
            <b:if cond='data:blog.postImageUrl'>
                <meta content='summary_large_image' name='twitter:card'/>
                 <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
            <b:else/>
                  <meta content='summary' name='twitter:card'/>
              <b:if cond='data:blog.postImageThumbnailUrl'>
                   <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
                </b:if>
            </b:if>
</b:if>

Метатеги для страницы архива (пример)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Метатеги на странице архива-->
 <title> Архив записей с <data:blog.pageName/></title>
<meta expr:content='&quot;Все материалы с &quot; + data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot;Каталог статьей с &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>

Метатеги для страницы результата поиска (пример)

<b:if cond='data:blog.searchQuery'>
         <title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot;Релевантные результаты поиска для &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
<meta content='http://3.bp.blogspot.com/--JBsZCXnJFQ/VKguEG8LYCI/AAAAAAAAI7s/YO5BOQ8N6NU/s1600/big-logo-ipetrenko.png' property='og:image'/>
</b:if>

Метатеги для страницы ярлыка (пример)

<b:if cond='data:blog.searchLabel'>
     <title><data:blog.pageName/> - все материалы по теме</title>
<meta expr:content='data:blog.pageName + &quot; - все статьи &quot;' itemprop='headline' name='twitter:title' property='og:title'/>
<meta expr:content='&quot; Архив записей в категории &quot; + data:blog.pageName' itemprop='description' name='twitter:description' property='og:description'/>
<meta content='http://3.bp.blogspot.com/--JBsZCXnJFQ/VKguEG8LYCI/AAAAAAAAI7s/YO5BOQ8N6NU/s1600/big-logo-ipetrenko.png' property='og:image' name='twitter:image'/>
</b:if>

Метатеги для главной страницы  (пример)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Метатеги на главной странице-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title>IPetrenko.ru - новости блогосферы, секреты блоггинга, настройка блога на Blogger</title>
<meta content='Всё для Blogger: полезные статьи про блоггинг и блогосферу, виджеты для Blogspot, SEO и SMM, раскрутке и продвижение блога, бесплатные шаблоны и темы для Blogger' name='twitter:description' property='og:description'/>
<meta content='IPetrenko.ru - новости блогосферы, секреты блоггинга, настройка блога на Blogger ' itemprop='headline' name='twitter:title' property='og:title'/>
<meta content='Виджеты, Blogger, полезные статьи, HTML, CSS, Google, SEO, Яндекс, домен, хостинг, бесплатные шаблоны Blogger, blogger templates' name='keywords'/>
</b:if>
</b:if>

Метатеги для страницы ошибки 404 (пример)

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!-- Метатеги на странице 404-->
 <title>404 - К сожалению, такой страницы нету... </title>
<meta content='404- Здесь ничего нету...' itemprop='headline' name='twitter:title' property='og:title'/>
<meta content='Здесь ничего нету...' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>

Второй участок кода, который остается без изменений и должен быть на всех страницах сайта:

    <meta content='Игорь Петренко' name='author'/>
    <meta content='(c) Igor Petrenko' name='copyright'/>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@ip_blogger' name='twitter:site'/>
    <meta content='nnY7T5Timg7pJ6ox' name='mailru-domain'/>
    <meta content='@Igor_Petrenko' name='twitter:creator' />
    <meta content='25ACB51BE84A3D2C588E9BBE8B0AB8B4' name='msvalidate.01'/>
    <meta content='653f3d4638597cde' name='yandex-verification'/>
    <meta content='709585222505266' property='fb:page_id'/>
    <meta content='709585222505266' property='fb:app_id'/>

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

До встречи ;-)


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger комменты
    Facebook комменты

0 коммент. :

Отправить комментарий