Игра по правилам, или Правильный шаблон для сайта — версия Web-Кошки

Доброго дня!

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

Итак, сразу списочек для понимания того, о чем пойдет речь, а далее разберем все более или менее подробно.

 

Каким должен быть правильный шаблон?

1. Отсутствие циклических и дублирующихся ссылок
2. Отсутствие дублей контента в анонсах на главной и страницах архивов
3. Правильная иерархия тегов заголовков
4. Заголовки не должны быть ссылками
5. Валидный код
6. Адаптивность под мобильные устройства
7. Микроразметка

А теперь подробнее о каждом из этих пунктов: что, зачем и почему.

Отсутствие циклических ссылок

Прежде всего, что такое циклические ссылки? Это ссылки, которые ведут на ту же страницу, на которой они расположены. За примером далеко ходить не надо: ссылка с логотипа всегда ведет на главную страницу. Даже если вы и так находитесь на главной, лого все равно кликабельно, верно?

Аналогично с меню — если у вас в меню выведены категории, и вы зайдете в любую из этих категорий, то в меню появится циклическая ссылка — ведущая на текущую страницу.

Почему это плохо? Ну во-первых, это не очень удобно обычным пользователям… Человек может запутаться, кликать на лого, находясь на главной — а ничего не происходит, он плюнет и уйдет. Но это б полбеды, потому что таких неудачливых посетителей единицы — все ж грамотные стали 🙂 А вот то, что мы заставляем кружить поисковых роботов, подсовывая им такие ссылки — это уже действительно неприятно.

Что делать?

Поскольку, по моему опыту, именно ссылки с логотипа и меню являются генераторами таких циклических ссылок, то я покажу вам решение именно для этих случаев. Но в коде поковыряться придется.

Убираем ссылку с логотипа на главной

Логотип обычно выводится в файле header.php вашей темы оформления. Чтобы убрать с него ссылку с главной страницы, нужно написать там простейшее условие, которое будет проверять, находимся ли мы на главной или внутри. В первом случае мы получим просто картинку, без ссылки, а если внутри — ссылка останется. Вот как это выглядит в коде моего шаблона:

<?php if( is_front_page() ){?>
        <img class="logo" alt="Авторский блог Web-Кошки" src="<?php bloginfo('template_url'); ?>/images/tn_mesocolumn_header_logo.png" />
<?php } else {?>
        <a href="/" rel="nofollow"><img class="logo" alt="Авторский блог Web-Кошки" src="<?php bloginfo('template_url'); ?>/images/tn_mesocolumn_header_logo.png" /></a>
<?php } ?>

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

В третьей строчке продолжение условия «иначе», и в четвертой код лого со ссылкой на главную.

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

Любопытные спросят: а зачем ссылке на главную «nofollow». Расскажу))

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

Убираем циклические ссылки с пунктов меню

Для этого достаточно добавить в файл functions.php вот такой код:

function no_link_current_page( $p ) {
    return preg_replace( '%((current_page_item|current-menu-item)[^<]+)[^>]+>([^<]+)</a>%', '$1<span>$3</span>', $p, 1 );
}
add_filter('wp_nav_menu', 'no_link_current_page');

После чего ссылка с текущего пункта меню будет убрана, но зато, скорее всего, у вас слетит и оформление этого пункта в css. Это потому, что оно привязано к тегу ссылки, который мы убрали.

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

Дублирующиеся ссылки

Это ссылки, которые ведут на одну и ту же страницу. Смотрите: с главной из анонсов на страницу статьи обычно идет ссылка с заголовка — один! С миниатюры — два! С кнопки «Читать далее» — три. Да еще и с количества комментариев — четыре!

Зачем нагружать поискового работа, заставляю ходить разными путями, а приходить в одно и то же место? Потому я обычно убираю кнопку «Читать далее», убираю ссылку с комментариев, а ссылку с заголовка и миниатюры объединяю в коде. Все чище, проще и прозрачнее выходит.

Дублирующийся контент

Про вред дублей знают все. Но практически все допускают частичное дублирование контента в виде анонсов на главной и в категориях. А учитывая, что обычно на этих страницах на блогах нет никакой другой информации, получается, что главная и категории — просто дубли, не содержащие ничего уникального и полезного. Все еще хотите продвигать категории в таких условиях?

Что делать?

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

<?php echo category_description( $category_id ); ?>

Ее нужно вставить в файл, отвечающий за вывод категорий — обычно category.php, а затем заполнить поля описания на странице редактирования категории в админке.

Так мы уже повышаем уникальность этих страниц. А вот далее у вас есть два пути: либо для каждой записи писать отдельное описание, которое пойдет в анонс. Для этого нужно заполнить поле «Цитата», которое расположено на странице редактирования записи.

Кстати, если его не видно, просто зайдите сюда:

и поставьте галочку.

Второй путь для ленивых: уникального контента вы не добавите, но хоть дубли закроете.

Для этого нужно отредактировать файлы вывода главной и категорий: index.php и category.php. Найдите там цикл вывода записей и закройте в ноуиндекс вывод неуникальной цитаты.

Пример:

