Блог Алексея Гончарова
Не пропустите новые статьи!

Новые статьи блога на Ваш e-mail:

Канал блога на YouTube
Где в мире читают блог
Архивы
Волшебная кнопка

Про теги h1 h2, или зачем я переделал свой шаблон сайта wordpress

теги h1 h2 wordpressЗдрасьте вам! :)    Сегодня поговорим про теги h1 h2 и про шаблон сайта wordpress. Как и обещал, раскрою вам одну причину переделки своей темы сайта, о которой узнал относительно недавно, но которая, как оказалось, очень важна для поискового продвижения сайта, посещаемости и всего остального.

Что такое теги h1 h2 h3 и зачем они нужны?

Если вы уже не первый день в Интернете, то наверняка знаете о различиях видимого и «невидимого» содержимого веб-страницы. Или, иначе говоря, то, что мы с вами видим на своих экранах мониторов в окне браузера и то, что «видят» поисковые роботы в тех же окнах – совсем разные вещи. Собственно, для того-то и нужен интернет браузер, чтобы перевести неудобоваримую крокозябру *crazy*   из кода в понятный для человеческого восприятия набор предложений, картинок, видео и звуков на странице. Мы видим слова с картинками и видео, а роботы только код.

Но, код есть более важный и менее важный. Для нас, людей, это выражается в высоте шрифта кусков текста, его жирности, подчеркивания или других атрибутах, заботливо проставленных вебмастером, текст сотворившем. А для роботов, как и программ, код распознающих, это выражается в наличии специальных кусочков кода – тегов. Так вот за степень важности кода и отвечают теги h1, h2, h3 и так далее, до h6. Это, если вкратце и не вдаваясь в тонкости технических дебрей, которые вы запросто можете почерпнуть здесь, или, например в Википедии, когда почитаете про структуру HTML-документа.

Существует определенная иерархия в важности слов, заключенных в теги h1, h2, или h3 и т.д. Те слова, которые будут обрамлены в h1, для нас будут видны, как слова с самым крупным шрифтом на странице, а для робота они же будут иметь первостепенную важность в документе, ибо именно по ним он и будет ориентироваться, ранжируя и индексируя их. Тег h2 уже будет проигрывать по важности для робота перед h1 и по размеру шрифта для нас, но выигрывать перед h3. И так далее – h1 самый значимый, h2 – менее значимый… h6 – наименее значимый. Как и сами заголовки – первый самый крупный, шестой – самый мелкий.

теги h1 h2 h3 h4 h5 h6

Какое отношение имеют эти теги к wordpress и шаблону сайта?

С сайтом на wordpress всё ещё немного запутаннее. Ведь сайт не «стационарный», а «живой» – его главная страница постоянно меняется из-за ленты новостей и новых постов, если, конечно, она не настроена иначе.

Так вот, на главной странице, там, где есть только короткие анонсы постов, тег h1 должен быть только у названия сайта – у его заголовка и больше нигде! У подзаголовка (описания сайта) и заголовков статей в анонсах должен быть уже h2, в сайдбарах тоже не должно быть h1, только h2 или ниже.

На странице каждой конкретной страницы и/или статьи блога картина уже меняется кардинально. Здесь, в полном виде записи уже название статьи должно быть в теге h1, как и название (заголовок) сайта, а подзаголовок сайта (слоган или описание) должен быть h2 вместе с сайдбарами. Заголовки внутри записи должны быть тоже h2 или h3.

Как вы уже догадываетесь, за весь этот набор тегов и отвечает шаблон сайта wordpress. А поскольку большинство начинающих блогеров, ищут эти шаблоны в бесплатном доступе в Интернете, благо их там полно, то мало кто задумывается о правильной вёрстке такого бесплатного шаблона (как и я сам вначале). Что, в итоге, может привести сайт к плачевным последствиям, как фильтры от поисковиков, или и того хуже – бан, то есть полное исключение из поиска страниц сайта. Но, как говорится, знал бы прикуп – жил бы в Сочи! Но то если бы, да кабы…

Ещё раз, коротко подытоживая и для исключения путаницы, приведу список нужных тегов.

