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>
    Замените его на
    <div class='titlewrapper' style='background: transparent'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='title' style='background: transparent; border-width: 0px'>
    <h1><b:include name='title'/></h1>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
    <p class='title' id='nameblog'>
                                      <b:include name='title'/>
                                    </p>
    <b:else/>
    <p class='title' id='nameblog'>
                                      <b:include name='title'/>
                                    </p>
    </b:if>
    </b:if>
    </div>
    Код заголовка блога может встречаться несколько раз, даже 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. Блок объявлений оставляем без изменений.

11 комментариев :

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

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

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

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

Kesha комментирует...

К сожалению, всё плохо... У меня. https://test-sal.blogspot.ru/
После всех проделанных манипуляций:
1. На странице сообщения изменилось оформление заголовка и его заголовок не Н1, а почему то Н2. Как его сделать Н1, чтобы был оформлен как другие заголовки?
2. Почему-то заголовок страницы стал ссылаться сам на себя, до этого так не было.
3. На странице дата комментария ссылается на саму эту страницу......
4. После изменения h2 на h5 ещё до этих изменений, заголовки виджетов сильно поднялись над полем гаджета. Ничего сделать с этим не получилось.
5. И совсем убивает, что даже все изменения в шаблоне, которые были сделаны, не изменили 1-го места даты сообщения в HTML 5 Outliner. Я так понял, что это самый мощный Н1 навсегда! Все виджеты тоже не ниже h2, хотя и h5.

Иванова Наталья комментирует...

Kesha,
1. на странице сообщения для правильной оптимизации заголовком h1 должно быть заголовок поста, а не заголовок блога. Именно тогда ваш блог будут находить по нужным вам ключевым фразам, именно тогда вам будет легче продвигать свой блог. Если конечно, вы не ставите своей целью продвинуть именно название своего блога в качестве некоего бренда.
когда вы вносите изменения в заголовки обязательно меняется оформление. Меняете стили и все. Как это сделать, у меня расписано в статье.
2. Не увидела этого в вашем тестовом блоге.
3. Дату комментария я вообще не трогала - здесь вы что-то сами напутали. хотя надо добавить в мое сообщение и то, как изменить заголовок даты комментария. Они также прописаны в Blogger. Посмотрела в вашем блоге - дата комментария ссылается на комментарий. Как было и должно быть.
4. Меняйте стили заголовков. Скорее всего это связано с этим.
5. пункт вообще не поняла.

Совет: откатитесь назад, запишите в блокноте все стили, соответствующие вашим заголовкам. Снова сделайте изменения. Пропишите новые стили для заголовков.

Kesha комментирует...

1. Я и имел в виду заголовок поста, в смысле сообщения. Шапка блога у меня в виде картинки, с ней всё нормально. Открыв Сообщение 1, вижу, что оформление заголовка отличается от всех остальных и подчиняется изменениям в h2. Поэтому я и спрашивал, как присвоить ему h1, которым он и должен быть.
2. Заголовки страниц ссылаются сами на себя: р1 и р2 - это названия страниц
3. Наталья, я же не утверждаю, что у Вас что-то неверно, я смотрю, что у меня наворочено) Как мне сделать, чтобы дата комментария вообще не являлась ссылкой?
4. Это я сделал в стилях виджетов, вопрос решён
5. HTML 5 Outliner я использую для проверки иерархии h1-h6
https://gsnedders.html5.org/outliner/

Иванова Наталья комментирует...

Kesha,
1. ваше сообщение 1 стало заголовком h1. Если вы пользуетесь браузером Google Chrome, то проверять заголовки можете с помощью расширения.
Чтобы прописать прежние для него стили добавьте код:
h1.post-title.entry-title {
font: italic normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #00e3ff;
}
Стили взяла с вашего основного блога.
2. Про оптимизацию заголовков у меня ничего в посте нет. Допишу позже. Поэтому они остались без изменений.
3. Удалить ссылку из даты комментариев можно, если в блоге не древовидная форма комментариев. Для этого нужно найти код <data:comment.timestamp/> и вы увидите, что этот код обернут в ссылку, а именно выглядит так:
<a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a>
Удалите из вышеуказанного кода лишь выделенный жирным код.
P.S. Если у вас комментарии от Google Plus, то удалить ссылку также не удастся.

Kesha комментирует...

Спасибо, Наталья! Попробую убирать такого рода ссылки не только с комментариев, но и в других случаях, где потребуется. Что касается комментариев от Google Plus, нужно будет проверить, отображаются ли они в ленте. Честно говоря, до комментариев пока руки не доходили, до сих пор не уверен точно, нужны ли они в моём случае, а также страница контактов. С другой стороны, бывают проблемы и вопросы у посетителей, а обратиться то и некуда ) Планирую поставить какую-нибудь форму комментов с поддержкой основных соцсетей.

Kesha комментирует...

Наталья, подскажите пожалуйста, заголовков страниц в блоггере эта статья не затрагивает? У меня они остались Н2, ну и ссылаются на себя )

Иванова Наталья комментирует...

Kesha, нет про оптимизацию заголовков страниц Blogger у меня ничего не написано. Обязательно добавлю позже. Когда добавлю, обязательно сообщу в этой ленте комментариев.

Kesha комментирует...

Огромное Вам спасибо, Наталья! С Вашей помощью удалось убрать ссылку с заголовка Сообщения 1 https://test-sal1.blogspot.ru/ Теперь теги Н выглядят так:

1. Сообщение 1
1. Заголовок Сообщения 1 Н2
1. Подзаголовок Сообщения 1 Н3
2.
3.Страницы
4.Untitled Section

Не всё как должно было бы быть, но всё-таки.
Меня терзают смутные сомнения, что шаблон можно ещё уменьшить раза в 1,5 )
Например, зачем нужны corrects IE6? Разве его кто-нибудь ещё использует?
Комменты убрать бы совсем, поставлю отдельный виджет.Кнопки Поделиться тоже. Эти никуда не годятся.
А эти ссылки нужны кому-нибудь? Я боюсь трогать )
https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_70.png
https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png
https://resources.blogblog.com/img/icon_delete13.gif
Убрать бы весь балласт

Иванова Наталья комментирует...

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

Кстати, добавила про оптимизацию заголовков страниц блога (смотрите первый пункт статьи). Теперь заменить код <h1 class='title'>
<b:include name='title'/>
</h1>
нужно на другой (предложенный в статье).

P.S. Спасибо вам за интересные вопросы.

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

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