Как стать популярнее в интернете? Дать рекламу, завести свои сообщества в социальных сетях, есть много разных способов. Но сегодня все эксперты твердят в один голос: сначала нужно привести в порядок сайт: он лицо компании, не только перед клиентами, но и перед поисковыми системами.

Конечно, обычно такие статьи начинаются пунктом «Определяем цели», но с этим, я думаю, вы сами разберётесь, без моей помощи. Предположим, у нас есть чёткие цели, к которым мы будем неуклонно стремиться. Теперь смотрим на наш сайт критическим взглядом.

Итак, на что стоить обратить внимание:

Хэдер. Здесь у нас должен располагаться логотип с названием компании (слева), контакты и верхнее меню. Если одной из составляющих вы не увидели – оперативно исправляйте ситуацию.

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

Если главная страница вашего сайта сделана по принципу Landing Page, позаботьтесь о том, чтобы при прокрутке верхнее меню следовало за пользователем. Как здесь, например: 2bears.by.

Это возможно реализовать при помощи jQuery и css. Пример простой реализации:

Пусть наше меню – это блочный элемент DIV с id = “main-nav” и class = “menu-normal”.  В таблицу стилей добавляем новый класс «menu-min» в который входят стилевые свойства position и top со значениями absolute и 0 соответственно. Этот класс и будет отвечать за примкнувшее к верху меню, следующее за пользователем. Затем код страницы добавляем jQuery скрипт вида:

$(document).ready(function() {

//определим координаты блока меню от верхнего поля страницы

var offset = $("#main-nav").offset().top;

//при событии скролла запускаем функцию, сравнивающую текущее положение полосы прокрутки и координаты блока меню

            $(window).scroll(function() {

//при условии, что положение прокрутки больше, чем координаты блока меню, то блоку меню  присваиваем класс «menu-min» и удаляем класс «menu-normal»

            if ( $(window).scrollTop() > offset ) {

                        $('# main-nav).removeClass("menu-normal").addClass("menu-min");

            }

//при обратном условии: пользователь вернулся к верху страницы делаем всё наоборот

else if($(window).scrollTop() < offset ) {

                                   $('#main-nav).removeClass("menu-min").addClass("menu-normal")  

                                   }

            });

});

Меню. Чаще всего пункты меню дублируются – в хэдере, в футере, а иногда и в боковой колонке.

Активный пункт меню ни в коем случае не должен быть ссылкой – в этом случае страница как бы ссылается сама на себя.

Обратите внимание, чтобы активный пункт хорошо выделялся среди остальных – подсвечивался контрастным цветом. Хороший пример: marketing.by.

Карта сайта и «хлебные крошки» и другое. Чтобы SEO-роботам было удобнее сканировать наш сайт, на нём должна быть карта sitemap.xml. Для сайта на Wordpress, например, можно установить плагин Google XML Sitemaps, который будет автоматически строить карту сайта. Скачать его можно здесь.

Для той же цели, что и карта сайта, нам понадобятся «хлебные крошки». Считается, что они помогают пользователю ориентироваться на сайте (хотя, зачастую, просто захламляют пространство). Тем не менее, в SEO без них никак – эти «крошки» создают внутреннюю перелинковку страниц, о которой мы поговорим чуть позже.

Как пример ненавязчивого расположения «хлебных крошек» - сайт rw.by.

И ещё один обязательный атрибут – файл robots.txt, в котором будет прописана директива sitemap, в корневой папке сайта.

Слайдшоу или большой баннер. Моду на большое слайдшоу со всеми его минусами и плюсами пока никто не отменил. Особенно эта тенденция хорошо прослеживается среди владельцев сайтов на бесплатных шаблонах.

Зачастую большим минусом слайдшоу становится его значительный «вес», что сильно тормозит время загрузки сайта. Это не любят ни пользователи, ни роботы.

Поэтому следите за размером картинок, заливаемых в слайдшоу, старайтесь достигать минимального размера без потери качества изображения, в этом вам помогут разнообразные онлайн-инструменты, либо воспользуйтесь Photoshop (Файл –>Сохранить для Web и устройств).

Для сладшоу есть твёрдое правило – яркие картинки украшают главную страницу, но мешают на второстепенных. Объяснение простое: когда человек переходит в какой-либо раздел, он намерен сразу же увидеть интересующую его информацию, а вместо этого перед его глазами снова может оказаться баннер. Пользователь даже может подумать «А перешёл ли я вообще куда-нибудь, или по-прежнему остаюсь на главной?». Даже секундная задумчивость клиента может стоить вам дорого – мысли могут увести его далеко от вашего товара.

Мораль отсюда такова: слайдшоу должно отображаться только на главной. Избавьте от него все второстепенные страницы, в том числе, и страницу 404.

Кстати, о 404. Подойдите к оформлению этой странички с полной ответственностью. Ведь если человек случайно попал на несуществующую страницу, это ещё не значит, что он не может стать вашим клиентом.

Как вам такая «Страница не найдена» http://www.db.by/no ? Мне кажется, лаконично и удобно.

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

Иногда хочется просто кричать «Граждане! Не жалейте место на мониторе, пишите разборчивым шрифтом!». А есть и другая крайность, когда шрифт выбран по принципу «увидит даже ваша бабушка».

Есть неплохой тест, чтобы выбрать правильный шрифт для сайта. Просидите за компьютером до тех пор, пока не почувствуете усталость в глазах. Всё. Теперь вы точно подберёте самый удобно читаемый шрифт, неудачные шрифты в этот момент ваши глаза будут просто отвергать.

Эпилог

Со структурой пока всё. Если у вас остались вопросы – пишите в комментарии – мы с экспертами компании «2 МЕДВЕДЯ» постараемся на них оперативно ответить.

Следующую часть статьи я планирую посвятить контенту на сайте – текстам и картинкам.

 Инна Рыкунина