Плюсы перехода на валидный HTML5

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

Итак, в конце апреля, я редактировал паблик-тему блога, установленную в тот момент на Позитайм.ru — с этого все и началось. Вы когда-нибудь пробовали быстро-быстро модернизировать какой-либо чужой шаблон? Если изменения приходится вносить на лету, то верстка со временем превращается в говнокод, так как вместо того, чтобы искать как описан какой-то конкретный элемент в стилях, начинает использовать свойство style. Долго-ли коротко ли, я не нашел того, что искал в шаблоне, и решился на полную переделку шаблона, а заодно и дизайна.

Начало

Выбор был не долгим, однако пытался заставить себя что-то изменить я пытался почти месяц. Два раза брал за основу какие-то готовые HTML5 фреймворки, но они превращались в такую же груду мусора. И тогда я понял — если я не создал что-либо с нуля, я не могу с точностью объяснить как это работает. И я написал структуру с нуля. Я изначально держал в голове полную архитектуру проекта, чтобы ничего не упустить и не возвращаться потом к шаблону.

Одним из первых требований было то, чтобы автоматически формировались описания, выбиралась картинка в Google-Новости, и различные шареры социальных сетей. Поэтому я использовал все рекомендации vk.com, fb.com и G+. Благодаря этому, у меня довольно кликабелные анонсы в соцсетях, даже когда сторонний пользователь давит рассказать друзьям, я знаю как будет выглядеть анонс на его странице.

Для роботов

Вторым важным требованием было формирование красивого сниппета для главных ключевых запросов, по которым я ждал трафик. Я решил эту задачу благодаря мета-тегу Description. Кроме того, я указал в яндексе все социальные сети, где присутствует сайт. Это значительно увеличился приток людей в группы.

Кроме SMM, я автоматически перерабатываю каждую статью, отбирая при публикации ключевые слова из заголовка и текста и выделяя фразы с вхождениями кеев тегом bold, который благодаря стилям, не изменял начертание текста. Кстати, заголовок, как оказалось в старой теме был написан в теге span — я конечно же это поправил и активно использую h1 для вывода основного заголовка с вхождением ключа. Видя, что значительный процент трафика приходит с поиска картинок, в alt и title картинок я включил ключевые слова. Стоит отметить, что работа журналиста не изменилась абсолютно, все эти действия делает шаблон.

Для читателей

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

Кроме картинок для удобства чтения был изменен фон сайта на бумажную фактуру, а текст чуть больше и темно серым. Таким образом контрастность значительно уменьшилась и чтение стало более комфортным. Зону предоставления основного контента хотелось сделать максимально большой, однако это не позволяло разместить в сайдбаре сайта большое количество информации. Эту проблему я решил сделав раздвигающийся сайдбар.

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

О плагинах: при с использованием этой темы, в WordPress совсем отсутствуют подключенные плагины. Все необходимые действия выполняет сама тема, что делает работу WordPress заметно быстрее. Мало того, я даже не использовал виджеты, отключив их поддержку в самой теме.

Итоги

Итак, что мне дала эта полная модернизация? Во-первых, это более лояльные посетители — показатели отказов упали почти в два раза. Во-вторых, это более лояльные посетители из социальных сетей — они при переходе сразу понимают, что увидят на сайте. К тому же переходов стало больше, благодаря красивым анонсам. В-третьих, лояльные поисковики, которые вместо прошлой мешанины стилей и кода наблюдают отличную структурированную HTML5-разметку — число посетителей с поиска также выросло. Но самое главное, это то, что благодаря правильной разметке, новости стали попадать и хорошо ранжироваться в Google-Новости, что дало хороший прирост трафика. И как следствие этот трафик неплохо монетизируется контекстом и тизерами.

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

Жду вашей критики и предложений как по шаблону Позитайма, так и по этому шаблону. Повторюсь, оба проекта работают под управлением WordPress.