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

заголовки blogspot

Оцените статью
Добавить комментарий

  1. Econ Dude

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

    Ответить
  2. Semen Surin

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

    Ответить
  3. Kesha

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

    Ответить
  4. Иванова Наталья

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

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

    Ответить
  5. Kesha

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

    Ответить
  6. Иванова Наталья

    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, то удалить ссылку также не удастся.

    Ответить
  7. Kesha

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

    Ответить
  8. Kesha

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

    Ответить
  9. Иванова Наталья

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

    Ответить
  10. 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
    Убрать бы весь балласт

    Ответить
  11. Иванова Наталья

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

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

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

    Ответить
  12. Алексей

    Спасибо, Наталья! Я вообще всё переделал. Ручками 🙂 Теперь у меня адаптивный шаблон, название блога в "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 вообще не участвуют. И приглашаю всех в мессенджер. Классная программа! 🙂

    Ответить
  13. Balance

    День добрый, Наталья!

    Хочу спросить: а можно сделать копию блога с сообщениями?.. (не резервную копию), создать такой же блог, но с другим именем в качестве тестировочной платформы.

    Ответить
  14. Иванова Наталья

    Balance, это можно сделать. Зайдите в админку вашего блога загрузите тему исходного блога. Чтобы скопировать все сообщения нужно в админ панели вашего блога, который вы будете копировать сделать резервную копию сообщений и комментариев (Настройки -> Другое -> сохранить резервную копию контента). Теперь откройте админку вашего дубликата и загрузите резервную копию контента (путь тот же) через функцию "Импортировать контент".

    Ответить
  15. Balance

    Здравствуйте, Наталья!

    Спасибо вам за совет – получилось.
    И, конечно спасибо за такую продуктивную статью. Её содержательность очень помогает.

    Есть некоторый нюанс, думаю, это касается лично моей «Темы» в профиле блогера. Суть такова: из статьи «Реализация оптимизации заголовков h1, h2, h3 в теме Blogger. 1. Изменяем заголовок блога. Найдите код…»
    Пункт №1 изменил, получилось.

    А вот далее «Прописываем этот же код для #nameblog и не забываем про #nameblog a.» не выходит. То есть, «#nameblog» в коде своей страницы пытаюсь найти, но не нахожу.

    В пункте №2 «Изменяем заголовки сообщений» в коде своего блога не могу найти «h3.post-title».

    Надеюсь, на вашу помощь, Наталья.
    https://blogforyoudruzia.blogspot.com основной блог.
    https://testrightworkingmyblog.blogspot.com его копия для тестинга.

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

    Ваш ученик Balance!

    Ответить
  16. Иванова Наталья

    Здравствуйте, Balance. Извините, за поздний ответ.
    Конечно же вы не найдете #nameblog, потому что его нужно прописать самостоятельно там, где в шаблоне стили.
    h3.post-title я в вашем блоге виду.

    Ответить
  17. Balance

    Здравствуйте, Наталья!

    Спасибо за ответы/советы. С вашей помощью начал постепенно соображать по исправлению заголовков.
    Все 4 пункта описанных в статье выполнил.

    Будьте любезны, просмотрите, пожалуйста мои исправления вашим зорким взглядом: https://testrightworkingmyblog.blogspot.com на моей тестовой платформе. Чтобы мне уже основательно быть уверенным в продвижении и моих основных, рабочих блогов.

    Ответить
  18. Иванова Наталья

    Balance, У вас название виджета "Архив блога" остался также в h2, нужно уменьшить количество исходящих ссылок. С главной странице у вас аж 60 внешних ссылок, с внутренних - 11. Ну и не мешало бы убрать навбар и я бы сменила дизайн, но в этом случае вам придется заняться оптимизацией новой темы.

    Ответить
  19. Balance

    А какую бы Тему вы посоветовали, Наталья. Это должна быть Тема из стандартного списка тем блоггера, или её можно скачать в интернете?

    Ответить
  20. Иванова Наталья

    Тем очень много. Можно взять любую сторонюю тему или одну из новых стандартных тем Blogger

    Ответить
  21. Наталья Иконописцева

    Здравствуйте!
    Что то у меня не так получилось. На главной всё хорошо показывает. А когда статью смотрю, показывает 2 заголовка. В программе написано -один заголовок H1 - название статьи, другой H1 Исходный текст. Посмотрите, если не трудно, что не так. https://inshabashka.blogspot.com/

    Ответить
  22. Анонимный

    Здравствуйте,

    Пожалуйста, подскажите, каким образом в стилях можно изменить цвет заголовка на отдельной странице?
    Знаю, что это как-то возможно через правило b:if, возможно, есть и другой способ? Если Вам знакомы такие трюки, то каким образом можно оформить стили, каков будет сам код?

    Благодарю Вас!

    С уважением,
    Денис

    Ответить
  23. Иванова Наталья

    Извините, за долгое ожидание ответа (( Не могу приучить себя к дисциплине.
    Нужно вставить перед код:

    <b:if cond='data:blog.url == &quot;https://адресвашейстраницы.blogspot.ru&quot;'&gt;
    <style>
    h1 {color: red; }
    Здесь могут быть другие стили, относящиеся к данной странице
    </style>
    </b:if>

    Привела пример с красным заголовком. У вас будет работать лишь в том случае, если заголовок вашей странице заключен в тег h1, если в другой - то замените его. Можете прислать ссылку на свою страницу, я помогу с изменениями.

    Ответить
  24. Наталия Кетова

    Здравствуйте. У меня в мобильной версии на странице с сообщением заголовок блога, который раньше был h1 не применил стили #nameblog. Как это исправить? В компьютерной версии все нормально.

    Ответить
  25. Андрей П

    Здравствуйте, Наталья! Помогите, пожалуйста! Следуя вашим советам, я выполнил оптимизацию заголовков. Всё получилось, всё на месте. Но в статьях блога изменились заголовки. Уменьшился цвет и шрифт. У вас об этом написано, но у меня в коде нет #nameblog и #nameblog. По аналогии я внес изменения в .Header h1 { и .Header h1 a { но это не спасло. Я не знаю, что делать дальше, потому как не силён в этой математике. Блог https://blogoproverka.blogspot.com

    Ответить
  26. Иванова Наталья

    Андрей, нужно добавить в стили следующий код:
    #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>

    Ответить
  27. Наталья

    Так и не разобралась в заголовках. В расширении сео мета показывает 2 заголовка. https://inshabashka.blogspot.com
    Посмотрите, где искать ошибку. Спасибо заранее.

    Ответить
  28. Аноним

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

    Ответить
  29. Наталья

    Спасибо.

    Ответить
  30. Мария

    Ну вот меняю заголовки (в виджете Поиск ), а они становятся значительно меньше по размеру. 🙁

    Ответить
  31. VVV

    В 2024 году больше не получается, как описано в статье, редактировать теги виджетов. Я хочу вообще убрать с них теги h, виджеты не являются частью смысловой структуры сайта. Но ни убрать, ни редактировать не вижу где. Изначально на них выставлено h3 и не могу найти, где это прописывается.

    Ответить