Здравствуйте дорогие друзья!

Наконец то я написал эту статью, очень долго собирался и медленно писал.

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

Поисковые системы особое внимание уделяют к тегам H1 и правильности расположения их на странице. Наличие более 4 тегов не желательно иметь на странице (заголовок H1 должен быть один на странице) и обязательно должны быть расставлены в порядке возрастания без пропусков ( H1-h2-h3-h4-h5-h6).

В этой статье, я постараюсь как можно подробнее объяснить, как правильно расставить заголовки H1-H2-H3 и настроить стили для них, а также рассмотрим заголовок H1 в шапке сайта при нахождении на других страницах сайта.

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

Тега H1 не должно быть больше одного и он находится вверху страницы — это основной заголовок сайта, статьи или страницы!

Тут, палка о двух концах! Если вы продвигаете основную страницу сайта, то заголовок сайта (название — логотип) должен быть на всех страницах H1, или если у вас одно-страничный сайт. А если вы хотите продвигать статьи и страницы сайта, то у них заголовок должен быть с тегом H1, но заголовок сайта должен быть основой, главным названием и описанием сайта — это же Имя сайта!

Приведу пример на своем сайте. По умолчанию в шаблоне моей темы теги расположены неправильно, несмотря на то, что она класса премиум! Заголовок сайта H1, заголовки статей в ленте также H1, при открытии статьи (шапка и заголовок статьи H1) тоже самое при открытии страниц. Если открыть исходный код страницы, то увидим что тегов H1 более одного, а на главной странице их столько, сколько статей в ленте, плюс шапка сайта!!! Если у вас что то подобное, то срочно нужно исправлять. С такими заголовками Вы никогда не будете в Топ выдаче поиска, а если вдруг и доберетесь, то не надолго. Но, есть исключения для попадания в Топ выдачи, а это высокая релевантность страницы и хорошие поведенческие показатели.

Правильная оптимизация заголовков на сайте

Для начала проверьте главную страницу. Воспользуйтесь сочетанием клавиш «ctrl+u» и откроется страница с исходным кодом. Сочетанием клавиш «ctrl+f» откройте поиск, введите H1 и нажмите «enter».

Оптимизация заголовков

На главной странице у меня есть один тег H1 у заголовка сайта, если у Вас вообще его нет, то нужно прописать этот тег. В строке поиска указано, что 1 из 2, это значит, что один открывающий, а другой закрывающий тег, мы считаем их за один. Заголовки постов в ленте у меня с тегом H2, сколько статей в ленте, столько и тегов H2.

Заголовки статей

 

В ленте у меня отображается 7 статей (то есть 7 тегов H2), остальные 4 тега сделаны для рубрик в виджетах, но я их переделаю с тега H2 на H3, так будет правильнее. Получится, что у меня сверху вниз идут, сначала шапка H1 потом статьи H2 и рубрики H3, так должно быть и у вас.

После того, как проверили главную страницу своего сайта, переходите к статьям и страницам.

Я у себя сделал следующее! При открытии статьи, у шапки сайта тег H1 отсутствует, потому что я продвигаю в этом случае статью, а у статьи стоит тег H1. Тоже самое у меня на остальных страницах.

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

Исходный код статьи (шапка сайта):

Тег H1 шапки сайта

 

Исходный код заголовка статьи:

Оптимизация заголовков статей

 

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

Переходим к делу!

Как сделать тег H1 у заголовка сайта!

Мне как раз попал в руки сайт ege-ok.ru/, у которого нужно оптимизировать заголовки на всех страницах, на нем и буду показывать как все это организовать.

Шаблон темы сайта называется «zeecorporate», и коды будут отличаться от вашего, но в общем все должно быть понятно, главное понять что и куда вставлять. Шаблон у сайта очень не простой, потому что у него завязано в процессе несколько файлов стилей. Если у кого такой же шаблон, то придется постараться все настроить.