На главной странице блога wordpress:

  1. Заголовок блога (название сайта) – тег h1.
  2. Подзаголовок блога (описание) – h2.
  3. Названия постов – h2
  4. Заголовки в сайдбарах  – h2.

В статье и на стационарной странице блога:

  1. Заголовок блога – h1
  2. Подзаголовок блога – h2.
  3. Заголовок статьи/страницы – h1.
  4. Заголовки сайдбаров – h2.
  5. Подзаголовки внутри статьи/станицы – h2, h3.

Тег h1 является самым значимым из всех остальных тегов заголовков. Он имеет самый большой вес у поисковиков, поэтому очень важно его использовать для правильного продвижения блога. А ещё лучше, когда в заголовке поста есть главное ключевое слово, тогда оно автоматически будет заключено в самый весомый тег h1. *secret*   Улавливаете? ;)  Но усердствовать не стоит! H1 с ключевиком должен быть один на статью, иначе можно получить санкции, например, загреметь в бан.

Проверить наличие правильных тегов на сайте можно элементарно: просто нужно просмотреть исходный код нужной страницы сайта. Для этого в любом браузере нажмите комбинацию клавиш CTRL+U или кликните по свободному месту сайта правой кнопкой мышки и выберите в появившемся меню пункт Просмотр кода страницы (для Хрома) или Исходный код страницы (для Мозиллы), и вы увидите тот самый «невидимый» код сайта. Чтобы было проще искать код заголовков, скопируйте их, а затем в исходном коде нажмите CTRL+F и в поисковую строку вставьте – браузер найдёт то место кода, где расположен заголовок и его код. Или ещё проще – кликните правой кнопкой мыши на заголовке и выберите в контекстном меню Просмотр кода элемента (для Хрома), или Исследовать элемент (для Мозиллы) – появится код этого элемента.

Например, заголовок сайта на главной выглядит сейчас так:

тег h1

Заголовок анонса поста на главной у меня сейчас выглядит так:

тег h2

А на самой полной записи уже так:

тег h1 в заголовке поста

