Мы в одной команде и преследуем одни и те же цели. Давайте вместе работать над улучшением веб-сайтов.
Многие фронтенд-разработчики не любят SEO. Нас больше интересует качество или привлекательность кода сайта; SEO кажется запутанной паутиной постоянно меняющихся приоритетов и уловок. Отчасти это наследие старых времен, когда специалистов по SEO воспринимали как людей, которые использовали нечестные методы, чтобы обмануть алгоритмы и повысить рейтинг страницы.
Дизайнеры часто разделяют это мнение. В лучшем случае они думают о SEO как о неизбежном зле, в худшем - как о чем-то, о чем должны позаботиться другие люди.
Обычно разработчики и дизайнеры не являются специалистами по SEO, и это нормально. Но современный SEO - это все больше и больше о хорошем пользовательском опыте, а не о каких-то грязных уловках. И мы все можем согласиться с тем, что пользовательский опыт важен для нас, не так ли?
Алгоритмы поиска стараются максимально точно имитировать реальное поведение пользователя. То, что хорошо для UX, хорошо для SEO. Они преследуют одну и ту же цель - предоставить пользователям лучший опыт. Вы хотите, чтобы пользователи оставались на вашем сайте как можно дольше и видели как можно больше страниц. И, если повезет, что-нибудь у вас куплю.
Поскольку цель общая, давайте посмотрим, как разработчики и дизайнеры могут сотрудничать, чтобы улучшить SEO и помочь пользователям.
Увеличьте скорость страницы
Это грандиозная сделка. Скорость страницы имеет решающее значение для пользователей; если им нужно подождать загрузки страницы более 3 секунд, они, скорее всего, покинут сайт. Вот почему быстрая страница, особенно на мобильных устройствах, необходима для хорошего SEO.
Вам может быть интересно, что вы можете сделать, чтобы улучшить скорость страницы как дизайнер.
Самое очевидное - избегать бесчисленных изображений и сложной анимации. Это особенно важно в верхней части страницы - компетентный разработчик может отложить загрузку ниже сгиба экрана, но мы мало что можем сделать выше сгиба.
Дизайнеры также могут уменьшить вес изображения. Попробуйте использовать изображения подходящего размера и формата. Изображение шириной 6000 пикселей не требуется, если его размер на странице никогда не превышает 1000 пикселей. Кроме того, везде, где возможно, используйте SVG - они легкие и отлично масштабируются; разработчики также могут изменять их при необходимости, что делает их идеальными для многих сценариев использования.
С точки зрения программирования оптимизация изображений просто необходима. Добавление библиотеки оптимизации в рабочий процесс займет некоторое время, и вам больше не придется о ней беспокоиться. Ленивая или прогрессивная загрузка изображений также улучшит скорость вашей страницы и улучшит взаимодействие с пользователем.
Разработчикам следует не забывать загружать изображения, адаптированные к размеру устройства. Нет смысла загружать на мобильный телефон огромные изображения, предназначенные для настольных компьютеров. Мы также не можем забыть о замещающем тексте для изображений, чтобы сделать веб-сайты более доступными для программ чтения с экрана.
Обеспечьте четкую структуру сайта
Пользователи должны быстро понять ваш сайт; в противном случае они уйдут. Создание четкой и удобочитаемой структуры страницы имеет решающее значение для UX. Пользователи не хотят читать огромные текстовые блоки; они должны распознавать разделы и бегло бегать по тексту.
Четкая структура важна и для SEO.
На каждой странице должен быть один основной тег заголовка (H1), который служит основной темой страницы. Если вы не уверены, какое содержание должно быть тегом H1, вероятно, вашей странице не хватает фокуса, и вам следует попробуйте улучшить это.
Другие подзаголовки (от H2 до H6) необязательны, хотя на большинстве страниц они должны использоваться. Теги заголовков не должны использоваться как элементы, не являющиеся заголовками, например элементы навигации. Относитесь к ним как к заголовкам разделов вашей страницы.
Ссылки на вашей странице должны быть видны сразу. Не забудьте добавить достаточный контраст и, если возможно, подчеркнуть текст привязки. Также избегайте использования кнопок в качестве ссылок - это может запутать пользователей. Еще одна важная вещь, которую следует учитывать, - это копия ссылок. Он должен предоставлять информацию о том, куда ссылка будет направлять пользователя, ссылки типа «Здесь» или «Нажмите меня» не содержат каких-либо значимых указаний.
Программисту не следует закапывать код в теги div. Помните обо всех достоинствах HTML5, таких как main, nav, header и т. д. Все они предоставляют ценную информацию для поисковых роботов, и их правильное использование улучшает SEO вашей страницы.
Создайте осмысленную навигацию
Самые важные ссылки на вашем сайте - это ссылки для навигации. Вы должны потратить дополнительное время, чтобы сделать вашу навигацию как можно лучше. Если у вас неправильная навигация, пользователи могут не попасть на многие страницы и не увидят, какую хорошую работу вы проделали в другом месте.
Ваша навигация должна быть логичной и простой. Простота принесет пользу вам, пользователям и оптимизаторам поисковых систем. Категории должны быть разными, а подкатегории должны четко относиться к ним. Помните, что в ваших ссылках должна быть описательность: «Велосипеды для детей» намного лучше, чем «Товары».
Вы должны стремиться к мелкой структуре навигации. Я знаю, что это не всегда возможно, но об этом нужно помнить. Современное SEO продвигает меньшее количество веб-сайтов с большим количеством контента по сравнению с большим количеством веб-сайтов с меньшим количеством контента, поэтому оптимизируйте его.
Для многих веб-сайтов панель поиска является обязательной. Вы должны приложить много усилий, чтобы упростить навигацию, но иногда пользователи не могут найти нужную информацию. Помоги им.
Разработчики, создающие навигацию, должны уделять особое внимание доступности. Легко забыть об использовании навигационных тегов, меток aria и других семантически правильных решений. Мой лучший совет - использовать в качестве вдохновения некоторые фреймворки и библиотеки компонентов. Посмотрите, как построена навигация в Bootstrap или других зрелых продуктах. Они следуют лучшим практикам, и вы должны тоже.
Сделайте сайт адаптивным
Мы живем в мире, ориентированном на мобильные устройства. Все больше и больше веб-трафика проходит через мобильные телефоны. Прошло несколько лет с тех пор, как Google объявил, что сосредоточится на мобильных устройствах, но все еще есть миллионы неадаптируемых страниц.
Адаптивный веб-сайт - необходимость, а не вариант.
Тем не менее, многие дизайнеры по-прежнему пренебрегают дизайном для мобильных устройств. Разработчикам часто приходится реализовывать красивый пользовательский интерфейс, и когда они спрашивают о телефонах или планшетах, они слышат: «Просто сделайте это похожим». Мы стараемся изо всех сил и определенно должны узнать достаточно о дизайне, чтобы самостоятельно вносить некоторые изменения. Но нам не хватает дизайнерской экспертизы.
Если вы не можете создавать дизайн для мобильных устройств, дайте нам хотя бы несколько советов. Задокументируйте, какие элементы не важны и могут быть скрыты, какие размеры шрифта подходят, есть ли необходимость изменить порядок содержимого. Любые советы будут полезны.
Разработчики должны нести ответственность за мобильный UX. Мы часто забываем, что целевой размер на мобильном устройстве должен быть больше, чем на рабочем столе - сложно коснуться чего-то маленького пальцем.
Еще одна проблема - текст и изображения нечитаемы без масштабирования. Никто не хочет масштабировать, поэтому мы должны заботиться о наших пользователях и предоставлять им надлежащий контент.
То же самое относится ко всем модальным окнам и всплывающим окнам. Они раздражают пользователя и часто не корректируются, чтобы их можно было использовать на мобильных устройствах. Поэтому как ответственные разработчики мы должны избегать их или, по крайней мере, улучшать их.
Добавить ярлыки к входам
Это может показаться неважным, но это действительно беспокоит многих пользователей, в том числе и меня. Входам нужны ярлыки. Они действительно так делают. Вы не можете добавить текст ярлыка в качестве заполнителя и решить, что ваша работа сделана.
Программы чтения с экрана используют метки, чтобы пользователи с ослабленным зрением могли использовать формы. Вспомогательные технологии полагаются на эти ярлыки. Ярлыки также увеличивают целевой размер, поэтому они удобны для мобильных устройств. Если вы хотите узнать больше о вспомогательных технологиях и современных стандартах доступности, проверьте W3C.
Кроме того, в больших формах вам часто приходится вводить идентичные данные в разные входные данные. Если текст метки находится в заполнителях, вы можете легко забыть, какое поле содержит какие данные. И чтобы увидеть текстовую метку в заполнителе, вам нужно удалить текст. Это ужасно, UX, не делай этого.
Разработчики, если по какой-то причине вы не можете добавить ярлыки, используйте ярлыки aria, чтобы указать программам чтения с экрана цель каждого ввода.
Это только начало. Разработчикам и дизайнерам необходимо тесно сотрудничать, чтобы сосредоточиться на пользователях и сделать Интернет лучше. Отличное SEO будет бонусом.