<article class="article" itemscope itemtype="http://schema.org/BlogPosting">
                    <a itemprop="url" class="head" href="<?php the_permalink(); ?>">
                    <?php echo kama_thumb_img('w=326 &h=159 &class=alignleft myimg'); ?>
                    <?php the_title(); ?></a>
                    <div class="meta-home">
                        <time datetime="<?php the_time('Y-m-d') ?>" itemprop="datePublished"></time>
                        <p><time><?php the_time('d.m.Y') ?></time>&nbsp;&nbsp; <span itemprop="interactionCount"><?php comments_number(); ?></span></p>
                    </div>
                        <!--noindex--><?php the_excerpt(); ?><!--/noindex-->
                    
</article>

За вывод текста анонса у меня отвечает функция

<?php the_excerpt(); ?>

Вот ее-то я и окружаю, заметьте, валидными тегами noindex. После чего этот текст не будет попадать в индекс, страницы станут поуникальнее))

Иерархия тегов заголовков

Что я имею в виду?

Необходимо проверить, что на каждой странице вашего сайта присутствует только один тег <h1>, причем он расположен выше других тегов заголовков. Ну и далее они идут по убывающей.

Кроме того, важно, чтобы в служебных элементах шаблона не было выделения этими тегами. Поэтому нужно убрать их из заголовков виджетов — разработчики шаблонов очень любят делать их в <h3>. Сделать это можно, подкорректировав файл функций. Я покажу свой код, а вы уже там ориентируйтесь по нему:

register_sidebar(array(
                'name' => 'Sidebar',
                'id' => 'sidebar',
                'before_widget' => '<div class="widget">',
                'after_widget'  => '</div>',
                'before_title'  => '<div class="widgettitle"><span>',
                'after_title'   => '</span></div>'));

За оформление заголовков виджетов отвечают параметры «before_title» и «after_title».

Если видите там <h3> или <h4> — нужно заменить на дивы. Стили, конечно, слетят, их тоже надо будет исправить.

А еще WordPress очень любит ставить тег <h3> в форму комментариев. Проверьте у себя — «Оставить комментарий» не должно быть заголовком. Для этого предназначен следующий код:

function my_comment_form_before() {
    ob_start();
}
add_action( 'comment_form_before', 'my_comment_form_before' );
 
function my_comment_form_after() {
    $html = ob_get_clean();
    $html = preg_replace(
        '/<h3 id="reply-title"(.*)>(.*)<\/h3>/',
        '<p id="reply-title"\1>\2</p>',
        $html
    );
    echo $html;
}
add_action( 'comment_form_after', 'my_comment_form_after' );

Он заменяет <h3> на тег параграфа, стили тоже нужно изменить.

Заголовки — это не ссылки

Обычно заголовки анонсов на главной и в категориях — это теги <h2>. К сожалению, у меня нет пруфа, верить мне или нет — дело ваше, но! С точки зрения семантики заголовок и ссылка — это абсолютно разные элементы и по значению, и по смыслу, и по функционалу. Потому заголовок не должен быть ссылкой, а ссылка — заголовком.

Поэтому я делаю всегда в ленте анонсов заголовки дивами или и вовсе обычными ссылками с нужным мне для стилизации классом.

Валидный код

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

А вот если у вас их сотни, то стоит задуматься.

Маленькая подсказка: ставьте при проверке валидатор в режим html5 — ошибок у вас будет на порядок меньше, потому что многие вещи в спецификации html4 еще не описаны, а на наших сайтах используются. Можно, кстати, сразу и доктайп поменять на html-пятый. Но это только тем, кто понимает, о чем я.

Ах да, ссылка на валидатор — http://validator.w3.org/

Еще обратите внимание, что валидатор очень ругается на микроразметку. Когда он станет ее полностью поддерживать, никто не знает, но все ждут))

Адаптивный дизайн

Ну это тема для отдельной большой статьи… Как его сделать на сайте своими руками, я как-нибудь покажу. Благо есть один сайт, где адаптивность как раз пора сделать, а то Гугл переживает и пишет письма))

Зачем нужно? Ну конечно, для удобства мобильных пользователей. Плюс к тому, сайты с адаптивным дизайном будут помечаться в мобильной выдаче Гугла как удобные для пользователей, соответственно, их привлекательность в глазах пользователей растет.

Я на этом блоге наконец-то полностью допилила адаптивность — были там косяки. И вот что имею на сегодня:

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

Проверить свой сайт вы можете вот по этой ссылке.

Микроразметка

Польза микроразметки для меня выглядит очень туманно, если честно. Ну вроде как ее смысл в том, что мы явно указываем ПС, где контент, где сайдбар, где название сайта, а где автор статьи… Не знаю, насколько это имеет смысл для информационным проектов. Возможно.

В принципе, если шаблон сверстан на HTML5, то все его элементы уже прямо подписаны — в пятой спецификации есть элементы <header>, <footer>, <article>, которые указывают на предназначение и смысл этих блоков.

Однако, микроразметка все же рекомендуется к установке хотя бы из соображений, хуже точно не будет, а вдруг еще и лучше станет?

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

Вот как-то так, друзья мои… Все замечания, предложения и дополнения с непременным удовольствием выслушаю в комментариях, а пока прощаюсь.