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

Какие ошибки чаще всего допускают на этом этапе предприниматели?

Первая и самая значительная ошибка: выбор неподходящей CMS. Например, сделать сайт магазина на системе для создания блога. Поэтому перед началом работ с сайтом нужно провести детальный анализ и определить, какая из существующих систем лучше решит ваши задачи. Для одного сайта лучше подойдет Tilda, для другого – Wordpress, есть поклонники Shopify или индивидуальных разработок.

Если попробовать проранжировать список CMS для магазинов и контентных сайтов, то, вероятно, следует выделить следующие системы.

Для интернет-магазинов:

• 1C-Битрикс (платная)

• Magento (платная и бесплатная версии)

• WooCommerce (бесплатная, но требует WordPress)

• OpenCart (бесплатная)

• Shopify (платная, но популярна во всем мире)

• PrestaShop (бесплатная)

• CS-Cart (платная и бесплатная версии)

• MODX (бесплатная)

Для контентных сайтов:

• WordPress (бесплатная)

• Joomla (бесплатная)

• Drupal (бесплатная)

• Tilda (платная)

• UMI.CMS (платная)

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

Часто клиенты спрашивают, где можно найти хороший шаблон? Я рекомендую в первую очередь шаблоны от команды TemplateMonster.com

Третья ошибка: попытка сэкономить на первом этапе запуска сайта. Многие находят дешевых специалистов, эдаких мастеров на все руки. Но я бы не рекомендовал доверять минимальной цене и сомнительному опыту. Очень часто бывает так, что эти люди ничего не понимают в SEO, и тогда вы получите сайт, совершенно не пригодный к продвижению в поисковых системах. Скупой платит дважды, помните?

Это и есть главная проблема – когда создание всего интернет-проекта поручают непрофессионалам. Одни предприниматели идут к фрилансерам, другие обращаются в рекламные или веб-агентства. Но спустя некоторое время и те и другие тратят немало денег, времени и сил, чтобы переделать сайт под требования специалистов по поисковой оптимизации – иначе они не смогут увеличить трафик и продажи.

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

Неопытный дизайнер может плохо разбираться (или совсем не разбираться) в основах проектирования сайтов, принципах продвижения в интернете, психологии и поведении пользователей. От этого может пострадать удобство навигации и поиска товара, что приведет к снижению посещаемости и конверсии.

Если дизайнер сделает макет в неподходящем формате, то специалист по верстке не сможет правильно сверстать проект.

Вам нужен уникальный дизайн? Нельзя экономить на веб-мастере, который сделает грамотную верстку, и работе фронтенд-программиста^[8]. От качества работы этих специалистов зависит весь функционал и скорость загрузки вашего сайта. Обычно, если сайт загружается дольше трех секунд, поисковики понижают его в рейтинге, а пользователи уходят, не дождавшись появления информации. Кроме того, опытные мастера избавят ваш сайт от «багов», которые могут обнаружиться в том или ином браузере.

Если у вас уже есть сайт, проверьте его валидатором от Google. Он оценивает все сайты по 100-балльной шкале, определяя их удобство для пользователей по категориям устройств, с которых они заходят: стационарных (компьютер, ноутбук) или мобильных (планшет, смартфон). Это разделение сделано не случайно, так как навигация и пропускная способность канала зависят от устройства.

Есть и технические проблемы, с которыми можно столкнуться при создании сайта. Например, если он не будет оптимизирован с точки зрения количества запросов к базе, снизится скорость работы. Или код окажется написан так, что при смене рабочей команды сайт рухнет, и будет проще сделать все с самого начала, чем восстановить.

Конечно, это уже тонкости. Главное, что вам пока нужно понять как владельцу сайта, – поисковые машины, которые будут приводить на сайт основную часть трафика, предъявляют особые требования к качеству кода и оптимизации сайта. Проверка сайта происходит по ряду параметров, которые разберем во 2-ой части книги.

Поэтому важно подходить к разработке сайта грамотно:

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

• Не изобретайте велосипед – используйте проверенные технологии.

• Особое внимание уделяйте удобству сайта, скорости его загрузки и качеству кода.

Важно помнить: при приеме проекта от разработчиков желательно периодически проверять главную и ряд других страниц сайта через сервис Google PageSpeed Insights и вкладку «Проверка мобильных страниц» в «Яндекс. Вебмастер», в идеале показатель «качество» должен стремиться к значениям выше 70–80.

Для проверки рекомендую тестировать типовые страницы интернет-магазина:

