студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Техническое SEO
студия занимательная МИХАЛИКА

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

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

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

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


 

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

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

 

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

 

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

 

 

 

 

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

 

 

 

 

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

То есть — странички категорий (category), тегов (tag), архивов (archive) будут всегда под тегом h1. И, соответственно, тайтлы (title) статей 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 должен использоваться на страничке только один раз!!

 

 

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

 

 

 

заменим в шапке сайта стандартный вывод тегов 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 должен использоваться на страничке только один раз! и в нашем случае именно так.

 

 

 

 

разметить шапку header.php тегами h1 — h2

 

 

Тут важно разобраться с аргументацией (условиями) функциональных строк кода: (обратите внимание — я специально сделал строки категорий <?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; ?>

 

 

 

Итак, функциональный вывод проделанной работы:

Если вы находитесь на странице тегов, категорий или главной то — файл header.php обусловит (для вордпресс) генерацию странички соответственно, сравнивая условия, например, с (is_tag ()) /строка 1/ и обычный вариант h1 !! (строки в коде выше 1 и 3.)

 

Но, когда вы переходите на отдельную страничку записи, в этом случае выводимое ИМЯ САЙТА — home_url(); — в файле header.php пристёгнуто как бы к отработке файла single.php, отвечающего за вывод (к генерированию)) отдельной записи  (скажу просто: инвертирует условия заданных заголовков значком !) и, соответственно, в этом случае выводится инвертированный заголовок главной h2.

Ну а само заглавие статьи будет h1 которое мы задавали в первой части настоящего поста.

 

Вся аналогичная отработка условий касаема и остальных разностных страничек сайта…

И помните: все прописанные условия тегов h1 - h2 файла header.php выполняются относительно отображаемой страницы браузером. Другими словами — на основании функций отрабатываемых файлов-документов single.php category.php и тому подобных… т.е с их условиями отображения!!

 

В общем, ничего страшного в сегодняшней работе нет, чтобы её не выполнить!

…попристальнее вглядывайтесь в строки рабочего кода, пробежитесь ещё разок по статье и постарайтесь понять принцип вывода в шапке сайта тегов h1 и h2… ибо это важно!!

 

 

 

 

Далее…

 

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

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

 

 

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

 

 

 

 

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

 

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

 

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

 

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

 

 

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

 

И кстати же, очень рекомендую ЧИТАТЬ о том, как убрать теги h3 -h4 в заголовках сайдбара и приветственную строку h3 перед формой комментирования.

 

 

 

 

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

 

 

 

 

 

Содружество web-маньеристов ATs и К

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

 

 

 

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

http://codex.wordpress.org/Conditional_Tags

 

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

 

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


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

  1. Здравствуйте Миша!
    У меня что-то не получается создать условия распределения тегов h1 b h2/ Понимаю, что где-то путаюсь с
    <?php endif; ?> что ли…
    Белиберда какая-то и на сайте (в файле) и в исходном коде.
    Поможете?

    Ответить - Вика-Вика

    • Здравствуйте, Вика!

      Вероятно, где-то допускаете ошибку.

      Вы мне пришлите файлик header.php на почту (мой адрес есть у Вас в письме о комментариях) — я посмотрю и попытаюсь помочь — сделаю, как первому комментатору и мастеровому.

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

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