В большинстве случаев каждый этап создания сайта заказчик воспринимает отдельно. Прототип, макет, верстка, программирование, контент, дизайн, поисковая оптимизация, тестирование. Как разные детали одного механизма. Забывая о том, что поисковые системы воспринимают сайт как одно целое. И отдельно докрутить в него гайку под названием “SEO-оптимизация”, когда все остальное уже готово, не получится.
Представьте, что вы зашли в огромный торговый центр. Вокруг вас — десятки магазинов. Что бы вы ни задумали купить — выбор огромный. В какой магазин вы зайдете? В тот, что с яркой витриной, но не сразу понятно, что именно там продают? Товары плохо рассортированы и вы не можете определить, где что находится. Или в другой, совсем не приметный, но в котором интуитивно легко сориентироваться.
А, может быть, в тот, где вас сразу обступает несколько консультантов, за которыми вам не удается даже толком разглядеть ассортимент?
Вопрос со звездочкой. Какой из этих магазинов будет более выгодным для владельца ТЦ, который заинтересован в посещаемости и удовлетворенности клиентов?
В связи с этим к дизайну и юзабилити сайтов со стороны поисковика предъявляются следующие требования:
- Не превышать оптимальный вес страницы. Поисковый робот не обрабатывает ту часть кода, которая превышает установленное значение (80 Кб). Чрезмерный вес странице может добавлять таблица стилей, графические элементы, файлы скриптов. В результате она будет долго загружаться, превышая оптимальную скорость (2 секунды на десктоп и 3 секунды на мобильное устройство).
- Не перегружать код. Это правило хорошо рифмуется с предыдущим. Проверьте (или поручите проверить) код сайта на наличие в нем Java Script, динамических тегов и т. д. Их лучше переместить в отдельные подключаемые модули.
- Внедрить внутренний поиск. Наличие поисковой строки на сайте обеспечивает пользователю возможность быстро найти информацию или товар, а вашему сайту — укрепление позиций в выдаче.
- Обеспечить простую и понятную навигацию по сайту. Чтобы посетитель разобрался в ней в первые же секунды визита.
Заполнить текстовым контентом верхний отдел страницы. SEO-специалистам известно, что чем выше находится текст на странице, тем больший вес имеют использованные в нем ключевые слова. С другой стороны, злоупотребляя этим правилом, можно отпугнуть посетителей. Которым сложно воспринимать сразу много текстового контента, не “разбавленного” графическими элементами. - Добавить ссылку на главную страницу сайта при нажатии на логотип. Это интуитивно понятный пользователю способ вернуться к началу. И поисковые системы тщательно следят за его внедрением.
- Позаботиться о мобильной адаптации сайта. И сделать все возможное, чтобы пользоваться им было одинаково удобно на устройствах с разными диагоналями экранов.
- Реализовать меню в футере и добавить в эту часть сайта кнопку для возвращения к началу страницы.
- Тщательно структурировать текстовый контент. Правильно оформить абзацы (через каждую 1000 символов), заголовки и подзаголовки (H1, H2. H3).
- Добавить ссылки на другие страницы. Оформить их нижним подчеркиванием.
- Протестировать сайт и добиться корректного отображения в любом браузере.
- Отобразить контактные данные вверху страницы и в футере. Телефоны, адреса, электронная почта, время работы. Номера для мессенджеров тоже приветствуются.
- Добавить к изображениям описание Alt.
Как поисковые системы оценивают дизайн сайта
Стоит вспомнить о том, что поисковые алгоритмы работают одновременно в двух направлениях: анти-спам и оптимизация. Первый “снимает баллы” у сайта за несоответствие требованиям, а второй, как “добрый полицейский”, наоборот, начисляет бонусы за соответствие. По итоговому результату страница получает “вес”, который прямо влияет на позицию в поисковой выдаче.
На самом деле эта характеристика — единственная, которая позволяет при первом “знакомстве” опознать сайт-дорвей (спам-сайт, который автоматически генерирует контент под поисковый запрос и перенаправляет пользователя на другой веб-ресурс). Дорвеи создаются в больших количествах и тратить время на разработку уникального дизайна для каждого из них — нецелесообразно.
По мере появления позитивных характеристик (посещаемости, глубины просмотра, положительного поведения на сайте) система оптимизации будет усиливать доверие к сайту, открывая ему путь в ТОП по низкочастотным запросам. Как только положительных баллов наберется достаточное количество, подозрение будет снято и продвижение станет более эффективным.
Факторы, за которые поисковые роботы повышают уровень доверия к сайту:
- Уникальный дизайн.
- “Возраст” сайта: временной промежуток с момента регистрации домена.
- Активность пользователей: читают ли они тексты, делают покупки, оставляют комментарии, находят ли то, что искали.
- Взаимодействие с социальными сетями.
- Данные из справочников и рекламных кабинетов в поисковой сети.
- Указание контактных данных и номеров официальной регистрации предпринимателя/предприятия.
Mobile-first и Page layout
На Всемирном конгрессе мобильных устройств в 2010 году Эрик Шмидт, генеральный директор Google, заявил, что дизайнеры должны следовать правилу «сначала мобильные» в дизайне продукта.
На основе этого правила был создан индекс Mobile-first, который влияет на ранжирование сайтов и сегодня. В чем суть этого правила и как работает индекс?
Правило Mobile-first касается сайтов с адаптивным дизайном, который автоматически перестраивает отображение контента в зависимости от параметров экрана устройства пользователя. При создании дизайна разработчики могут пойти одним из двух путей:
- сделать сначала десктопную версию, а затем “урезать”, адаптировать сайт для отображения на экранах мобильных устройств;
- начать с мобильной версии, а затем расширить ее для стационарных компьютеров.
В первом случае мобильная версия сильно уступает десктопной и кажется неоконченной, несовершенной, часто неудобной, “разбавленной”. Такое явление недопустимо, учитывая что количество пользователей с мобильных устройств постоянно растет.
Соответствующий индекс обеспечивает пользователям мобильных устройств релевантную выдачу на поисковые запросы, учитывая разницу в контенте десктопных и мобильных версий сайта. А к мобильным версиям предъявляются требования, за несоблюдение которых могут быть наложены санкции.
Требования Mobile-first:
- Наличие на мобильной версии всех важных элементов контента, которые присутствуют на десктопной (видео, текст, изображения с описанием alt).
- Структурированные данные в обеих версиях.
- Использование идентичных метатегов в обеих версиях.
- Связь между версиями остается неизменной. Для этого подходят действующие теги rel=canonical и rel=alternate.
- Для атрибута hreflang нужно указать ссылки в рамках текущей версии сайта.
- Выбранный сервер должен быть способным выдержать дополнительную нагрузку краулинга (сканирования страниц).
По словам разработчиков, введение Page layout должно отразиться на позициях в выдаче не более чем для 1% всех сайтов. Но тем, кому “посчастливилось” попасть в это число, придется ждать повторного сканирования страниц роботом, чтобы выйти из-под санкций.
Важно, чтобы эта часть экрана не была забита баннерами, перекрывающими доступ к основному контенту. Это требование позволяет найти золотую грань между стремлением владельцев сайтов заработать на рекламе и обеспечением посетителю положительного пользовательского опыта.
Идеальный веб-дизайн: какой он?
Во время серфинга по интернету вы не раз замечали, что сайты, расположенные на первых строках выдачи — не всегда удобные, и там не всегда есть то, что вы ищете. В то же время тот самый сайт, который удобен, красив и на него хотелось бы возвращаться снова и снова — был найден путем долгих поисков по сети и бережно сохранен в закладки.
Почему так происходит? При разработке сайта основное внимание некоторые разработчики уделяют SEO-оптимизации в ущерб внешнему виду и usability (удобству использования). И тогда сайт легко продвигать, но не очень удобно использовать посетителям. А иногда, наоборот, слишком много внимания уделяется внешнему виду и навигации. В итоге веб-ресурс удобен для пользователей, но найти его им нелегко.
Вы уже познакомились с требованиями поисковых систем, которые предъявляются к дизайну. Осталось убедиться в том, что сайт удобен для пользователей и их поведение на сайте только улучшит позиции в выдаче. Для этого используйте приведенный дальше чек-лист.
Чек-лист для проверки usability сайта
- Гармоничное визуальное оформление. Приятное глазу и соответствующее тематике сочетание цветов (не больше 4), красивая типографика.
- Отсутствует нагромождение текстовой или графической информации, которую сложно воспринимать.
- Корректное отображение и удобство использования с мобильных устройств. Высокая скорость загрузки страниц (1-2 секунды).
- Единый стиль для всех страниц. Одинаковый хедер, слоган и меню на каждой странице.
- Логичный, понятный, кликабельный логотип. При на нажатии на него посетитель попадает всегда на главную страницу.
- Типовое расположение основных элементов: логотип слева вверху, контакты — вверху справа, строка поиска в хедере. В футере — сквозной линк на site map.
- Характерное подсвечивание ссылок при наведении курсора.
- Соответствие логотипа и иконки сайта, которая отображается во вкладке браузера.
- Выделенные кнопки призыва к действию. Которые в достаточном количестве размещены на сайте.
- Понятное оглавление меню. Присутствие на сайте “стандартных” страниц: “О компании”, “Каталог продукции”, “Отзывы” и т. д.
- Правильно оформленная страница 404: короткий текст, идентичный дизайн, контакты и поиск по сайту.
- Отсутствие таких элементов, как нерабочие ссылки, недоступные изображения и видео, не кликабельные кнопкки, обилие всплывающих окон и медийной рекламы, которая перекрывает основной контент.
- Защищённый HTTPS протокол.
Звоните сейчас +38 (044) 495-31-30!