Как правильно разметить шапку сайта header.php – теги h1 – h2 и их условия вывода

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

А исправления h1 – h2 “зевков” на рабочем сайте, будут трудоёмки и плачевным, в плане падения трафиков и т. п…

Напомню тем, которые решаются работать с бесплатным шаблоном WordPress: вы должны быть готовы к большой работе по доводке темы! – и удаление рекламных ссылок в футере и т.п…й котовасии только самое начало работы! и также:

 

Большинство бесплатных шаблонов Вордпресс реализованы с неверной (в плане seo) теговой разметкой страниц сайта (скажем так). Так что – придётся изловчиться и всё это шаблонное неряшество вовремя лично поправить. В противном случае множество непоняток с поисковыми системами обеспечены.

Вы готовы к невниманию ПС ?? и нулю посетителей вашего блога…

 

Не упускайте! Или ищите какие-то варианты заказа тем.

 

Не сочтите за навязчивую рекламу (конечно, это реклама, но не навязчивая, а логичная), – прочтите ЭТО ТЕМНОЕ.

 

 

 

как размечать шапку (лого) сайта тегами H1 – h2

 

 

 

 

 

 

Сразу говорю: подробно толковать не стану, ибо информации по поводу синтаксического написания кода, в сети много. Да и учиться нужно правильно и постепенно, а у нас – сегодня иная тема!

 

И !! если вы прочтёте внимательно этот пост, и потренируетесь на локалке, – многое из описанного станет понятно.

 

 

 

 

 

Вот целомудренный и чистый код, который обычно встречается в “в новых” темах:

 

 

<div class="logo">
<?php if ($theme->get_option('themater_logo_source') == 'image') { ?>
<a href="<?php echo home_url(); ?>"><img src="<?php $theme->option('logo'); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
<?php } else { ?>
<?php if($theme->display('site_title')) { ?>
<h1 class="site_title"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>
<?php } ?>

<?php if($theme->display('site_description')) { ?>
<h2 class="site_description"><?php $theme->option('site_description'); ?></h2>
<?php } ?>
<?php } ?>
</div><!-- .logo -->

 

 

У вас будет что-то типа показанного в примере выше. Обратите внимание на строки 1 (див класс лого) и 2 и 3 – основной код вывода заголовка логотипа-картинки или текстового варианта..

 

Этот код будет работать следующим образом: куда бы вы ни пошли гулять по сайту… везде переход на главную будет обозначен тегом h1. Тут врас) напрашивается логичный вопрос: а как же отдельные записи?

Правильно! и в отдельных записях тег h1 останется, но вот тайтл (заглавие записи) странички будет h2.  Это в корне неверно!! (ну, во всяком случае по seo правилам-c сумнительно)

 

Предлагаю открыть файл вашего шаблона, отвечающий за вывод отдельных страниц, это, как правило документ single.php или post-single.php и заменить следующие строки:

 

 

<h2 class="title" itemprop="headline"><?php the_title(); ?></h2>

 

Тег h2 на h1 – обращаю внимание на то, что рассматриваемые ныне теги парные!

 

 

 

Отныне у вас отдельная запись будет обозначена h1 – правильно! И таким же макаром поступайте с файлом page.php и post-page.php – отвечающим за отдельную страницу (не запись) и всеми подобными файлами…

К слову сказать, обратили внимание на атрибутику itemprop="headline" в строке??? – да, это размеченный вариант файла: микроразметка schema.org.

 

 

 

Первичный этап закончен!

 

Но, как понимаете, это только полдела! …ИБО в таком случае у нас и на отдельной страничке статьи будет два h1 – перебор (ошибка). То есть: сам логозаголовок САЙТА и теперь заглавие статьи!

Нужно это дело поправить!

 

 

 

 

Этим и займёмся:

 

 

заменим в шапке сайта стандартный вывод тегов h1 -2 -3 на SEO оптимизированный вариант

 

 

 

Нынче нам в помощь так называемые условные теги: (для примера)

 

is_category ()

 

!is_category ()

 

…и тому подобные…

 

Очень полезные “придумки” о которых станем говорить подробнее…

 

 

 

Вот полный рабочий вариант кода LOGO и заголовков записей файла header.php, – смотрите, разбирайтесь и реализуйте на своём сайте.