Если у вас картина примерно такая же, то вам не о чем беспокоиться, с чем и поздравляю! *bravo*  У меня же проблема на старом шаблоне (до обновления дизайна) была в том, что у меня везде код заголовка статьи был h2, а исправить у меня это не получалось из-за мудрёной верстки шаблона :-(  Оказалось, что это был глюк программы Artisteer 3, в которой я тогда сделал свой первый шаблон. Печалька   :cry:   …

Пришлось решать проблему кардинально и искать новую версию программы, «лепить» новый шаблон, но подробности вы уже знаете и видите. Так что, учтите, если вам удалось где-то найти шаблон изготовленный в 3-й версии программы Artisteer, то в нём будет такой «косяк», с которым поисковым роботам будет трудно правильно ранжировать ваши посты из-за отсутствия в их заголовках тега h1.  :negative:

Тоже самое касается и скачанных бесплатно шаблонов wordpress – помните, я писал про нюансы установки темы на сайт, так к ним нужно добавить ещё и этот, касающийся тегов h1, h2, h3. А потом удивляемся – откуда фильтры, бан и прочие «прелести»? А всё оттуда :-(   … Не всё сразу становится явным и очевидным, к сожалению.

Но и это ещё не всё! Есть ещё один момент, связанный с тегами и шаблонами.

Если на главной, шаблон делает названия анонсов статей активными ссылками, то это правильно и так и должно быть – чтобы пользователь мог зайти по ссылке и почитать ваш пост. Но если в самой статье название тоже остаётся активной ссылкой, то это неправильно и так быть не должно! *ne-a*    Статья не должна ссылаться сама на себя! Проверьте и исправьте!

Для устранения этих недостатков вам нужно зайти в редактор файлов вашей темы (шаблона) и там исправить код. За вывод правильного кода отвечают файлы single.php для записи, page.php для страницы, header.php для заголовка сайта (шапки) и sidebar.php для сайдбаров.

Итак, в single.php для записи и в page.php для страницы соответственно ищем примерно такой код:

исходный код

И меняем его на такой:

конечный код

Кстати, если после изменения тегов ваши заголовки стали огромными, то кроме этих файлов вам ещё придётся поковыряться и в стилях style.css, чтобы восстановить прежний размер шрифта.   :shock:    Без этого, увы, никак.  *sorry*

Но одно дело читать. А другое дело видеть и повторять, правильно?  Поэтому продемонстрирую вам видео, на котором автор, Ильнур Юсупов подробно рассказывает и показывает про теги wordpress, их значение и исправление шаблона. Признаюсь, что именно после просмотра этого видео я и задумался о переделке своего шаблона сайта. Ведь если теги h1 h2 неправильные из-за шаблона сайта, то продвижения не видать!

Надеюсь, пост был вам полезен. Обязательно следите за выходом новых постов блога, есть идеи! ;) Да, отпишитесь о ваших результатах проверки тегов – что у вас с шаблоном? Приятного просмотра и правильных вам тегов!  :bye:

 

Пройдись по кнопочкам, расскажи о статье друзьям - это к деньгам!

Новые статьи блога на Ваш e-mail:

18 комментариев: Про теги h1 h2, или зачем я переделал свой шаблон сайта wordpress

  • Спасибо, вроде получилось. Но теперь, как Вы и писали, заголовки стали огромными. Если будет время и возможность может подскажете как и это исправить?
    У меня всё было не так как в Вашем образце, пришлось искать дольше (долго терзали сомнения, а вдруг это все-таки не то)

    • Чтобы размер шрифта заголовков привести в приемлемый вид, надо залезть в таблицу стилей – файл style.css, найти там строку вроде :scratch: art-postcontent h1 (h2, h3 и т.д.) и там найти строку, отвечающую за стиль шрифта и его размер в пикселях, что-то вроде: font-size: 28px. Цифра – это высота БОЛЬШИХ букв шрифта в пикселях – поиграйтесь с этой настройкой. Старайтесь делать так, чтобы зрительно высота шрифтов заголовков отличалась друг от друга хоть на 2 пикселя – чтобы не сливалось всё зрительно. Но, Раиса, ОБЯЗАТЕЛЬНО(!!!) сделайте исходную копию файла перед редактированием (про это здесь), или защитите файл перед его редактированием (про это писал здесь) иначе сайт может перекосить до неузнаваемости! *scare*
      Я специально не описывал всё это в статье, потому что шаблоны у всех разные и их вёрстка у всех отличается – сильно много нюансов!

  • Автор молодец респект и уважуха, единственное, что люди делают сайты не только на прессе, но и на других движках, но суть одна у всех, Спасибо! :)

  • Если в шаблоне одной записи прописать тег h1 для заголовка статьи и для заголовка блога, получается 2 тега h1 на страницу, что категорически не допустимо. Для главной нужен динамический h1

  • В сайдбарах сделал h3, в загаловках поста h1 в подзагаловках h2, немного по другому, ну думаю тоже норм, за пост спасибо :good:

  • а на главной как прописать h1, не выходит

  • Подскажите пожалуйста -как быть на моем сайте…у меня такая же картина как была у автора этого блога!!Это мой тестовый сайт и я настраиваю этот шаблон-дак вот на главной все нормально,но сама статья в тегах h2 идет….??

    • Если статья на главной в h2, то это нормально, а если в самой статье, то нет – надо исправлять.

      • придеться ждать обновления от разработчиков-я шаблон покупал-обещали на днях

  • Леш, пришлось, таки, опять вернуться к твоей статье. У меня вобще с тегами бред в новом шаблоне. Не могу найти ни одного, как у тебя в примерах,кода.

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

  • Как обычно, очень подробно и понятно написано. Даже для чайников должно быть понятно о значении тегов.

    • Спасибо, Лидия :) Только давно мы сами-то были чайниками? ;) И нам-то этого никто не рассказывал, к сожалению :aga:

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

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

:) 
*hi* 
;) 
:-( 
:good: 
:aga: 
*blush* 
:negative: 
:yahoo: 
B-) 
*bravo* 
*klass* 
:shock: 
:-)) 
Больше смайлов!..
 
Обменник.ws » Автоматический обмен Webmoney