Как правильно настроить заголовки в статьях с точки зрения SEO и не только

Настраиваем заголовки статьиНекоторое время назад я рассказывала, как настроить заголовок блога (в моем случае ДЕЛАЙ И БОГАТЕЙ!). Речь шла о том, чтобы на главной странице он был Заголовком 1 (<h1>...</h1>), а на всех остальных страницах — простым текстом с гиперссылкой на главную.

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

Во-первых проверим, как в теме маркируется заголовок статьи. Для этого идем в админпанель Внешний вид-Редактор и открываем файл single.php. Там находим строчку  <?php the_title(); ?>:

Zagolovok

И проверяем, какие теги ее обрамляют. Нам надо, чтобы это были <h1></h1>. У меня изначально были прописаны тэги <h2></h2> — ведь <h1></h1> были отведены для заголовка блога. Так же настроены многие бесплатные темы.

Не забудьте сохранить изменения!

Таким образом заголовок статьи у нас маркирован тегом <h1>. Если нужны разделы и подразделы в статье, то их будем маркировать тегами <h2> и <h3> соответственно. Причем следует помнить, что не рекомендуется использовать <h3>, если нет <h2>.

Все? С точки зрения SEO — да. А вот с точки зрения читабельности, скорее всего, еще придется повозиться с настройками. В большинстве тем заголовки сделаны возмутительно огромного размера.

У меня изначально они выглядели так:

Заголовок 1

Заголовок 2

Заголовок 3

После моих настроек стало выглядеть вот так:

Заголовок 1

Заголовок 2

Заголовок 3

По-моему, стало лучше :).

Кто не знает, как достичь подобного эффекта — делюсь опытом.

I способ настроить заголовки — без ковыряния в шаблоне

Изменить внешний вид заголовка можно путем задания атрибута style к тегам заголовка.

Т.е. если мы хотим задать формат заголовка 2, мы переходим в текстовый редактор и пишем открывающий тэг не просто <h2>, а <h2 style="..." >, и в кавычках прописываем желаемые настройки. Например,

  • размер шрифта font-size : 14px; — высота шрифта 14 пикселей;
  • гарнитура шрифта font-family :Arial; — тут можно перечислить несколько через запятую, тогда при отсутствии у пользователя первого из них, будет браться следующий из списка;
  • вид шрифта weight : bold; -  жирный или обычный (normal);
  • цвет шрифта color:blue;  — для стандартных цветов можно использовать текстовые имена (red, black), либо задавать в шестнадцатиричном коде (например, #f98b90).

Так стиль моего заголовка будет выглядеть следующим образом <h2 style="font-size: 1.5em; line-height: 1; margin-bottom: 1em; font-family : Tahoma;" > Заголовок 2 </h2>

Явно неудобно. Каждый раз так надоест стили прописывать. Такой способ, на мой взгляд, хорош, если какой-то один из подзаголовков надо выделить, чтобы показать читателю, что он важнее других.

Поэтому рассмотрим

II способ настроить заголовки — с внесением изменений в шаблон

Чаще всего, стили заголовков прописаны в таблице стилей (style.css). И это в общем-то логично :).

Но мне не повезло. Изучив этот файл чуть ли не под микроскопом, ничего похожего на стили заголовков я не обнаружила. Пришлось воспользоваться помощью Google Chrome.

В статье я выделила мышкой заголовок второго уровня. Кликнула по нему правой кнопкой мыши и выбрала в контекстном меню «Просмотр кода элемента».

Chrome

Оказалось, что у меня стили заголовков прописаны в файле screen.css

Дальше все просто. Открываем файл в редакторе, и изменяем стилевые настройки заголовков.

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

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

Единственное, что вызвало у меня в первый момент недоумение — непонятные мне единицы измерения размера шрифта — какие-то em, вместо привычных пикселей. Пришлось самообразовываться. Оказалось, что так обозначается  в CSS2 относительная единица длины, равная размеру текущего шрифта. Т.е. если для h1 у меня задан font-size: 2em; то это значит, что размер заголовка будет в 2 раза больше, чем у основного текста.

Ну вот и все, что я хотела рассказать о настройке заголовков в статьях и на блоге в целом.

 

 

 

 

А теперь второе задание Марафона Эрудитов. Его «стоимость» я оцениваю в 2 балла. Сегодня не буду вас утомлять пазлами — картинку покажу сразу:

Марафон Эрудитов задание 2

Волк и Заяц танцуют здесь всемирно известный танец, исполнение которого на Зимней Олимпиаде принесло нашей стране (СССР, то есть) первую в истории золотую медаль в новом олимпийском виде спорта. Где проходила эта олимпиада?

 

 

Хотите первым узнавать, что нового произошло на блоге «ДЕЛАЙ И БОГАТЕЙ!»? Подпишитесь на обновления!

Получать статьи на e-mail


Понравилось? Поделись с друзьями!

Комментарии:

17 Комментариев

  1. Полезная статья, очень помогла

  2. Спасибо большое, я уже читала, что в большинстве тем для заголовков используются теги h2 и лучше его поменять, но что и как исправлять не знала. А теперь все исправила

  3. Спасибо, Катерина пойду исправлять свои заголовки.

  4. Спасибо за статью, много нового узнал))

  5. Все верно) Только нужно наверно ещё и в архивах, рубриках так же поменять там ведь так же в H2 стоят или я ошибаюсь?

  6. Спасибо за полезную информацию! На этот момент я не обращал внимание. Проверил свою тему. К счастью все оказалось правильно, менять ничего не пришлось.

  7. Екатерина, спасибо. Все переделал, правда у меня нет названия сайта. Оно в виде картинки. Заголовки поменял в таблице стилей (style.css).

  8. Я тоже примерно через 5 месяцев только узнала, что на моём блоге для заголовка используется H2. Пришлось менять. Сама разобралась.

  9. Катерина, спасибо за подробную информацию. Проверила, h1 на месте и с заголовками порядок.

  10. Еще раз вернулась к этой статье, сейчас создаю второй блог и снова надо отредактировать заголовки. И почему создатели тем, сразу не создают оптимизированные заголовки, чтобы не приходилось переделывать

    • Я с каждым блогом, который настраиваю для кого-то, сюда возвращаюсь :) Эдакая шпаргалка для самой себя получилась — все в голове держать невозможно :)
      А у Гудвина, вроде, оптимизированные темы?

    • Анна:

      Женя, а на какую тему новый блог, если не секрет?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *