Оптимизация заголовков виджетов в шаблоне WordPress

Вчера скачала учебник по SEO-оптимизации и долго его изучала.

А потом посмотрела на шаблон своего блога – и ужас-ужас! – названия виджетов выделены заголовками h3, а в тексте предыдущих постов я использовала h4. Самое обидное, что бот гугла это уже заметил, и теперь, по его мнению, ключевые слова моего блога это “комментарии” с 94 вхождениями и “записи” с 62 :(. Непорядок, надо исправлять. Поэтому этом посте я расскажу, как оптимизировать заголовки виджетов.

Заголовками должен выделяться наиболее значимый текст, к которому не относится название виджетов. К тому же, оно повторяется на всех страницах блога, тем самым влияя на результаты индексирования страниц. Из-за этого я решила заменить h3 на p в названиях виджетов.

При помощи дополнения Firebug для Firefox я определила, какой стиль отвечает за вывод заголовков виджетов. У меня это widget-title.

Далее, идем в файл style.css. Ищем в нем что-то похожее на h3.widget-title, и заменяем на div.widget-title. Так мы создадим стиль оформления для новых заголовков виджетов, который будет в точности повторять предыдущий.

Теперь осталось заменить тег h3 на p в файле functions.php вашего шаблона. Находим там вот такой код:

и вместо h3 пишем div, и добавляем <p>.

В итоге, у меня получилось следующее:

Проделываем те же самые операции с другими сайдбарами, если они есть.

Теперь ненужные заголовки не будут отвлекать поискового робота от содержимого вашего сайта.


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

Чтобы проверить, правильно ли вы используете теги section и h1-h6, можно использовать этот онлайн-инструмент.




36 комментариев к “Оптимизация заголовков виджетов в шаблоне WordPress”

  1. Виктор Всеволодович

    Здравствуйте Ирина!

    Зашёл к Вам с проекта HelpMyBlog.

    Я не знаю, на какую аудиторию Вы рассчитываете, но для меня здесь многое не понятно. Хотя c HTML я немного знаком.

    Хотелось бы, чтобы Ваши статьи были доступны и тем, кто не изучал эту премудрость в школе.

    Ответить
    • oriolo

      Здравствуйте, Виктор Всеволодович!
      Мой блог расчитан на веб-мастеров, которые ещё не совсем профессионалы, но уже и не новички. То есть для тех, кто знает html и css, и немного php.
      А также в блоге публикуется информация, которую я сама недавно узнала и которой хотела бы поделиться.
      Хотя Вы правы, я подумаю над тем, чтобы сделать рубрику для начинающих.
      Если Вам что-то не понятно, то спрашивайте в комментариях, я обязательно отвечу.

      Ответить
  2. Ольга

    Ирина, здравствуйте! Я присоединяюсь к мнению Виктора Всеволодовича. Очень интересная информация на Вашем блоге и мне она очень пригодилась бы, если бы была более оптимизирована под “продвинутых чайников” :-)) Я тоже с Helpmyblog 🙂

    Ответить
    • oriolo

      Ольга, здравствуйте!
      Я постараюсь учесть Ваше мнение 🙂
      Дело в том, что я сама уже давно не считаю себя новичком – 6 лет опыта создания сайтов, и работа веб-мастером в фирме, занимающейся их разработкой, дают о себе знать 🙂
      Вы же понимаете, что расписывать мелочи, которые для человека, давно находящегося в теме, немного скучно, да и лень если честно 🙂
      Для меня этот блог является еще и стимулом для саморазвития, вот и пишу я для более “продвинутых”.
      А что именно Вам не понятно, например в этой статье? Спрашивайте, я отвечу обязательно!

      Ответить
  3. Ольга

    Ирина, спасибо за проявленный интерес к моему сайту!
    Что касается Вашего. Например, эту статью хорошо бы начать с освещения самой проблемы, т.е. чётко обозначить то, что Вы модернезируете и зачем это надо. Со 2-го абзаца мне уже не понятно, что значит посмотреть шаблон блога… И где смотреть как обозначаются виджеты 🙁 Понятно, что вопросы претендуют на 1 место по глупости, но разобраться ужас как хочется! Вобщем, пожелание одно – сначала опишите проблему которую мы решаем и затем пошагово расскажите/покажите как её решить (заходим туда-то, нажимаем то-то, видим вот это. Меняем это на то и нажимаем обновить. Что-то в этом роде). С Вашей помощью численность чайников может резко сократиться 🙂 Если всё будет понятно для таких как я, мы будем рекламировать Ваш блог везде!

    Ответить
    • oriolo

      Спасибо, теперь я поняла 🙂

      >где посмотреть шаблон блога
      Это то же самое, что посмотреть исходный код страницы. Если у вас браузер FireFox, то щелкаете правой кнопкой мыши, и нажимаете “исходный код страницы”. Откроется большая куча кода 🙂 Это и есть код шаблона блога. Еще можно выделить мышкой необходимый элемент, и нажать “посмотерть исходный код выделенного фрагмента” – тогда соответственно будет показан только код выделения.
      В исходном коде можно найти информацию о тегах, которые использует страница. Для придания легкости этому процессу существует дополнение для Firefox, называется Firebug.

      >где смотреть как обозначаются виджеты
      вот в исходном коде и смотрите 🙂 ищете там название вашего виджета. Например, у меня это “свежие записи”. Сейчас у меня рядом с этими словами стоит тег p. А раньше был h3.

      Заменить на р это надо для SEO оптимизации – то есть чтобы заголовки в самой статье у вас были выше по приоритету для поискового робота, чем заголовки виджетов.

      О том, как это исправить, я написала в статье)

      Уф)) Надеюсь, я понятно объяснила.

      Ответить
  4. Ольга

    Я подписалась и на рассылку новостей, и на уведомления о новых комментах 🙂

    Ответить
  5. Ольга

    Огромное спасибо! Всё поняла. Удачи и процветания Вашему сайту!

    Ответить
  6. Марио

    Спасибо за нужную информацию.
    И почему только в вордпрессе все время делают заголовки виджетов в h3 не понимаю. Все время их приходится исправлять, в целях оптимизации сайта. Рад что я такой не один 🙂

    Ответить
  7. Простой

    Нужно быть внимательным при выборе шаблона.

    Ответить
    • oriolo

      Почему-то все шаблоны, которые я скачивала, приходилось потом допиливать, и чаще всего именно на предмет использования тегов h.

      Ответить
  8. Галина Исаева

    Мне очень интересна и тема вашего блога, и вопросы, что вы поднимаете.Хочу научиться полноценной вёрстке блогов, пока могу только или интуитивно находить, где внести изменения, или по подсказке…не хватает опыта и системных знаний.Поэтому подписываюсь на ваш блог! Думаю будет, что поучить!

    Ответить
  9. Галина Исаева

    А если h расставлены просто по убывающей? Для статьи h3,для виджета h2…Это же уже нормально для оптимизации?

    Ответить
    • oriolo

      То, что Вы написали, это по возрастающей. И в любом случае h в виджетах это плохо. У меня на блоге так: на главной название блога h1, названия постов h2; на внутренних заголовок статьи h1, подзаголовки в ней h2-h6, заголовок блога p. Все остальное на всех страницах тоже p. Вообще, заголовками надо выделять именно заголовки в тексте, и больше ничего.

      Ответить
  10. Галина Исаева

    Ой, ну да…наоборот же…Спасибо, поняла.

    Ответить
  11. Павел

    Советую еще одну вещь вам.

    Работающие скрипты такие как этот

    (скрипт с вашего блога с этой страницы)

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

    Ответить
    • oriolo

      Павел, код не отобразился. Я уверена, что какое-то количество внешних ссылок для страницы необходимо, а тем более для страницы блога. Это придает странице естественность в “глазах” поисковика. А noindex вроде бы больше не работает?

      Ответить
  12. Павел

    Работает конечно же, им закрывают от индексации скрипты, которые невозможно закрыть через ноуфаллоу.

    Еще совет. У меня тоже была проблема с заголовками виджетов, решил ее так же как и вы, но добавил еще одну хитрость.

    Заходим в style.css и находим там место отвечающее за стиль заголовка виджета в h2, у меня все это начиналось с sidebar, там вместо h2 пишем p или тот тег который мы поставили в funktions.php и вуаля, внешний вид у нас такой же как и был при h2 но это уже другой тег совсем, который не будет портить оптимизацию

    Ответить
    • oriolo

      Павел, а в чем собственно хитрость? Я вроде-бы то же самое описывала: меняем тег заголовка виджета h2 или h3 на div в style.css, затем в functions.php. Или я что-то не понимаю?
      По поводу noindex: мне встречались утверждения, что поисковики “понимают”, что в этот тег обычно оборачивают ссылко-помойки, а уже какой вывод они сделают, это другой вопрос… Или вот например тут (http://devaka.ru/articles/nofollow-and-noindex-now) пишут, что noindex исключит из индексирования часть текста, но ссылки при этом будут проиндексированы.

      Ответить
  13. Вячеслав

    Класс. То что искал.
    Смотрю ты и правда поменяла заголовки на дивы. Но только h3 осталось или поменять или убрать. “H3: Поделиться мнением Отменить комментарий”
    Спасибо!

    Ответить
  14. Вера

    Здравствуйте! Спасибо за статью, оптимизировала заголовки виджетов, только вот один вопросик, как все таки выделить в сайд баре заголовки виджетов, а то так не очень красиво смотриться? Сама пробывала, размер шрифта увеличила, а выделить так и не получилось

    Ответить
    • Ирина

      Здравствуйте! К сожалению, не поняла, что Вы имеете в виду под “выделить”. С помощью CSS можно, например. Для .widget-title пропишите необходимые значения.

      Ответить
  15. Вера

    Хотела спросить еще, после оптимизации заголовков виджетов не будет дублежей записей в индексации?

    Ответить
  16. Александр

    Я так понял, что у вашего блога поменялся дизайн, так как теперь h3 присутствуют везде…

    Так H3 не является более или менее серьёзной проблемой теперь?

    Ответить
    • Ирина

      Александр, если на Вашем сайте используется HTML5, внутри тега section допустимо использовать заголовки любого уровня. Это необходимо для семантики веб-страницы. Так что если это условие собдюдено, то проблемы нет.

      Ответить
      • Denis

        Ирина, в сети много мнений по этому поводу. Семантика и СЕО как бы разделились. Вот почитайте статейку wpnew.ru/raskrutka-bloga/seo_optimizaciya/h1-h2-h3-h4-seo.html
        Интересно ваше мнение на этот счет.

        Ответить
        • Ирина

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

          Ответить
  17. Максим

    Случайно наткнулся на данную статью в вашем блоге, начал проверять и понял, что описываемый H3 присутствует и у меня в заголовках виджета. Начал исправлять, немного повозился из-за своей невнимательности, но все получилось.
    Благодарю за полезный материал! Уже неоднократно ваш блог помогал мне, за это вам Ирина большое спасибо!
    Есть два вопроса, раз гугл уже давно “съел” мои h3 в виджетах, то будут ли внесены поправки после изменения в заголовках виджета? Нужно ли менять в других местах малозначительные подписи h3-h4 на сайте?
    Заранее спасибо за ответ!

    Ответить
    • Ирина

      Да, через некоторое время поисковики переиндексируют ваш сайт.
      Чтобы проверить, где еще нужно удалять теги заголовков, и нужно ли вообще, можно использовать этот инструмент: http://gsnedders.html5.org/outliner/. Вводите адрес страницы, и если полученная структура выглядит верно (для значимых разделов есть заголовки), то ничего менять не нужно.

      Ответить
      • Максим

        Ирина, спасибо за дельный совет! Проверил рекомендуемым сервисом главную и страницы статей, теперь понял над чем нужно еще поработать 🙂

        Ответить

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