Проверяем заголовок шапки сайта («ctrl+u» и «ctrl+f») вводим в строку поиска H1 и жмем «Enter». Как видим шапка сайта имеет заголовок первой категории.

Заголовок первой категории

 

А теперь если перейти на любую статью или страницу, то увидим, что на всех страницах тегом H1 обозначен заголовок сайта. А нам нужно сделать, чтобы H1 был у статей и страниц, но тогда при открытии страницы у нас будет два тега H1 в исходном коде (заголовок шапки и заголовок статьи).

Делаем следующее.

Прежде чем начать редактировать, сохраните все копии файлов, которые будете изменять!!!

Заголовок сайта обычно прописан в файле Header.php, откройте его для редактирования через редактор в консоли или Ftp менеджер. Найдите строку похожую на эту:

Правка шаблона

 

Теперь нужно обернуть всю строку этим кодом:

<?php if (!is_single () && !is_page ()) :?>
Здесь ваш код
<?php endif; ?>

и должно получиться так:

<?php if (!is_single () && !is_page ()) :?><a href="<?php echo home_url(); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
<?php endif; ?>

Этот код означает, что если открыта не статья и не страница, то заголовок сайта будет первой категории в H1.

После этого кода ставим вот такой:

<?php if (is_single () || is_page ()) :?>
Здесь ваш код
<?php endif; ?>

и получается вот так:

<?php if (is_single () || is_page ()) :?><p><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></p></a>
<?php endif; ?>
Обратите внимание, что вместо H1 у меня стоит <p>

Этот код означает, что когда открыта статья или страница у заголовка сайта не будет тега, или можете поставить H2. Вместо тега H1 я сделал тег <p>, вы можете заключить в H2. К  новому тегу я сделал отдельные стили, но об этом дальше.

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

H1 у заголовка сайта

 

Исходный код заголовка сайта при открытой статьи или страницы:

Заголовки первой категории

 

Исходный код статьи:

H1 у заголовка статьи или страницы

 

Не переживайте если у Вас изменились стили заголовка (размер, цвет и т.д), все это можно сделать присвоив ему новые стили.

Меняем заголовки статей и страниц на H1

Как известно статью выводит файл single.php, а страницы page.php, их мы и будем править.

Открыв любую статью на своем сайте посмотрите с каким тегом выводится заголовок, если H1, то ни чего не меняем, а если нет, то открываем файл single.php.

Заголовок статьи Находим данную строку и меняем на H1.

Сохраняем, обновляемся и смотрим результат. Измененные стили поменяем позже.

Тоже самое проделываем со страницами сайта, изменив файл page.php.

Если на главной странице заголовки в ленте статей не H2, то отредактируйте файл index.php. Если не хотите чтобы в ленте заголовки были H2, то вместо H поставьте <p>.

В результате у Вас должно получиться: заголовок главной H1, заголовки в ленте H2, заголовки статей H1, заголовки страниц H1. Уверен у Вас это получилось.

Установка стилей для новых заголовков.

Для начала проверьте какой файл style.css используется на Вашем сайте. На этом шаблоне использовались стили, которые я так и не нашел. Для того чтобы работал стандартный файл стилей, я прописал в файл header.php вот такую строку:

Ставим после <head>

<link href="www.ege-ok.ru/wp-content/themes/zeecorporate/style.css" rel="stylesheet" type="text/css" media="screen" />
Путь до файла style.css измените на свой

После этого условия, я смог спокойно изменять все что пожелаю.

Для того чтобы все было аккуратно и красиво смотрелось необходимо установить новые стили для наших заголовков. Если у Вас особо ни чего не изменилось, то вообще супер, у меня было после изменения тегов, все съехало. За стили отвечает файл style.css

Если вы хоть немного разбираетесь в CSS, то не особо сложно все будет сделать.

Добавляем стили для заголовка главной страницы. Правой кнопкой щелкните по заголовку и выберите — просмотр кода элемента. В открывшемся окне можете посмотреть какие стили установлены для заголовка и его ссылки.