Обращаю внимание: я даю вариант ЛОГО с картинкой – это более сложный способ, ибо предстоит как следует поработать с файлом CSS, иначе – шапка сломается.

Как сделать шапку сайта без рисунка лого (в формате txt), расскажу ниже.

 

 

 

 

Внимательнее к путям подключения…

 

 

<?php if (is_tag ()) : ?><h1 class="site_title"><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/шаблон/images/logo.png" alt="МИХАЛИКА" title="МИХАЛИКА" />Михалика</a></h1>
<?php endif; ?>

<?php if (is_category ()) : ?><h1 class="site_title"><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/шаблон/images/logo.png" alt="МИХАЛИКА" title="МИХАЛИКА"/>Михалика</a></h1>
<?php endif; ?>

<?php if (is_page ()) : ?><h2 class="site_title"><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/шаблон/images/logo.png" alt="МИХАЛИКА" title="МИХАЛИКА" />Михалика</a></h2>
<?php endif; ?>

<?php if (is_single ()) : ?><h2 class="site_title"><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/шаблон/images/logo.png" alt="МИХАЛИКА" title="МИХАЛИКА" />Михалика</a></h2>
<?php endif; ?>

<?php if (!is_tag ()) : ?><?php if (!is_category ()) : ?><?php if (!is_page ()) : ?><?php if (!is_single ()) : ?>

<h1 class="site_title"><a href="<?php echo home_url(); ?>"><img src="/wp-content/themes/шаблон/images/logo.png" alt="МИХАЛИКА" title="МИХАЛИКА" />Михалика</a></h1>
<?php endif; ?><?php endif; ?><?php endif; ?><?php endif; ?>

 

 

 

Немного практической теории…

 

На отдельных страничках!! Тайтл статьи (при проверке “F12” или в исходном коде Ctrl+U) должен быть h1 НО!! главная теперь h2 (т.е главная, по теговому ранжированию, становится как бы второстепенной – h2) – это необходимые правила SEO.

 

 

Помните ведь: тег h1 должен использоваться на страничке только один раз! и в нашем случае именно так.

 

 

 

 

 

 

Тут важно разобраться с аргументацией (условиями) функциональных строк кода: (обратите внимание – я специально сделал строки категорий <?php if (is_category ()) : ?> и условного <?php if (is_tag ()) : ?> отдельно, чтобы было понятно).

Конечно, этот код возможно прописать иначе… всё зависит от требований админа.

 

 

 

 

Ну, давайте рассмотрим на отдельном примере:

 

 

 

как отрегулировать условия вывода тегов h1 – h2 главной страницы и отдельных записей

 

 

Рассмотрите повнимательнее строки условий ниже:

 

 

<?php if (is_single ()) : ?> ваше кодированное предложение вывода "лого" в шапке
<?php endif; ?>

 

 

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

 

Т.е  (is_single ())  прописываем или выносим значок ! из функционала (это упрощённо).

 

 

<?php if (!is_single ()) : ?> ваше кодированное предложение вывода "лого" в шапке
<?php endif; ?>

 

 

 

 

 

 

 

Далее…

 

…конечно обратили внимание, у меня в статье способ – картика-логотип!

Я его предложил для тех, которым этот вариант шапки более симпатичен. Но, коли вам нужен обычный текстовой вариант, в этом случае достаточно убрать кодированные строки вывода картинки img. А именно вот эти:

 

 

<img src="/wp-content/  ....  logo.php/ alt="имя" title="имя" />

 

 

 

 

Вот и занавес близок…

 

Ну, думаю, в общем понятно изложил… Хотя мог и запутать ненароком)

 

Вот ещё что: вам потребуется подкорректировать и иные файлы, к примеру CSS, в общем, сложного ничего, но новичку трудновато.. и стань я в статье подробно расписывать многие поправки, то – точно бы запутались…

 

А посему, будет правильнее, если вы о чём-то конкретном поинтересуетесь… есть же комментарии…

 

 

 

 

 

 

На этом у меня на сегодня решительно всё!.. можно и отдохнуть мальца

 

 

 

 

 

А вот как обозначать в шапке description (дескрипшн – описание блога) в следующих моих публикациях.

 

 

 

Кодекс аргументов функционалаWP.

http://codex.wordpress.org/Conditional_Tags

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress