Настройка заголовков H1 H2 H3 темы Blogger
Здравствуйте! Сегодня я затрону тему оптимизации заголовков на Blogger (Blogspot). Эта тема очень важна, так как помогает вашему блогу показывать “правильную” структуру вашего блога поисковикам. Те, в свою очередь, лучше поймут, о чем идет речь в каждой вашей отдельно взятой статье, будут давать более точные поисковые запросы в выдаче. Это приведет к снижению отказов, и как следствие повышение позиций вашего сайта.
Изначально в стандартном шаблоне Blogger и в большинстве нестандартных на главной странице блога в тег h1 заключен заголовок блога. Названия статей на главной – отдано тегу h3, а названия виджетов заключены в h3. Мы оставим заголовок блога на главной в h1, заголовки сообщений обернем в h2, а названия гаджета – в h3.
Главная страница Blogger до оптимизации: Главная страница блога после оптимизации:
На странице сообщений (постов, записей) заголовок блога также в h1, заголовок сообщения – в h3, и названия гаджетов – в h2.
После изменений будет заголовок сообщения заключен в h1. Он будет давать сигнал поисковикам, что именно об этом идет речь на конкретной странице. Заголовок блога выведем из h1, так как двух h1 не может быть на одной странице. Заголовки виджетов будут заключены в h3.
Схема 2.
Страница сообщения до изменения Страница поста после изменения
Реализация оптимизации заголовков h1, h2, h3 в теме Blogger
- Изменяем заголовок блога. Найдите код:
<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 == "static_page"'>
<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 раза. Ищем все отрезки и изменяем на предложенный код.
- Изменяем заголовки сообщений блога. До изменений узнайте стили заголовков постов через инспектор кода. В моем примере стили следующие:
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 == "item"'>
<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> - Изменить заголовки виджетов (гаджетов) с h2 на h3. Посмотрите стили заголовков виджета. Измените с h2 на h3, содержимое стилей оставьте то же.
В редакторе html темы блога, выбирайте поочередно гаджеты, пользуясь быстрым поиском по шаблону блога: список виджетов –> HTML5, PageList1, Popularpost1 и другие. Все, кроме Blog1, Navbar 1 и Header 1. После выбора виджета кликните на многоточие перед </b:widget>:
Далее на … после <b:includable id='main'>:
Здесь вы увидите, что заголовок виджета представлен кодом:
<h2 class='title'>
<data:title/>
</h2>Замените его на:
<h3 class='title'>
<data:title/>
</h3> - Меняем заголовки сообщений в мобильной версии блога. Находим код:
<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. Блок объявлений оставляем без изменений.
Меняем стили заголовка блога. Так как мы изменяем тег h1, то отображение названия нашего блога на странице поста изменится. Чтобы вернуть прежний вид, найдите в теме блога стили .Header h1, а лучше просмотрите в коде странице (узнай как это сделать из статьи Как изменить шаблон сайта, в Chrome это делается с помощью горячих клавиш CTRL + SHIFT + I, а Опере – клик правой кнопкой мыши –> проинспектирвать объект). Вот такой код заголовка блога:
Прописываем этот же код для #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;
}
Очень полезная статья. Я вот не понимаю почему блоггер решил что надо заголовки статей в h3 помещать изначально, тогда как в руководствах гугла для вебмастеров сказано что h1 самый важный и это должна быть статья. h2 названия виджетов и дата так и вообще бредятина. Может эт заговор гугла, чтобы трафик не давать тем, кто на блоггере?)))
спасибо, интересно
К сожалению, всё плохо... У меня. 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. пункт вообще не поняла.
Совет: откатитесь назад, запишите в блокноте все стили, соответствующие вашим заголовкам. Снова сделайте изменения. Пропишите новые стили для заголовков.
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, то удалить ссылку также не удастся.
Спасибо, Наталья! Попробую убирать такого рода ссылки не только с комментариев, но и в других случаях, где потребуется. Что касается комментариев от Google Plus, нужно будет проверить, отображаются ли они в ленте. Честно говоря, до комментариев пока руки не доходили, до сих пор не уверен точно, нужны ли они в моём случае, а также страница контактов. С другой стороны, бывают проблемы и вопросы у посетителей, а обратиться то и некуда ) Планирую поставить какую-нибудь форму комментов с поддержкой основных соцсетей.
Наталья, подскажите пожалуйста, заголовков страниц в блоггере эта статья не затрагивает? У меня они остались Н2, ну и ссылаются на себя )
Kesha, нет про оптимизацию заголовков страниц Blogger у меня ничего не написано. Обязательно добавлю позже. Когда добавлю, обязательно сообщу в этой ленте комментариев.
Огромное Вам спасибо, Наталья! С Вашей помощью удалось убрать ссылку с заголовка Сообщения 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. Спасибо вам за интересные вопросы.
Спасибо, Наталья! Я вообще всё переделал. Ручками 🙂 Теперь у меня адаптивный шаблон, название блога в "title", а заголовки сообщений и страниц в h1. Как и должно быть.
https://messenger-wowapp.blogspot.ru/
HTML 5 Outliner показывает следующее про Главную страницу :
1. WowApp - просто общайся, играй и зарабатывай! Это Н1 первого сообщения.
1. Почему именно WowApp? Это Н2.
1. Возвращайте деньги при покупках в интернете! А это заголовки виджетов - Н5.
2. Звони по всему свету!
3. Виртуальный телефонный номер
4. Теперь ещё больше способов заработать!
5. Приватный режим WowApp
6. Благотворительная программа WowApp
7. Бесплатная реклама в ВКонтакте и Facebook
Другие виджеты, типа Страницы и прочее, что вообще не по теме, изменил c h на p. Теперь они в иерархии h вообще не участвуют. И приглашаю всех в мессенджер. Классная программа! 🙂
День добрый, Наталья!
Хочу спросить: а можно сделать копию блога с сообщениями?.. (не резервную копию), создать такой же блог, но с другим именем в качестве тестировочной платформы.
Balance, это можно сделать. Зайдите в админку вашего блога загрузите тему исходного блога. Чтобы скопировать все сообщения нужно в админ панели вашего блога, который вы будете копировать сделать резервную копию сообщений и комментариев (Настройки -> Другое -> сохранить резервную копию контента). Теперь откройте админку вашего дубликата и загрузите резервную копию контента (путь тот же) через функцию "Импортировать контент".
Здравствуйте, Наталья!
Спасибо вам за совет – получилось.
И, конечно спасибо за такую продуктивную статью. Её содержательность очень помогает.
Есть некоторый нюанс, думаю, это касается лично моей «Темы» в профиле блогера. Суть такова: из статьи «Реализация оптимизации заголовков h1, h2, h3 в теме Blogger. 1. Изменяем заголовок блога. Найдите код…»
Пункт №1 изменил, получилось.
А вот далее «Прописываем этот же код для #nameblog и не забываем про #nameblog a.» не выходит. То есть, «#nameblog» в коде своей страницы пытаюсь найти, но не нахожу.
В пункте №2 «Изменяем заголовки сообщений» в коде своего блога не могу найти «h3.post-title».
Надеюсь, на вашу помощь, Наталья.
https://blogforyoudruzia.blogspot.com основной блог.
https://testrightworkingmyblog.blogspot.com его копия для тестинга.
Прошу прощения, что не написал сообщения с благодарностью и вопросом по быстрому. Ремонтировал системник, да как затянулся этот ремонт. Сейчас вроде бы налаживаю его.
Ваш ученик Balance!
Здравствуйте, Balance. Извините, за поздний ответ.
Конечно же вы не найдете #nameblog, потому что его нужно прописать самостоятельно там, где в шаблоне стили.
h3.post-title я в вашем блоге виду.
Здравствуйте, Наталья!
Спасибо за ответы/советы. С вашей помощью начал постепенно соображать по исправлению заголовков.
Все 4 пункта описанных в статье выполнил.
Будьте любезны, просмотрите, пожалуйста мои исправления вашим зорким взглядом: https://testrightworkingmyblog.blogspot.com на моей тестовой платформе. Чтобы мне уже основательно быть уверенным в продвижении и моих основных, рабочих блогов.
Balance, У вас название виджета "Архив блога" остался также в h2, нужно уменьшить количество исходящих ссылок. С главной странице у вас аж 60 внешних ссылок, с внутренних - 11. Ну и не мешало бы убрать навбар и я бы сменила дизайн, но в этом случае вам придется заняться оптимизацией новой темы.
А какую бы Тему вы посоветовали, Наталья. Это должна быть Тема из стандартного списка тем блоггера, или её можно скачать в интернете?
Тем очень много. Можно взять любую сторонюю тему или одну из новых стандартных тем Blogger
Здравствуйте!
Что то у меня не так получилось. На главной всё хорошо показывает. А когда статью смотрю, показывает 2 заголовка. В программе написано -один заголовок H1 - название статьи, другой H1 Исходный текст. Посмотрите, если не трудно, что не так. https://inshabashka.blogspot.com/
Здравствуйте,
Пожалуйста, подскажите, каким образом в стилях можно изменить цвет заголовка на отдельной странице?
Знаю, что это как-то возможно через правило b:if, возможно, есть и другой способ? Если Вам знакомы такие трюки, то каким образом можно оформить стили, каков будет сам код?
Благодарю Вас!
С уважением,
Денис
Извините, за долгое ожидание ответа (( Не могу приучить себя к дисциплине.
Нужно вставить перед код:
<b:if cond='data:blog.url == "https://адресвашейстраницы.blogspot.ru"'>
<style>
h1 {color: red; }
Здесь могут быть другие стили, относящиеся к данной странице
</style>
</b:if>
Привела пример с красным заголовком. У вас будет работать лишь в том случае, если заголовок вашей странице заключен в тег h1, если в другой - то замените его. Можете прислать ссылку на свою страницу, я помогу с изменениями.
Здравствуйте. У меня в мобильной версии на странице с сообщением заголовок блога, который раньше был h1 не применил стили #nameblog. Как это исправить? В компьютерной версии все нормально.
Здравствуйте, Наталья! Помогите, пожалуйста! Следуя вашим советам, я выполнил оптимизацию заголовков. Всё получилось, всё на месте. Но в статьях блога изменились заголовки. Уменьшился цвет и шрифт. У вас об этом написано, но у меня в коде нет #nameblog и #nameblog. По аналогии я внес изменения в .Header h1 { и .Header h1 a { но это не спасло. Я не знаю, что делать дальше, потому как не силён в этой математике. Блог https://blogoproverka.blogspot.com
Андрей, нужно добавить в стили следующий код:
#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;
}
Т.е этот код нужно вставить в шаблон блога до кода </b:skin>
Так и не разобралась в заголовках. В расширении сео мета показывает 2 заголовка. https://inshabashka.blogspot.com
Посмотрите, где искать ошибку. Спасибо заранее.
Наталья, я вижу у вас на главной странице блога и на странице поста по одному заголовку h1. h1 должен быть по одному на каждой странице. У вас так и есть. Остальных заголовков может быть разное количество.
Спасибо.
Ну вот меняю заголовки (в виджете Поиск ), а они становятся значительно меньше по размеру. 🙁