Установка стилей

 

В этом же окне (в правой части со стилями) вы можете делать временные изменения и смотреть в онлайне, что именно меняется. Я у себя уже изменил, сейчас объясню что я менял.

Откройте файл style.css, нажмите сочетание ctrl+f для поиска своего стиля (например — logo), нужно найти часть кода стилей, какую вы видели в коде своей странице. В коде элемента видно, что за вывод ссылки отвечает <div id="logo">...</div>, а ссылку я заключил в тег <p>...</p>. В правой части я создал отдельный стиль для этого контейнера ID (#logo p a). Между скобками устанавливаем все что нужно:

#logo p a{
	font-size: 1.9em; - размер шрифта
	color: #333; - цвет
	text-decoration: underline; - подчеркивание при наведении
}

Также сделал стили при наведении:
#logo p a:hover { - hover
	color: #006500; - цвет при наведении
	text-decoration: none; - убрал подчеркивание
}

Если проще, то я просто скопировал ранее используемые стили этого заголовка и добавил (p):

#logo h1 a{
	font-size: 1.9em;
	color: #333;
	text-decoration: underline;
}

#logo h1 a:hover {
	color: #006500;
	text-decoration: none;
}

#logo p a{
	font-size: 1.9em;
	color: #333;
	text-decoration: underline;
}
#logo p a:hover {
	color: #006500;
	text-decoration: none;
}

А раз мы сделали условие в файле header.php для смены заголовков на страницах, то при нахождении на главной странице будут использоваться первые два стиля.

Установка стилей для других заголовков делается аналогично. Давайте поменяем стили у заголовка статьи. Открываем любую статью и правой кнопкой жмем просмотр кода элемента, чтобы узнать какой контейнер ID отвечает за вывод заголовка. Вместо ID я  создал новый класс для заголовка, и отдельные стили.

Стили заголовков wordpress

Откройте файл single.php и создайте новый class или контейнер ID, или найдя нужный стиль заголовка в файле style.css, просто исправьте его. Я сделал новый <div class="poster_span>...</div>, назвать класс можете как желаете, главное точно такой же создать в стилях, иначе не будут стили работать.

Открываем файл style.css и пропишите класс со стилями, можете в любом месте, но чтобы проще было найти их потом, то пишите там где стили постов. Класс пишется так (.poster_span {, а если контейнер ID то так: #logo { ) Пример моего стиля:

ID и class заголовков

Сохраните, обновите и посмотрите результат. Может сразу не получиться, лично мне пришлось повозиться со стилями.

Давайте еще попробуем (для усвоения информации) сделать изменение стилей заголовка статьи в онлайн и после этого в файле стилей закрепить эти изменения.

Откройте любую статью на вашем сайте и правой кнопкой кликните по заголовку, выберите просмотр кода элемента.

Смотрите скриншот:

Изменение стилей у заголовка статей

 

За вывод стилей заголовка у меня отвечает как вы помните класс — контейнер <div class="poster_span"...</div>, и если на него нажать то появятся стили этого блока, а вы найдите свой.

Контейнер стилей

 

Появились стили у моего блока, и я могу их изменять прямо в этом окне, но после нужно изменить в файле style.css и сохранить. Для этого например кликну на размер 25px и поставлю 15px, а цвет сделаю черным.

Как изменить стиль заголовка

 

Теперь все изменения нужно занести в файл style.css. Найдите нужный класс, который отвечает за стили заголовка, в моем случае это — poster_span и добавьте новые стили. Таким образом можно изменять все что угодно на сайте.

В заключении записал для Вас 5-минутное видео, как изменить стили для заголовка, если в статье не разобрались. Видео записываю впервые, так что оно не очень качественное получилось! ;) Буду практиковать запись видео в дальнейшем. Возможно будут проблемы со звуком, наушники помогут.

 

Предыдущая статья: «Автоматическое и ручное обновление сайта на WordPress!»