• главная;

• результаты поиска;

• категория с большим количеством фильтров и товаров без применения фильтра;

• категория с большим количеством фильтров и товаров с применением фильтра;

• карточка товара;

• корзина.

Рис. 5. Оценка качества странички при помощи Google PageSpeed Insights.

Обратите внимание: когда вы заказываете сайт у фрилансера или в студии разработки, у них в договоре и типовом техническом задании (ТЗ) нет подобных требований. Поэтому при их добавлении вы можете столкнуться с увеличением стоимости работ по вашему проекту.

И последнее, что тоже придется учесть. Сроки разработки сайта сильно зависят от выбранного вами типа CMS, а также от варианта дизайнерского решения – готовый или разработка «с нуля». Некоторые проекты можно создать буквально за пару недель, а некоторые потребуют до полугода.

Глава 3
Важность мобильного трафика

В последние годы пользователи все активнее выходят в интернет с мобильных устройств. Помните рис. 1 из первой главы? В России больше 60 % трафика приходится именно на долю смартфонов, и эта цифра продолжает увеличиваться. Поисковые системы также стараются, чтобы пользователи могли качественно выходить в интернет с любого устройства. Конечно, не столько ради заботы о людях, сколько потому, что потеря пользователя равносильна потере денег за рекламу, за счет которой живут поисковые системы. Поэтому любые сайты должны соответствовать ряду условий.

Для мобильных версий сайтов требования более строгие, так как мобильные устройства отличаются от стационарных:

• меньшим размером экрана;

• меньшим объемом оперативной памяти;

• медленной скоростью соединения;

• другим типом ввода.

Если у вас нет качественной мобильной версии сайта, про поисковое продвижение можете забыть.

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

Основные причины малого процента мобильного трафика на сайте или высоких показателей отказов^[9] пользователей:

• долгая загрузка страниц: адаптивные версии сайтов не должны загружаться дольше одной-двух секунд;

• непродуманный дизайн и некорректное отображение контента: если страницы не помещаются в маленький экран или кнопки меню «наезжают» одна на другую, посетители не будут разбираться, куда и как нажать, поэтому обязательно нужна подстройка дизайна сайта под портативные устройства;

• длинные, однообразные тексты: они и на компьютерах не каждым пользователем воспринимаются позитивно, а уж на мобильных устройствах тем более, поэтому стремитесь делить материалы на части и выдерживать структуру статьи, включать картинки и другие графические элементы;

• сложные формы заказа или обратной связи: чем меньше строк и обязательных данных в формах, тем лучше;

• ошибки 404: зачастую они возникают при попытке перехода на полную версию сайта.

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

Мобильная версия – это индивидуальный шаблон, который размещается на поддомене вида m.sait.com, по факту – второй сайт. Он снабжается крупными кнопками, специальным выпадающим меню и содержит минимальный функционал. При желании пользователь может перейти на обычную версию сайта. Основное преимущество этого варианта – быстрая загрузка из-за отсутствия объемных данных. Но есть и недостатки. Во-первых, во время перехода чаще всего случаются сбои и ошибки, в результате пользователь уходит на сайт конкурентов. Во-вторых, мобильная версия выглядит слишком скучно и просто и не задерживает посетителей надолго.

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

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

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

• скорость загрузки на 2G/3G/4G;

• размер шрифта (не менее 12 px);

• видимость всех важных элементов на страницах;

• кликабельность ссылок и номеров телефонов;

• расстояние между интерактивными элементами (не менее 48 px);

• площадь текста по отношению к экрану прокрутки;

• размер и вес аудио, видео, изображений;

• наличие автозаполнения в полях форм.

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

Часть 2
SEO-продвижение

Для поисковой системы задачи «давать адекватный ответ» и «гнать трафик на сайты веб-мастерам» ПЕРПЕНДИКУЛЯРНЫ.

[8] Фронтенд-программист – специалист, который отвечает за внешнюю часть сайта или приложения, с которыми взаимодействуют люди: меню, карточки товаров, кнопки, формы обратной связи и т. д. (Прим. ред.)

[9] Показатель отказов на сайте (Bounce Rate) – процент посетителей, которые покидают сайт после просмотра только одной страницы, не взаимодействуя дальше с контентом («Яндекс. Метрика» считает отказом визиты, продолжительность которых меньше 15 секунд). Веб-аналитика использует этот показатель для измерения того, насколько эффективно сайт удерживает посетителей и стимулирует их к дальнейшему взаимодействию.