1. Неправильная структура сайта
Структура сайта это — список всех страниц и разделов сайта, организованных в иерархическом порядке и обычно представленных в виде меню. В структуру сайта может входить домашняя страница, страницы категорий и подразделов, страницы продуктов, страницы контактов и т. д. Важным элементом структуры сайта является также навигация, которая облегчает пользователям поиск нужной информации.
2. Использование низкокачественного и неадаптивного дизайна.
3. Отсутствие аналитики для отслеживания посетителей и их поведения на сайте
Аналитика — сбор и анализ данных о действиях пользователя на сайте, таких как посещение страниц, время пребывания на сайте, глубина просмотра страниц, клики на ссылки и т. д. Аналитика помогает понять, как пользователи взаимодействуют с сайтом, что интересует их больше всего, какие проблемы у них возникают, какие изменения на сайте могут улучшить их опыт. На основе этих данных можно оптимизировать сайт, улучшить его юзабилити, повысить конверсию, увеличить количество и качество продаж.
4. Неправильный выбор хостинга, который может снижать скорость сайта.
Что такое хостинг можно почитать по ссылке тут.
5. Неадекватное количество и качество изображений, которые замедляют загрузку сайта и рассеивают внимание пользователей.
6. Отсутствие контента или полное копирование контента с других сайтов.
Контент на сайте должен не только продавать но и быть уникальным и не шаблонным!
7. Неправильное расположение кнопок и элементов на сайте, что затрудняет навигацию по сайту.
Этим пунктом пренебрегает очень-очень много сайтов на просторах интернета. И это зря , пункт который точно повышает конверсию, если всё сделать правильно.
8. Недостаточная связь с социальными сетями и отсутствие возможности для широкой аудитории достигнуть ваш сайт в социальных медиа.
Сейчас 21 век, социальные сети крепко засели в нашей жизни и в ближайшее время их влияние над нами будет только расти!
9. Неоптимизированный мобильный сайт, который может привести к потере трафика.
Часто сталкиваюсь с этой проблемой, я честно скажу я закрываю сайт и ухожу к конкурентам, у меня нет времени часами разбираться с сайтом, который выглядит как на картинке ниже.
10. Отсутствие актуальной информации и отзывов от клиентов на сайте.
В современном мире много обмана, чтобы сформировать доверие ваших клиентов на сайте нужны отзывы о работе с вами и примеры работ!
11. Плохой дизайн и юзабилити.
ситуация, когда пользователю трудно использовать продукт из-за плохой организации элементов, низкой информационной структуры, плохой читабельности текста, неудобных интерфейсов и т.д. Такой дизайн ограничивает пользовательский опыт, снижает удобство использования и увеличивает вероятность ошибок, что может привести к недовольству пользователей и потери клиентов.
12. Излишнее количество полей в форме оформления заказа.
Никому не захочется заполнять форму заказа с большим количеством непонятных полей. Это гарантированно приведет к увеличению количества отказов и выходов с сайта.
13. Не качественная карточка товара/услуги.
Карточка товара/услуги, которая не содержит достаточно информации о продукте или сервисе, не имеет ясного и понятного описания функций и преимуществ, не имеет изображений или видео-контента, а также не содержит отзывов или рейтингов покупателей, может быть не качественной.
14. Отсутствие качественного и проработанного лид-магнита.
Кратко расскажу что это лид-магнит и с чем его едят: способ привлечения внимания и пользователей на сайт, представляющий собой бесплатный цифровой продукт (электронную книгу, видеоурок, шаблон, индивидуальный просчёт и т.д.), который обычно предлагается за подписку на рассылку или оставление контактных данных. Лид-магнит помогает увеличить конверсию сайта, привести новых потенциальных клиентов и развивать отношения с существующей аудиторией.
15. Сложная процедура заказа или поиска контактов.
Сложная процедура заказа — когда необходимо заполнить множество форм или приложить документы для оформления заказа, а также когда в процессе заказа возникают технические проблемы или сложности с оплатой.
Сложный поиск контактов — когда необходимо найти контактную информацию о конкретном человеке или организации, и при этом информация может быть не доступна или устаревшей.
Проработка данных ошибок точно увеличат вам конверсию, спасибо что прочитал до конца
Если вам нужна бесплатная консультация по созданию сайта или помощь в настройке рекламы, пишите мне в телеграмм : igorek_designer
Веб-дизайн призван решать бизнес-задачи. При этом всегда есть определённые ограничения, которые следует учитывать: по загружаемому контенту, его обновлению и отображению на разных устройствах, по работе с базами данных и внешними системами и не только.
Однако не все дизайнеры думают о том, как их макеты будут функционировать на сайте или в приложении. Руководитель студии дизайна и разработки сайтов и сервисов Method Zero Антон Шакиров рассказывает о самых распространённых ошибках, которые последние пару лет замечал на дизайн-площадках и сайтах, и делится принципами, которые помогут их избежать.
Дизайнеры, как правило, создают макеты для трёх разрешений экранов:
- под компьютеры и ноутбуки: ширина макетов — 1 920, 1 440 или 1 360 пикселей, обычно для сайтов берут только одно из этих разрешений;
- под планшеты: ширина макетов — 767 пикселей;
- под смартфоны: ширина макетов — 375 пикселей.
Дизайн хорошо смотрится, первый экран красиво передаёт нужную информацию и вовлекает скроллить дальше. При этом часто забывают, что на реальных устройствах первый экран будет меньше по высоте из-за окна браузера, поля с адресом сайта и панели закладок. Кнопка с призывом к действию и вовсе может уехать за пределы экрана. Всё это ломает дизайн.
Нужно помнить и про использование графики. В примере ниже фоновая иллюстрация растягивается по ширине сайта, при этом нижняя часть круга обрезается и выходит за пределы первого экрана, где её изначально располагал дизайнер:
Исправить этот недочёт можно так: увеличить отступы справа и слева от картинки до краёв экрана или поместить круги в отдельные элементы и работать с ними уже там.
Случается и обратная ситуация, когда специалист не адаптирует дизайн под ультраширокие мониторы 3 440 x 1 440 и не объясняет разработчикам, как должен вести себя сайт при изменении ширины экрана. Решить этот вопрос поможет:
- Резиновая вёрстка, когда весь сайт пропорционально растягивается по ширине экрана. Но следует учитывать, что контент может слишком укрупниться и будет видна только треть того, что должно было помещаться в рамках одного экрана.
- Добавление полей справа и слева. Здесь стоит помнить про закреплённые на экране элементы и про фоновые видео и изображения, которые обрезаются по краям экрана на стандартных экранах.
Пример резиновой вёрстки: контент остаётся в рамках одного экрана, благодаря правильному позиционированию всех элементов на странице ↓
В примере ниже разные части дизайна закреплены с левой и с правой стороны. Если открыть этот сайт на ультрашироком мониторе, посередине возникает дыра:
Для макетов для iPhone. При дизайне кнопок, закреплённых снизу на мобильном устройстве, часто забывают про индикатор «Домой» (Home indicator) — чёрную полоску снизу, область под которой не кликабельна. Кнопки следует приподнимать выше этого индикатора или ставить больше внутренних отступов под ней, но не прижимать её к низу. Это также немного повлияет на высоту элементов в рамках одного экрана сайта или приложения.
Не стоит забывать готовить и передавать разработчикам все видео и изображения в большем размере для сохранения их качества на мониторах 4K и 5K. Если изображение на весь экран, готовим его под всю ширину монитора, например, 4K — 3 440 px. Если на пол-экрана — 1 720 соответственно. Это важно, потому что часто разработчики экспортируют картинки напрямую из макетов, где эти картинки делают в небольшом разрешении. Экспорт изображений в увеличенных размерах не поможет в этом случае. Исключение составляют только векторные изображения в svg-формате, которые могут бесконечно увеличиваться и уменьшаться без потери качества.
Можно не рисовать отдельно макеты под планшет, если дизайнер делает проект, который:
- нужно оперативно запустить;
- не содержит сложных таблиц и сеток с переносами контента на следующие строки или с его скрытием на некоторых разрешениях экранов.
Согласно данным SimilarWeb и по личному опыту, на планшеты в среднем приходится 1–2% всего трафика, поэтому нецелесообразно тратить четверть проектного времени на эти макеты. Правда, если есть нестандартный блок со сложной сеткой, можно отдельно нарисовать планшетную версию только этой части. В остальных случаях опытные разработчики сами адаптируют десктопную версию макета под планшет.
Под динамическими элементами страниц подразумеваю всё, что может менять своё состояние — вид, содержание — в зависимости от положения курсора мыши, факта нажатия или перетаскивания элементов, фокуса, времени, скролла страниц, состояния каких-либо данных на странице.
На этапе дизайна динамических элементов нужно представлять, объяснять и рисовать, как этот элемент будет вести себя дальше или как он будет реагировать на определённые события.
Чаще всего забывают нарисовать и продумать состояния ховеров, когда на элемент наводится курсор, состояния нажатия или перетаскивания, состояния фокуса у кнопок, ссылок, форм, кликабельных элементов. Все эти состояния помогают пользователям понять, что на этот элемент можно нажимать, что в фокусе этот объект или что в поле есть ошибки.
При работе с формами — помимо состояний ошибок и невалидности полей — стоит помнить о сообщениях об успешной отправке формы. Так пользователь поймёт, что всё хорошо и его данные отправлены.
Некоторые элементы могут быть динамичными сами по себе. Например, если на сайте есть таймер обратного отсчёта, секундомер, экраны загрузки сайта, сообщения о загрузке данных. Нужно не только нарисовать то, как эти элементы выглядят, но и что с ними происходит в процессе и что будет после завершения действия.
Например, если говорить про таймер обратного отсчёта, нужно учитывать изменение цифр и изменение ширины всего текста из-за разной ширины отдельных цифр — если это не моноширинный шрифт, где каждый символ всегда занимает одинаковую ширину, что позволяет ориентироваться только на количество символов. Для этого делаем дизайн других состояний или описываем для разработчиков, как оно должно изменяться. А также готовим макеты или анимации того, что будет отображаться по истечении срока.
Если на сайте будут размещаться вакансии, новости, события, команды, магазины и другие данные, которые будут подгружаться из внешних систем и активно обновляться, следует заранее узнать у заказчика:
- как эти данные хранятся,
- какая есть или будет информация,
- как и кем данные будут актуализироваться,
- какие сложности могут возникнуть.
Это позволит определить полный набор данных для работы — или понять новые ограничения по дизайну и вёрстке.
Например, при проектировании HR-портала компании мы не можем вслепую задизайнить страницу поиска вакансий и каждую вакансию отдельно. Сперва нам надо узнать, какая информация по вакансиям будет доступна. Так, если в вакансиях нет информации о метро, мы и не должны рисовать это в макетах. Если в поле «Регион» хотим разделить Москву и Московскую область, узнаём у клиента, есть ли такая информация в принципе, а у разработчиков — возможно ли так сделать с технической точки зрения.
Нужно выяснить обязательность полей или целых разделов. Если мы делаем дизайн вакансий, может ли поле с графиком работы или со станцией метро полностью отсутствовать? Если делаем разделы со статьями, может ли какой-то раздел оказаться пустым? Может ли не быть ближайших событий? Может ли клиент удалить все новости?
С помощью таких вопросов дизайнер выявляет дополнительный набор состояний, который нужно задизайнить и передать разработчикам.
Другая ситуация — при наличии данных они могут не успеть подгрузиться с сервера при обращении к соответствующей странице. Если дизайнер знает, что эти данные будут грузиться извне, то лучше заранее предусмотреть сообщения о том, что всё в порядке и контент загружается.
Стоит помнить и про ограничения на контент, которые стоит задать для отдельных полей или частей контента. Ограничение может быть на длину текста, количество элементов в списке, количество фотографий.
Например, в слайдере с отзывами один из отзывов может быть сильно больше других. Это приведёт к тому, что под небольшими отзывами снизу будут дырки, так как нижестоящий контент отодвинется отзывом с самым длинным текстом:
Лучше заранее продумать в дизайне варианты поведения при таких сценариях или обговорить с клиентом и разработчиками введение ограничений на количество символов в каждом отзыве.
- Получите опыт 4 ведущих дизайн-студий и создадите 7 проектов для своего портфолио
- Научитесь создавать сайты под ключ, оформлять дизайн-проекты и презентовать их заказчику
- Сможете искать работу и проходить собеседования уже в середине обучения
Некоторые части сайта подлежат частым правкам: портфолио с кейсами, баннер с призывом к действию, блок с информацией о следующем событии, стоимость товаров или услуг и другое.
На этапе дизайна нужно сразу принимать в расчёт ограничения клиента по времени и деньгам, которые он готов тратить на обновления сайта.
Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?
Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.
Дизайнер должен быть уверен, что клиент сможет получить фотографии в заложенной стилистике под разные материалы или сделать предварительную постобработку и цветокоррекцию фотографий.
Дизайнеры знают про наличие в HTML заголовков H1–H6 и используют их при наименовании стилей. Однако при создании новых наборов стилей под мобильную версию сайта из-за удобства в дизайне и не знания того, что это делать нельзя, могут менять тип заголовка и стиля на элементах относительно десктопной версии. Был заголовок H1, а в мобильной версии у того же элемента стал H2. Был дополнительный стиль small text — стал просто text.
Если дизайнер создаёт с помощью HTML-тегов элемент H1, то он и должен оставаться H1 в мобильной версии. Иначе при разработке придётся делать дублирование всего элемента и создавать костыли с помощью CSS-классов — рабочее, но некрасивое и неэффективное решение.
Если нужно, чтобы какой-то элемент был по стилю таким же, как и элемент с другим стилем, стоит их сделать одинаковыми на определённых разрешениях экранов. Но сам элемент должен оставаться с таким же типом класса, как и на макетах под другие разрешения экранов.
Один и тот же элемент не должен менять свой заголовок между различными разрешениями экранов. Если в десктопной версии (верхнее изображение) заголовок соответствует стилю H4, то и в мобильной версии этот заголовок должен соответствовать стилю H4, даже если он эквивалентен мобильному H3
В этом вопросе дизайнерам и разработчикам сильно помогает создание UI Kit, где как минимум будут указаны все стили шрифтов, цветов, состояния элементов. Это позволяет проверить правильность указания всех стилей элементам и неизменность всего набора стилей между разными разрешениями экранов.
Здесь речь идёт скорее про уменьшение вероятных ошибок на готовом сайте и про сильную помощь разработчикам и ускорение их работы, а не про прямую ошибку дизайнеров. Но иногда это и про недостаточный объём того, что нужно сделать специалисту.
Все дизайнеры знают про favicon — маленькую картинку, которая отображается на вкладке сайта в браузере. Но не все создают и передают разработчикам webclip — картинку 256 x 256, которая видна в панели закладок Safari, — и opengraph-изображения для сайта и для отдельных страниц — изображение с рекомендуемым разрешением 1 200 x 630, которое видим при вставке в соцсетях ссылки на сайт.
Если фоновые изображения и другие элементы всегда зарезаются краями экрана или блоками в одном и том же месте, стоит сразу кадрировать эти изображения в макете. Часто дизайнеры отодвигают фоновую картинку за края экрана и включают у элементов обрезание контента за пределами макета страницы. Но когда разработчики будут скачивать такую картинку для экспорта на сайт, она выгрузится целиком. Так изображение попадёт на сайт в большем, чем нужно, размере, что будет замедлять загрузку и добавит разработчикам хлопот с выравниваниями.
Ещё одна частая ошибка — делать разные иконки в разных по размеру фреймах. Часто можно заверстать и так, но для этого разработчикам нужно под каждую иконку задавать свойства размеров, отступов. Если потребуется заменить иконку на другую, придётся менять размеры и отступы. Это приносит много проблем разработчикам и тормозит разработку.
Все иконки в дизайне должны быть сделаны внутри одинаковых по размеру областей — фреймов, внутри которых они уже выравниваются и масштабируются как нужно. Таким образом, все иконки вне зависимости от их реального размера будут занимать одинаковые области этих самых фреймов.
Иконки должны располагаться внутри одинаковых квадратных или прямоугольных областей, внутри которых они уже индивидуально выравниваются и масштабируются.
Вот примеры правильной работы с иконками:
На этапе разработки показывать все идеи и макеты разработчикам. Они скажут о возможных проблемах, которые всплывут при разработке.
Всегда просить обратную связь от разработчиков: что им не хватило при передаче дизайна. Через несколько проектов сформируется понимание, на что обращать внимание и что ещё нужно учесть и подготовить в дизайне.
Начать самостоятельно разрабатывать несложные сайты на технологиях no-code. Рекомендую Tilda, Readymag и WebFlow. После нескольких собранных сайтов станет ясно, с чем возникают сложности, где и что работает не так.
Самостоятельно проводить тестирование сайтов на различных устройствах. Такие сервисы, как BrowserStack, позволяют открыть сайт под различными ОС, браузерами и телефонами. Самостоятельно подвигать окно браузера, взять другой компьютер и посмотреть, как сайт себя ведёт в браузере Safari, где чаще возникают проблемы.
Мыслить критически. Советую моделировать все возможные ситуации и показывать в дизайне, как это всё должно работать. Задавайтесь вопросом «а что, если». А что, если клиент введёт описание в 2 раза длиннее, чем было в макетах? А что, если не будет картинки под новость? Продумывайте все ситуации, которые могут случиться, и любые возможные действия пользователей и клиента.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Профессиональный сайт – это обязательное условие для расширения клиентской базы, укрепления доверия аудитории и повышения авторитета, а также для построения крепких отношений с клиентами.
В идеале сайт:
- должен быть интуитивно понятным и комфортным в использовании
- должен обеспечивать стабильный приток лидов
- должен делать продажи
Создание сайта значительно упростилось в последнее время благодаря появлению специальных конструкторов, которые не требуют от вас знания кода и практически все делают за вас. Конструкторы позиционируются для новичков, а не для профессионалов, что объяснимо, ведь профессионалы не нуждаются в помощниках и могут создать сайт самостоятельно с нуля.
Обилие конструкторов, с одной стороны, облегчило завоевание цифрового пространства владельцами малого и среднего бизнеса, а с другой стороны, разбаловало их абсолютное большинство. Если раньше для разработки сайта необходимо было самостоятельно продумывать все мелочи, то сейчас люди всецело полагаются на возможности конструкторов. Однако это не отменяет ошибок, порой совершенно досадных.
Сегодня мы будем разбираться, какие ошибки чаще всего допускают и что нужно учитывать при создании сайта. Надеемся, вы возьмете на вооружение советы ниже, ведь предотвратить ошибки на сайтах намного дешевле, чем устранять их после запуска.
Ошибка 1: Много разных стилей и шрифтов
У владельца сайта есть соблазн попробовать как можно больше разных стилей и шрифтов, ведь собственный сайт – это идеальная площадка для творчества. Но это плохая идея. Сайт должен быть выполнен в едином стиле, который транслирует вашу индивидуальность и подсказывает клиентам, какие цели у вас поставлены.
Единообразие визуала играет огромную роль в успехе сайта, поскольку повышает доверие аудитории и узнаваемость компании. У крупных компаний часто есть целые руководства по брендингу, целью которых является составление всех маркетинговых материалов в одном стиле.
Ошибка 2: Отсутствует визуальная гармония
Одна из распространенных ошибок – на сайте либо слишком много всего, либо практически ничего нет. Слишком много изображений, шрифтов, текста создает ощущение перегруженности, посыл сайта размывается, а его цели становятся расплывчатыми. С другой стороны, сайт, который состоит из одних лишь пустых блоков, так же не может предложить клиентам ничего хорошего.
Ошибка 3: Сложная навигация
Ошибки в веб дизайне могут включать несовершенную навигацию. Сайт может иметь непрозрачную структуру: непонятно, из каких подразделов состоят страницы, как попасть из одной страницы в другую или как вернуться на главную.
Обязательно размещайте в верхней или боковой части экрана меню со ссылками на главные страницы и разделы сайта.
Ошибка 4: Неудачные фотографии
Не наполняйте сайт стоковыми изображениями. Лучше отдать предпочтение собственным фотографиям в высоком качестве. Изображения в плохом качестве – это абсолютный моветон, они неприемлемы ни при каких обстоятельствах.
Изображения должны быть оптимизированы для быстрой загрузки сайта, а также должны иметь отношение к тематике страницы, в противном случае это лишь озадачит пользователей и вызовет у них растерянность, а это отрицательно скажется на вовлеченности и конверсии.
Сайты без каких-либо изображений выглядят пусто и неприветливо, что усиливает отток пользователей.
Ошибка 5: Отсутствует фавикон
Возможно, кому-то фавикон кажется незначительным элементом сайта, но даже он может положительно повлиять на восприятие вашего сайта аудиторией. Он облегчает нахождение вашего сайта среди множества открытых вкладок браузера.
Ошибка 6: Неподходящие цвета
Берите цветовую палитру, которая отражает философию вашего бренда. Например, если у вас юридический сайт, подойдут сдержанные цвета (черный, темно-синий, коричневый, серый, золотой). Оптимальное количество цветов сайта – четыре.
При наполнении шаблона страниц выбирайте такие цвета, чтобы текст был контрастным по сравнению с фоном и его было легко прочитать.
Ошибка 7: Слишком длинный текст
Не пытайтесь вместить на сайт весь текст, который у вас был заготовлен. Выбирайте только самые важные по смыслу тезисы. Порой мощный, но короткий заголовок может сказать больше, чем целый абзац невнятного текста. Особенно это касается главных страниц и лендингов. Будьте лаконичны, поддерживайте вовлеченность пользователей профессионально написанным текстом без лишней воды.
Текст должен быть уникальным, написанным конкретно под вас. Никакого копирования из внешних источников! Рекомендуется чередовать его с блоками пустого пространства для лучшей читаемости.
Чтобы достоверно отражать философию бренда, веб-страница должна содержать как минимум 250 слов. Если вы можете написать тысячи слов о своем продукте, воздержитесь от длинных монотонных текстов: вряд ли клиент захочет тратить время на их прочтение.
Ошибка 8: Бесполезная анимация
Мерцающие баннеры, кричащая GIF-анимация, пафосные визуальные эффекты, сопровождающие базовые действия на сайте, – все это портит впечатление от сайта. Сейчас у пользователей просто нет времени, чтобы восхищаться визуальными изысками. Они пришли за информацией, и ваша задача – дать им ее максимально быстро. Анимация имеет мощный эффект только при умеренном использовании и только тогда, когда она абсолютно необходима.
Ошибка 9: Отсутствует блог как источник релевантного контента
Если вы хотите не просто номинально присутствовать в сети, а завоевать авторитет и получить преданную публику, которая следит за каждым вашим шагом и ожидает выхода нового продукта, обязательно заведите блог. Там вы будете размещать авторский контент, договариваться с другими экспертами о публикации гостевых постов или интервью, чтобы повышать видимость вашего бренда и его привлекательность.
Ошибка 10: Неправильно используются ключевые слова
Google положительно относится к релевантному контенту, который написан в соответствии с правилами. Использование излишне большого количества ключевых слов без контекста может временно повысить позиции вашего сайта, но сделает это ценой вовлеченности пользователей.
Мертвый текст, который не несет никакой ценности, а используется только как фон для ключевых слов, сильно ударит по вашему авторитету.
Ошибка 11: Пользователям предоставляется слишком много выбора
Не стоит усложнять наполнение сайта. Как только вы предлагаете слишком много опций пользователям, они перестают взаимодействовать с вами, поскольку у них наступает так называемый «аналитический паралич» – явление, когда человек отказывается от принятия решения из-за большого количества информации для анализа и страха выбрать неверный вариант.
Ошибка 12: Досадные опечатки и грамматические ошибки
Опечатки и ошибки на сайтах негативно сказываются на репутации компании и выглядят непрофессионально. Обязательно проверяйте текст перед тем, как опубликовать его.
Ошибка 13: Отсутствуют лид-магниты
Если у вас есть формы регистрации и вы хотите заполучить данные пользователей (email, телефон, имя), то обязательно подготовьте лид-магниты, чтобы увеличить привлекательность подписки. Это может быть справочник или чек-лист.
Ошибка 14: Автозапуск видео
Видео, которые воспроизводятся автоматически после открытия страницы, могут вызывать недовольство. Почему? Ваш сайт могут смотреть в разное время суток (включая ночь) и в разных местах (включая места, где резкий и громкий звук может вызвать недовольство окружающих).
Предусмотрите возможность воспроизведения видео по желанию пользователя.
Ошибка 15: Раздражающие всплывающие окна
Маркетологи положительно относятся к поп-ап окнам. Тем не менее, не следует запускать их сразу после того, как клиент открыл ваш сайт. Лучше запланируйте их появление через некоторое время, когда он лучше познакомится с вашей компанией и будет готов к заманчивым предложениям. Как вариант, можно запустить всплывающее окно на выходе, которое появляется перед тем, как пользователь собирается закрыть ваш сайт.
Ошибка 16: Работа с вкладками
Пользователь сам выбирает, какие страницы открыть, а какие закрыть. Если после нажатия на ссылку система перенаправляет его на другую страницу в той же вкладке, это вызывает неприятные эмоции – теряется связь со страницей, на которой пользователь находился, в результате он не может нормально перемещаться по сайту. Если у вас есть pdf-файл или другой ресурс в виде ссылки, сделайте так, чтобы он загружался в отдельной вкладке.
Внутренние ссылки, которые не ведут к скачиваемым материалам, напротив, должны открываться в той же вкладке.
Ошибка 17: Отсутствуют ясные и понятные cta-кнопки
Кнопка призыва к действию – это кульминация любого лендинга или продуктовой страницы. Если ее нет, пользователь не понимает, что ему делать со всей этой информацией и куда дальше двигаться. В такой ситуации он просто закроет страницу и уйдет к конкурентам, которые точно знают, чего от него хотят.
Сначала определитесь с целью сайта: вы хотите, чтобы клиент сделал покупку / подписался на рассылку / связался с вами? Для каждого из перечисленных случаев должна быть своя cta-кнопка.
Мы рекомендуем добавлять не более одной cta-кнопки на страницу.
Ошибка 18: Контактные данные отсутствуют или их трудно найти
Клиент, который не может с первого раза найти ваши контактные данные, покинет сайт, а этого нельзя допускать. Ссылка на страницу «Контакты» должна находиться в видимом месте.
Также рекомендуется продублировать контакты в футере страниц. Добавьте как можно больше каналов для связи с вами: мобильный и стационарный телефон, email, соцсети, адрес и схема проезда.
Поддерживайте контактные данные в актуальном состоянии.
Ошибка 19: Не предусмотрена мобильная оптимизация
Учитывая огромный сегмент глобального мобильного трафика, следует предусмотреть адаптивный дизайн сайта, чтобы им было одинаково удобно пользоваться как на ПК, так и на мобильных устройствах. Мобильные сайты имеют совершенно другое строение и иерархию. Здесь и здесь мы подробнее рассказывали об их особенностях.
Ошибка 20: Медленная загрузка сайта
Медленная загрузка – это убийца бизнес-сайта. Оптимизируйте время загрузки сайта, чтобы она не превышала 3 секунд, иначе вовлеченность пользователей будет стремиться к нулю.
Как это сделать?
- Выбирайте изображения в формате jpeg, а не png
- Сжимайте фотографии
- Встраивайте видео в текст в виде ссылки вместо того, чтобы закачивать его на сайт
- Отключите ненужные плагины
Ошибка 21. Неправильная SEO-оптимизация
SEO-оптимизация влияет на позиции сайта в поисковой выдаче. Чем выше сайт на странице с результатами поиска, тем больше потенциальных клиентов его увидят. Как добиться хорошего ранжирования?
SEO-рекомендации:
- Используйте правильно подобранные ключевые слова, но добавляйте их там, где это уместно, с учетом контекста. Они должны выглядеть естественно.
- Важно не количество, а качество. Часто бывает так, что ключевое слово с более широким смыслом привлекает больше трафика, однако эта аудитория не является целевой, и если она попадет на ваш сайт, то через секунду его покинет, поскольку ваш сайт не соответствует ее истинным запросам.
- Оптимизируйте URL-адреса.
- Хороший URL: https://www.getresponse.ru/blog/rassylka-8-marta
- Плохой URL: https://www.website.ru/blog/post1847hvsd
- Используйте уникальные метаданные на каждой странице
- Отправьте XML-карту сайта в Google Search Console
- Не допускайте ситуаций, когда две и более страницы написаны под одно ключевое слово. Они начинают соперничать между собой за позиции в выдаче, а это плохо для видимости сайта.
- Заведите блог, чтобы публиковать и регулярно обновлять полезный контент
- Прописывайте мета-теги (Title, Description) с учетом лимита символов. Для проверки лимитов можно использовать различные сервисы, например, этот.
Ошибка 22: Отказ от предварительного тестирования сайта
Любой сайт перед запуском должен быть протестирован на наличие ошибок.
Ошибка 23: Стандартные страницы 404
Нет ничего хуже обычной страницы 404. Она и так не вызывает положительных эмоций у аудитории, а если она еще и шаблонная, то впечатление от сайта заметно портится даже у самых лояльных пользователей. Здесь мы рассказываем, как сделать страницу 404, которую клиенты долго не забудут.
Ошибка 24: Не продумана функция поиска
Функция поиска особенно актуальна для интернет-магазинов с большим ассортиментом продукции. Но даже если у вас обычный корпоративный сайт, строка поиска должна присутствовать обязательно. Так вы облегчите пользователю нахождение нужной ему информации.
Ошибка 25: Отсутствуют ссылки на соглашение о конфиденциальности или уведомления об авторских правах
Обязательно разместите на сайте все необходимые юридические документы, чтобы обезопасить свою компанию от ответственности и рассказать клиенту, кто вы и чем занимаетесь.
Ошибка 26: Сайт не адаптирован для людей с ограниченными возможностями
Люди с ограниченными возможностями тоже пользуются интернетом и могут открыть ваш сайт. Упростите им просмотр страниц. Например, добавьте режим высокой контрастности или экранную лупу для слабовидящих, alt-теги для незрячих, субтитры к видеороликам для глухих или слабослышащих людей и пр.
Ошибка. 27: Нет раздела FAQ
Как правило, клиент, который попадает на сайт компании, ищет ответы на вопросы и хочет развеять сомнения в отношении продукта / услуги. Если вы ответите на самые популярные вопросы клиентов, то этим приблизите их к конверсии.
Ошибка 28: Не сформулирован план и цели сайта
Перед тем как начинать построение сайта, задайте себе следующие вопросы:
- Какая цель у моего сайта?
- Кто является целевой аудиторией?
- Как я буду привлекать трафик на сайт?
- Кто будет заниматься поддержкой и обновлением сайта? Как часто?
- Сколько будет стоит техническое обслуживание сайта?
Если у вас не будет четкого ответа на эти вопросы, велика вероятность, что получившийся сайт не будет эффективно работать.
Ошибка 29: Не анализируются метрики
Даже после того как вы успешно запустили сайт, который привлекает целевой трафик, на этом ваша работа не заканчивается. Необходимо отслеживать аналитику сайта, чтобы лучше понять, какие темы и приемы лучше работают с вашей аудиторией.
Сайт требует постоянных улучшений, и анализ метрик дает необходимую информацию для принятия правильных решений и внесения изменений в стратегии.
Ошибки веб дизайнеров – Заключение
Ошибки при создании сайта допускают все: и новички, и опытные специалисты. Важно их проанализировать (например, это ошибки в дизайне сайта или его наполнении?) и разработать меры по их устранению.
А еще лучше – прочитать эту статью и не допустить их появления 🙂 Надеемся, эта информация будет для вас полезной.
Кстати, если вы хотите создать сайт без малейших усилий, то в GetResponse есть такая возможность. Интуитивный конструктор сайтов сделает за вас практически все. В вашем распоряжении также десятки красочных шаблонов, которые уже оптимизированы и будут исправно функционировать после запуска.
Время на прочтение
7 мин
Количество просмотров 55K
Перед современным веб-разработчиком стоит широчайший выбор платформ для хостинга и хранения данных, инструментов для работы с HTML, CSS и JavaScript, способов фактической реализации дизайна, а также всевозможных библиотек и фреймворков. В помощь тем, кто хочет найти свой путь в этом обилии вариантов, сеть услужливо предоставляет массу статей, обсуждений на форумах и примеров «наилучших» решений. Но вне зависимости от того, как и с помощью чего начинающие разработчики создают сайты, многие совершают одни и те же ошибки. Давайте рассмотрим некоторые из них, чтобы в будущем не наступать на эти популярные грабли.
Использование старого HTML
Ошибка: На заре интернета было куда меньше возможностей по оформлению страниц, чем сегодня. Но старые привычки трудно изжить, и многие разработчики всё ещё пишут на HTML так, словно они застряли в 1990-х. Например, используют для создания макета страницы; применяют или в случаях, когда более уместны иные, более подходящие к содержимому тэги; используют тэги, не поддерживаемые текущим стандартом HTML (например, или ); или применяют для разделения элементов большое количество .
Последствия: Использование HTML десятилетней «свежести» может привести к излишнему усложнению разметки страницы и, как следствие, к непредсказуемости её отображения в разных браузерах. И далеко не только в Internet Explorer.
Как избежать: Для начала перестаньте использовать для создания структуры страницы и применяете его только для вывода табличных данных. Ознакомьтесь с более современными инструментами. Используйте HTML для описания самого контента, а не способов его отображения. А для корректного отображения применяйте CSS.
«У меня в браузере всё работает»
Ошибка: Вероятно, вы горячий поклонник какого-то браузера и предпочитаете тестировать в нём все свои работы. Возможно, что вы также используете найденные в сети куски кода, которые писались без учёта совместимости с разными браузерами. Кроме того, в разных браузерах для стилей приняты разные значения по умолчанию.
Последствия: Будьте готовы к тому, что сайт, «заточенный» под один браузер, в других будет выглядеть просто ужасно.
Как избежать: Конечно, тестировать свой сайт во всех существующих браузерах и их версиях было бы пыткой. Но нужно хотя бы периодически проверять, как ваш сайт выглядит в некоторых наиболее популярных браузерах. Сегодня для этого есть бесплатные инструменты: виртуальные машины, сканеры сайтов. Например, с помощью http://browsershots.org/ или https://www.browserstack.com/ можно сделать снэпшоты того, как будет рендериться конкретная страница на всевозможных платформах. Работая с CSS, убедитесь, что «сбросили» все значения по умолчанию.
Кстати, если вы используете какие-то специфические CSS-решения, заточенные под конкретные браузеры, то обратите внимание на характерные для разных вендоров префиксы вроде -webkit-
, -moz- или -ms-. Чтобы быть в курсе текущих тенденций, можете изучить эти ссылки:
A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent
CSS vendor prefixes considered harmful
On Internet Explorer supporting -webkit- vendor prefixes
Там описывается, почему стоит отойти от использования подобных префиксов. Практические рекомендации, как работать без префиксов, можно найти здесь: http://davidwalsh.name/goodbye-vendor-prefixes.
Плохие формы ввода
Ошибка: Предложить пользователям ввести какие-то данные (особенно в текстовые поля) и ожидать, что они введут их именно в том виде, в каком нужно.
Последствия: Если вы возлагаете на пользователей ответственность за корректность вводимых данных и правильность формата, то это приведёт к непредсказуемым последствиям. Могут возникать сбои или ошибки несовместимости, вас даже могут попытаться взломать.
Как избежать: Во-первых, удостоверьтесь, что вы безошибочно донесли до пользователей, какая именно информация вам от них нужна. Если вы просите ввести «адрес», то уточните, какой: рабочий, домашний, электронный? Чтобы дополнительно подстраховаться, используйте проверку корректности вводимых данных. Неважно, как это будет сделано на стороне браузера, главное, чтобы на сервере были уже проверенные данные. Никогда не используйте сцепленные T-SQL выражения для работы с полученными от пользователей данными без подтверждения корректности по каждому полю ввода.
Слишком большие ответы на сетевые запросы
Ошибка: Страница, заполненная многочисленными изображениями в высоком разрешении, уменьшенными с помощь атрибутов высота и ширины тэга . Слишком большие CSS- и JS-файлы, залинкованные со страницы. Излишне сложный и громоздкий исходный HTML-код.
Последствия: Если ваша страница слишком долго грузится/отображается, то это может заставить многих пользователей не дождаться завершения и закрыть вкладку или нетерпеливо обновлять страницу. Иногда излишне долгое ожидание загрузки может привести к возникновению ошибок.
Как избежать: Не думайте, что раз интернет из года в год становится быстрее, то это оправдывает раздувание размеров страниц. Вместо этого оптимизируйте свои проекты ради ускорения обмена сетевыми пакетами. Основная причина, по которой страницы становятся «тяжёлыми», — изображения. Чтобы минимизировать их влияние:
- Спросите себя, действительно ли необходима вся используемая вами графика? Откажитесь от ненужных графических украшательств. Можно воспользоваться сетевыми инструментами, чтобы определить, какие изображения нуждаются в дополнительном сжатии.
- Уменьшите размер изображений. Например, с помощью Shrink O’Matic или RIOT.
- Используйте предзагрузку. Это не ускорит первичную загрузку, но зато даст преимущество при просмотре других страниц сайта. Подробности можно почерпнуть из статьи: https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Миницифируйте залинкованные CSS- и JS-файлы. Для этого есть множество инструментов, например, Minify CSS и Minify JS.
И наконец, старайтесь использовать наиболее современную версию HTML и внимательно используйте тэги и .
Создание кода, который должен работать
Ошибка: Тестирование проекта на сервере и развёртывание без последующей проверки, работает ли он после этого. Хотя сайт работал без ошибок, потому что его тестировал сам разработчик.
Последствия: Без нормального тестирования развёрнутых сайтов может случиться так, что пользователи столкнутся с весьма неприятными ошибками. Мало того, что сайт может работать совершенно некорректно, так ещё могут появиться лазейки для хакеров.
Как избежать: Необходимо принять как данность, что людям свойственно ошибаться. В том числе и вам. Если вы пишете на JavaScript, то применяйте грамотные методики для предотвращения и поиска ошибок. Можно воспользоваться большинством советов из этой статьи: http://www.palermo4.com/post/JavaScript-for-Windows-Store-Apps-Error-Handling.aspx, несмотря на то, что она предназначена для JS-разработчиков Windows-приложений. Также хорошим подспорьем в создании качественного кода будет модульное тестирование.
Все ошибки на бэкенде нужно обрабатывать так, чтобы пользователи не становились свидетелями подробностей. Выводите только то, что необходимо, и создайте правильную страницу 404.
Написание ветвящегося кода
Ошибка: Ради великой цели обеспечить поддержку всех браузеров и их версий, многие разработчики создают код, обрабатывающий все возможные сценарии. В результате он превращается в хаотичную кучу операторов if.
Последствия: С выходом новых версий браузера вам будет всё труднее поддерживать проект, он будет всё более громоздким.
Как избежать: Внедрите в код определение возможностей браузера, а не проверку браузера/версии. Это позволит очень сильно уменьшить объём кода, сделает его более читабельным. Например, можно воспользоваться библиотекой Modernizr, которая поможет автоматически поддерживать старые браузеры, не знакомые с HTML 5 или CSS 3.
Неадаптивный дизайн
Ошибка: При создании сайта разработчики и дизайнеры используют мониторы одного размера/разрешения.
Последствия: Вряд ли нужно кому-то объяснять, что на экране ноутбука и смартфона сайты выглядят очень по-разному. И решения, подходящие для больших экранов, совершенно не годятся для мобильных устройств. Бывает и так, что на маленьких экранах сайтом невозможно пользоваться, поскольку ряд важных элементов становится недоступным.
Как избежать: Адаптивный дизайн — наше всё. В сети есть много публикаций на эту тему, включая работу с адаптивными изображениями. Одной из наиболее популярных библиотек для адаптивного дизайна является Bootstrap.
Создание "бесполезных" страниц
Ошибка: Страницы, наполненные полезным контентом, но совершенное недружественные к поисковикам. Не внедрены специальные возможности для слабовидящих пользователей.
Последствия: Страницы, по которым не могут путешествовать поисковые боты, будут иметь очень низкую посещаемость, если она вообще будет. Содержимое страницы может быть практически не читаемо для пользователей со слабым зрением.
Как избежать: Используйте SEO и поддержку специальных возможностей в HTML. Добавляйте в тэги ключевые слова и описания. В частности, об этом хорошо написано на About Tech. Чтобы помочь пользователям, которые не могут похвастаться орлиным зрением, добавляйте ко всем изображениям описание с помощью атрибута alt; есть ещё немало советов на эту тему. Можете также протестировать свои страницы с помощью Cynthia Says на предмет соответствия Section 508.
Слишком много обновлений страницы
Ошибка: Создание сайтов, которые для каждого действия требуют полностью обновить страницу.
Последствия: Аналогично тому, что бывает в случае со слишком большими ответами на сетевые запросы — страдает производительность, увеличивается время загрузки. Пользователи будут недовольны, потому что из-за каждого «чиха» им придётся ждать очередной загрузки.
Как избежать: Определите, действительно ли нужно каждый раз обращаться к серверу? Иногда скрипты на клиентской части можно использовать для немедленного предоставления данных пользователю. Также очень популярна технология AJAX. Можно пойти ещё дальше и применить методику SPA. С внедрением этих подходов вам помогут различные библиотеки, например, JQuery, KnockoutJS, AngularJS.
Работа с рассвета до заката
Ошибка: Вы тратите очень много времени на создание веб-контента, на повторяющиеся задачи, или просто на набор текста и кода.
Последствия: На запуск и дальнейшие обновления сайта уходит слишком много времени. И если другие разработчики за тот же промежуток времени делают гораздо больше, то ваша ценность как специалиста снижается. Чем больше ручного труда, тем выше вероятность ошибок, которые тоже потребуют времени на устранение.
Как избежать: Изучите доступные возможности. Выберите новые инструменты или методики для каждого этапа разработки. Может быть, ваш редактор кода далеко не идеален и есть куда более удобные приложения, позволяющие экономить время? Насколько хорошо вы знаете и используете возможности своего редактора? Возможно, стоит немного покопаться в документации, чтобы открыть для себя новые возможности и в дальнейшем экономить ценные минуты, а то и часы на выполнении каких-то задач?
Также обратите внимание на разнообразные веб-инструменты. Скажем, средства для упрощения процесса тестирования на разных платформах и устройствах. Экономить время можно и с помощью автоматизации процессов: например, Grunt может автоматизировать минификацию файлов, а Bower облегчает управление библиотеками и фреймворками.
* * *
Бывает, что даже достаточно опытные веб-разработчики допускают какие-то из вышеописанных ошибок. И важно не только знать, чего нужно избегать, но и понимать возможные последствия тех или иных неверных решений. Это позволит упростить и облегчить процесс разработки, создавая действительно качественные и приятные в использовании сайты.
Поговорим о том, какие ошибки часто допускают новички, которые только начинают создавать сайты на базе WordPress и не знают, как правильно действовать, чтобы выжать из своего ресурса максимум.
Перечисленные ниже ошибки можно исправить на действующем ресурсе. Не придется создавать новый сайт, если вы уже допустили ошибку. Все поправимо.
Некорректный выбор WordPress-хостинга
Многие пользователи совершают распространенную ошибку, когда используют WordPress.com как веб-хостинг. Это официальный сайт проекта, но не просто платформа для разработки ресурса, а еще и хостинг сайтов. Поэтому на WP.com с вас попросят деньги – от 455 рублей в месяц за создание и поддержку сайта. Но сама CMS бесплатная, платить за программное обеспечение WordPress не нужно.
А хостинг можно выбрать на свой вкус. Например, Timeweb. Для этого нужно:
-
Зайти на официальный сайт провайдера.
-
Навести курсор на вкладку «Хостинг».
-
Затем перейти по ссылке «Хостинг для CMS».
-
Там можно выбрать платформу WordPress и арендовать хостинг на гораздо более выгодных условиях (сразу 10 Гбайт SSD, 10 сайтов и 10 баз данных).
При оплате за год Timeweb дарит бесплатный домен и SSL-сертификат. На WordPress.com ничего подобного нет, при этом функциональность движка остается прежней.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Недостаточная защита WP-сайта от взлома
При аренде сервера и первичной настройке сайта на базе WordPress административная панель защищена базовым логином Admin. Timeweb, при установке WP на хостинге, выдает более сложный пароль, чем немного усиливает защиту ресурса, но стандартное имя пользователя все еще упрощает взлом сайта.
Так что сразу после создания проекта надо заменить имя Admin на что-то индивидуальное и сложное. Чтобы это сделать:
-
Открываем административную панель WordPress.
-
Переходим во вкладку «Пользователи».
-
Изменить данные существующих пользователей нельзя, поэтому нажимаем кнопку «Добавить нового пользователя».
-
Задаем нужные параметры (имя, адрес электронной почты и пароль).
-
Затем выделяем пользователя Admin и нажимаем на кнопку «Удалить».
Это заметно сократит шансы злоумышленников на взлом сайта.
Настройка структуры постоянных ссылок
При переходе по любой из ссылок на WordPress-сайте в адресной строке появится URL. По умолчанию этот URL выглядит как что-то в духе moy-sait.ru/&p-17. Не особо информативно, неудобно и некорректно с точки зрения SEO.
Чтобы изменить адреса страниц:
-
Открываем административную панель WordPress.
-
Кликаем по вкладке «Настройки».
-
Выбираем там подпункт «Постоянные ссылки».
-
Ставим галочку напротив пункта «Название записи».
-
И жмем по кнопке «Сохранить изменения».
После этого в URL будет отображаться не абстрактный номер, а название статьи.
Но на этом моменте возникает сложность, связанная с использованием кириллицы в названии статей. Чтобы это исправить, необходимо установить плагин Cyr-To-Lat. Он трансформирует кириллические знаки в латиницу. Его можно найти в галерее плагинов за соответствующей вкладкой в админке CMS. Нужно зайти на страницу Cyr-To-Lat и нажать на кнопку «Установить».
Затем переходим в настройки плагина и кликаем по кнопке «Конвертировать существующие ярлыки».
Отсутствие резервного копирования
Четвертая распространенная ошибка – игнорирование резервного копирования ресурса.
Резервная копия (или бэкап) – это все файлы, настройки и информация из баз данных, подключенных к ресурсу. Они необходимы на случай возникновения технических проблем, сбоя в работе хостинга, взлома со стороны злоумышленников или некорректных настроек.
Многие начинающие администраторы забывают о создании копий. Вносят изменения в код сайта, экспериментируют, допускают критическую ошибку, ломают сайт или случайно что-то удаляют, но из-за отсутствия резервной копии не могут быстро исправить случившееся.
Кроме того, после обновления CMS или темы оформления из-за «кривых рук» сторонних разработчиков или несовместимости плагинов может рухнуть ваш сайт. И без резервной копии вы снова окажетесь в безвыходной ситуации.
Самый простой способ сделать резервную копию WordPress
Если вы пользуетесь услугами хостинга Timeweb, то можете сделать резервную копию всего сайта в один клик через панель управления провайдера.
Для этого:
-
Переходим на страницу управления сервером (или хостингом).
-
Кликаем по вкладке «Резервные копии» в меню слева.
-
Затем нажимаем на кнопку «Создать резервную копию».
-
Ждем, пока завершится создание копии.
На хостинге Timeweb бэкапы регулярно создаются в автоматическом режиме. Все они доступны в специальном разделе панели управления и «живут» там в течение 30 дней.
О других способах создать резервную копию я рассказывал ранее.
Снижение производительности и безопасности за счет установки лишних плагинов
Расширяемость WordPress – это здорово. Плагины позволяют добавить в CMS кучу новых функций, недоступных по умолчанию. Но у расширений для WP есть два серьезных недостатка:
-
Каждый плагин – дополнительная нагрузка на сайт, на сервер и базу данных.
-
Каждый плагин – дополнительный инструмент для взлома сайта, так как регулярно в расширениях появляются бреши, позволяющие злоумышленникам получить доступ к ресурсу.
Многие пользователи начинают свою работу в WordPress с установки десятков плагинов. Кто-то делает это на будущее, кто-то думает, что только с кучей плагинов можно сделать хороший ресурс, а кто-то делает это под давлением маркетинга (рекламы плагинов в интернете). На деле большая часть этих дополнений вовсе не нужна и приносит только вред. Так что стоит заняться чисткой.
Видите в списке установленных плагинов что-то неизвестное? Удалите. Ставьте минимум расширений. Только те, без которых обойтись нельзя.
Отсутствие сертификации и протокола HTTPS
Сертификат SSL – это необходимость. Он обеспечивает шифрование данных и в разы повышает безопасность передачи данных между клиентом и сервером. Шансы на взлом ресурса стремительно падают. К тому же только зашифрованным сайтам дается право на подключение платежных систем. Кроме того, роботы Google и Яндекса повышают позиции HTTPS-сайтов в поисковой выдаче. В общем, SSL-сертификат дает массу преимуществ, став неким индустриальным стандартом.
Чтобы получить сертификат:
-
Открываем панель управления хостингом (в нашем случае это Timeweb).
-
Открываем вкладку SSL-сертификаты.
-
Нажимаем на кнопку «Заказать».
-
В открывшемся списке выбираем сертификат, который подходит именно вам.
-
Затем выбираем домен, к которому нужно подключить сертификат.
-
Включаем тумблер для настройки сертификата мастерами Timeweb (это дополнительная услуга за 50 рублей, гарантирующая корректную первичную настройку сертификата).
Для начала можно использовать сертификат Let’s Encrypt. Он бесплатный, автоматически продлевается и позволяет включить шифрование. Но он не дает возможности принимать платежи на сайте. Для этого придется подключить платный сертификат с повышенной степенью защиты данных.
После этого в адресной строке браузера при посещении вашего сайта появится замок, обозначающий наличие HTTPS на ресурсе, что положительно скажется на оптимизации ресурса.
Отсутствие оптимизации сайта
Search Engine Optimization (SEO) – это процедура оптимизации ресурсов под поисковые движки. С помощью оптимизации сайты занимают более высокие позиции в поисковой выдаче и чаще попадаются пользователям, разыскивающим в сети ответы на свои вопросы.
Есть масса методик оптимизации страниц под Google и Яндекс, но они требуют работы специалистов. Для начала рекомендую воспользоваться полуавтоматизированной системой – расширением для WordPress под названием Yoast SEO. С помощью плагина можно расставить SEO-метки (ключевые слова, по которым будет находиться сайт), заголовки, описания для сниппетов и т.п.
Вместо заключения
На этом все. Я рассказал об основных ошибках, которые допускают начинающие администраторы и вебмастера. Эти ошибки явно подпортят производительность и эффективность сайта, поэтому стоит исправить их как можно скорее. К тому же сделать это довольно просто, если четко следовать шагам из статьи.