2017-08-24

Textual description of firstImageUrl

Настройка заголовков H1 H2 H3 темы Blogger

заголовки blogspot
Здравствуйте! Сегодня я затрону тему оптимизации заголовков на Blogger (Blogspot). Эта тема очень важна, так как помогает вашему блогу показывать “правильную” структуру вашего блога поисковикам. Те, в свою очередь, лучше поймут, о чем идет речь в каждой вашей отдельно взятой статье, будут давать более точные поисковые запросы в выдаче. Это приведет к снижению отказов, и как следствие повышение позиций вашего сайта.
Изначально в стандартном шаблоне Blogger и в большинстве нестандартных на главной странице блога в тег h1 заглючен заголовок блога. Названия статей на главной – отдано тегу h3, а названия виджетов заключены в h3. Мы оставим заголовок блога на главной в h1, заголовки сообщений обернем в h2, а названия гаджета – в h3.
Главная страница Blogger до оптимизации:       Главная страница блога после оптимизации:
оптимизация bloggerоптимизация blogger
На странице сообщений (постов, записей) заголовок блога также в h1, заголовок сообщения – в h3, и названия гаджетов – в h2.
После изменений будет заголовок сообщения заключен в h1. Он будет давать сигнал поисковикам, что именно об этом идет речь на конкретной странице. Заголовок блога выведем из h1, так как двух h1 не может быть на одной странице. Заголовки виджетов будут залючены в h3.
Схема 2.
.. Страница сообщения до изменения                    Страница поста после изменения
заголовки h1, h2, h3 blogger   страница-поста-2

Реализация оптимизации заголовков h1, h2, h3 в теме Blogger

  1. Изменяем заголовок блога. Найдите код:
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    Он может выглядеть так:
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    Замените его на
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <h1
    class='title'>
    <b:include name='title'/>
    </h1>
    <b:else/>
    <p class='title' id='nameblog'>
    <b:include name='title'/>
    </p>
    </b:if>
    Код заголовка блога может встречаться несколько раз, даже 3 или 4 раза. Ищем все отрезки и изменяем на предложенный код.
  2. Меняем стили заголовка блога. Так как мы изменяем тег h1, то отображение названия нашего блога на странице поста изменится. Чтобы вернуть прежний вид, найдите в теме блога стили .Header h1, а лучше просмотрите в коде странице (узнай как это сделать из статьи Как изменить шаблон сайта, в Chrome это делается с помощью горячих клавиш CTRL + SHIFT + I, а Опере – клик правой кнопкой мыши –> проинспектирвать объект). Вот такой код заголовка блога:
    стили заголовков blogger
    Прописываем этот же код для #nameblog и не забываем про #nameblog a. Пример:
    #nameblog
    {
         font: normal normal 16px Open Sans;
         color: #113455;
         text-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }
    #nameblog {
         margin-bottom: 10px;
    }
    #nameblog a {
         font: normal normal 16px Open Sans;
         color: #113455;
         text-shadow: 0 0 0 rgba(0, 0, 0, .2);
         margin-bottom: 10px;
    }
  3. Изменяем заголовки сообщений блога. До изменений узнайте стили заголовков постов через инспектор кода. В моем примере стили следующие:
    h3.post-title {
    font: normal normal 24px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
    margin: .75em 0 0;
    }
    Исправьте на h1.post-title, h2.post-title {…. }, блок объявлений стиле оставьте тот же, т.е. содержимое фигурных скобок. В моем примере:
    h1.post-title, h2.post-title {
    font: normal normal 24px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
    margin: .75em 0 0;
    }


    Пропишите также стили для h1.post-title a, h2.post-title a {бла-юла-бла}, взяв значения из кода темы.

    Для этого найдите отрезок кода <b:if cond='data:post.title'>, далее будет следовать код, похожий на этот:
    <b:if cond='data:post.title'>
                 <h3 class='post-title entry-title' itemprop='headline'>
                   <b:if cond='data:post.link'>
                     <a expr:href='data:post.link'><data:post.title/></a>
                   <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                     <a expr:href='data:post.url'><data:post.title/></a>
                   <b:else/>
                     <data:post.title/>
                   </b:if>
                 </h3>
               </b:if>
    Или несколько другой. Может встречаться несколько раз. Главное, чтобы он начинался <b:if cond='data:post.title'>, внутри содержал <h3 class=”… ></h3> и заканчивался на </b:if>. Замените все найденные похожие коды на следующий:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <data:post.title/>
    <b:else/>
    <b:if cond='data:post.url'>
    <data:post.title/>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>
    </b:if>
    <b:else/>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>
    </b:if>
    </b:if>
  4. Изменить заголовки виджетов (гаджетов) с h2 на h3. Посмотрите стили заголовков виджета. Измените с h2 на h3, содержимое стилей оставьте то же.
    В редакторе html темы блога, выбирайте поочередно гаджеты, пользуясь быстрым поиском по шаблону блога: список виджетов –> HTML5, PageList1, Popularpost1 и другие. Все, кроме Blog1, Navbar 1 и Header 1. После выбора виджета кликните на многоточие перед </b:widget>:
    быстрый поиск кода виджета blogger
    Далее на … после <b:includable id='main'>:
    быстрый поиск кода виджета blogger
    Здесь вы увидите, что заголовок виджета представлен кодом:
    <h2 class='title'>
         <data:title/>
      </h2>
    Замените его на:
    <h3 class='title'>
    <data:title/>
    </h3>
  5. Меняем заголовки сообщений в мобильной версии блога. Находим код:
    <h3 class='mobile-index-title entry-title' itemprop='name'>
      <data:post.title/>
    </h3>
    Изменяем его на
    <b:if cond='data:blog.url == data:post.url' >
             <h1 class='mobile-index-title entry-title' itemprop='name'>
               <data:post.title/>
             </h1>
             <b:else/>
    <h2 class='mobile-index-title entry-title' itemprop='name'>
               <data:post.title/>
             </h2>
             </b:if>
    Не забудьте изменить стили. Находим стиль .mobile h3.post-title, меняем селектор на .mobile h2.post-title, .mobile h1.post-title. Блок объявлений оставляем без изменений.

2 комментария :

Econ Dude комментирует...

Очень полезная статья. Я вот не понимаю почему блоггер решил что надо заголовки статей в h3 помещать изначально, тогда как в руководствах гугла для вебмастеров сказано что h1 самый важный и это должна быть статья. h2 названия виджетов и дата так и вообще бредятина. Может эт заговор гугла, чтобы трафик не давать тем, кто на блоггере?)))

Semen Surin комментирует...

спасибо, интересно

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности