Как создать лучший сайт для бизнеса в 2020 году

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

Как начать создание нового сайта

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

Это связано с тем, что часто разработчики, создающие новый сайт, забывают о аспектах SEO, таких как структура категорий, мета — теги — title/description, внутренняя ссылка или подготовка соответствующих перенаправлений 301. Это приводит к серьезным проблемам, заключающимся именно в меньшем или большем снижении позиций и, следовательно, снижении трафика, и восстановление этих позиций может занять до нескольких или даже десятков месяцев.

Поэтому, прежде чем приступить к работе, мы проанализировали структуру категорий, ссылки и позиции сайта для наиболее важных фраз. Мы обнаружили, что сайт достигает очень высокие позиции для фраз «Доктор Вера Калуга» или «Медицинский центр Доктор Вера», и наша цель состояла в том, чтобы эти высокие позиции оставались также после запуска новой версии сайта. Для этого мы запустили простой инструмент, который отслеживает и сохраняет позиции сайта для указанных фраз. Таким образом, мы смогли на постоянной основе проанализировать возможное снижение позиции после развертывания новой страницы.

Для более обширного сервиса стоит заранее проанализировать статистику в Google Analytics и информацию в Google Search Console. Это важные данные, которые позволяют создать лучший сервис и не подвергать себя риску падения позиции при запуске новой версии сайта.

Основные цели проекта

Основные цели проекта заключались в:
улучшение юзабилити сайта за счет лучшей презентации услуг и более удобной системы записи
улучшение внешнего вида сервиса на устройствах IOS и Android
лучшая оптимизация сайта для поисковых систем
возможность эффективного маркетинга и ремаркетинга

Оптимизация SEO

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

1. Первое изменение вы можете реализовать самостоятельно за несколько минут. Речь идет о маркировке вашего логотипа атрибутами alt и title.

Логотип в основном представляет собой изображение или, о чем ниже, вектор SVG. Таким образом, вы можете добавить к нему, как и к любому изображению, атрибут alt= и title=. Таким образом, вы можете легко насытить страницу важными ключевыми словами. Речь идет, конечно, не о списке фраз, а об одной основной фразе с дополнительным описанием того, о чем идет речь. Атрибут alt= — это альтернативный атрибут, используемый при индексации изображений и считывателями слабовидящих. Atrubut title= Это текст, который появляется при наведении на изображение.

В этом случае мы добавили те же атрибуты alt и title —Доктор Вера — Многопрофильный медицинский центр для взрослых и детей

И как добавить эти атрибуты? Найдите шаблон, отвечающий за заголовок страницы, и найдите его под «логотипом». Вы должны найти правильный div и в нем путь к изображению логотипа. Просто добавьте в тег изображения <img> добавить alt= «ваш текст» и title= «ваш текст».

 

 

2. Еще одна важная вещь-это .. «похудение» страницы. Вес страницы отвечает за скорость ее загрузки. Это один из наиболее важных факторов. Это стоит того, потому что скорость загрузки страницы учитывается Google и влияет на пользователей, использующих сайт. Они не любят слишком долго ждать загрузки страницы.

Чтобы уменьшить вес страницы, где это возможно, мы использовали векторы SVG вместо изображений m.in. для логотипов и значков. Векторы также имеют этот плюс что вы можете транслировать цвета непосредственно из кода, не нужно применять несколько изображений, что может повлиять на вес страницы.

Конечно, сами векторы не могут быть использованы, и необходимо использовать изображения. С другой стороны, вы можете оптимизировать их вес, создавая различные размеры изображений в зависимости от ваших потребностей — разрешение, устройство, и оптимизировать их качество.

 

Изменение внешнего вида 

Внешний вид и удобство использования сайта влияют на многие вещи. С одной стороны, это создает имидж бренда, а с другой-влияет на время, затрачиваемое на изучение сайт, и показатель отказов, что, в свою очередь, влияет на позиционирование, то есть на ранжирование страницы в Google и Yandex.

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

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

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

При входе на сайт загружались большие, качественные фотографии с популярными услугами. Такой слайдер услуг очень уместен. Мы добавили только рекламные лозунги и button CTA для перехода к текущим услугам. Это позволяет пользователю выполнить действие, нажав на button. Поля на слайдере выполняют еще одну важную функцию, но об этом через минуту.

Каталог и поиск услуг

Под слайдером с большой фотографией мы разместили самый важный элемент сайта-текущие услуги и поисковую систему с подсказкой услуг при вводе.

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

Названия продуктов-услуг мы разделили на категории, например, Отделения — название картотеки и словесное название-например, Ведение беременности. Для словесных названий мы использовали характеристики, чтобы мы могли использовать их для услуг по розничным ценам. Особенности мы также использовали для обозначения розничных цен. Такое использование функций позволило легко управлять услугами, фильтрации и дополнительной оптимизации SEO о том, что ниже.

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

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

Как уменьшить вес фотографий на странице

Этот абзац Вы можете оставить, если вы знаете, как справиться с тяжелыми фотографиями.

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

Как проверить размер изображения на странице

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

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

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

Как только вы оптимизируете изображения, вы можете оптимизировать их вес еще лучше. Просто воспользуйтесь сайтом www.tinyjpg.com, вам просто нужно отправить все файлы на сайт в массовом порядке, и он оптимизирует их размер. Затем вы загружаете их и загружаете на сайт. Таким образом, иногда можно снизить вес фотографий на 40-50%.

Как проверить размер изображения на странице

Продолжаем СЕО оптимизацию

Мы сделали еще одну оптимизацию для вышеупомянутого слайдера с большими фотографиями на главной странице. В предыдущей версии страницы загружалась сама фотография. Мы добавили к нему маркетинговые лозунги и button CTA, ведущие к текущим курсам. Маркетинговые лозунги — это в основном фразы, на которые позиционируется сервис. Описание услуги с ценой, и оно одновременно является заголовком H1. Это заголовок, который должен содержать самую важную фразу, на которую мы позиционируем данную страницу / подстраницу. На подстранице должен быть только один такой заголовок.

Еще одна строка с изменяющимися фразами-заголовок H2. Таких заголовков на странице может быть любое количество. Использование заголовков H1-H6 относится к технической оптимизации сайта и так же важно, как и скорость загрузки сайта.

Распространенной ошибкой является отсутствие заголовка H1 на странице или количество больше одного. Убедитесь, что на каждой подстранице есть ровно один, и его содержание должно соответствовать содержимому подстраницы.

Как узнать, есть ли заголовок H1 на странице? Откройте страницу, затем нажмите Ctrl + U-вы получите представление кода страницы. Затем нажмите Ctrl + F и запись <h1 — таким образом, вы можете найти в коде код, который отвечает за заголовок h1. Если вы его найдете — посмотрите, какой текст в нем, и измените его на соответствующий в вашем cms. Если его нет — позаботьтесь о том, чтобы он был добавлен в шаблон страницы.

Каталог услуг

Реализации каталога с услугами. Реализация его имела не только косметический эффект в виде плиток. Они также оказали влияние на SEO сайта. Каталог был разделен на несколько категорий.

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

Кроме того, каждая услуга имеет свою подстраницу с деталями, мета название которого оптимизируется под конкретную услугу. Таким образом, мы также получили дополнительные 1080 подстраниц, что также имеет значение с точки зрения SEO.

Адаптивность сайта

Еще одной важной проблемой стала оптимизация для устройств IOS/ANDROID. Здесь необходимо было правильно настроить шаблоны для больших разрешений типа Retina. Стоит иметь в виду, что устройства Apple имеют более высокие разрешения экрана, чем популярные в ПК full hd.

Важно, чтобы конфигурация распознавала устройство, и большие фотографии загружались только при необходимости. Аналогично на мобильных устройствах-чтобы не загружать большие изображения, необходимые в desktop, только их меньшие аналоги для mobile с меньшим разрешением.

SEO Тексты

На главной странице, а так же на второстепенных страницах мы разместили СЕО-тексты. Благодаря этому мы увеличили количество текста на всех страницах, которое раньше было слишком маленьким. Мы также изменили содержание отзывов клиентов на отзывы в профиле Facebook и добавили ссылку на эти отзывы. Благодаря этому клиенты могут проверить достоверность отзывов, что позволит создать положительный имидж компании.

Не большое ускорение сайта

Еще одна вещь, которую стоит развернуть на вашем сайте, — это минимизация файлов CSS и JS-скинов. Минимизация позволяет правильно объединять файлы и занимать меньше места и, таким образом, быстрее передавать их с сервера в браузер. У нас за этот процесс отвечает специальный модуль, работающий на сервере, являющийся частью системы Виртуализатор. Если вы используете WordPress, вы обязательно найдете подходящий плагин, который выполняет такое действие, например Fast Velocity Minify.

Резюме

Новая версия сайта была запущена месяц назад. На данный момент никаких провалов позиции не произошло, и сайт все время удерживает первую позицию для контролируемых фраз. Оптимизация SEO в новой версии сайта должна не только позволить сохранить позиции, но и укрепить их. Дополнительные подстраницы благодаря развернутому каталогу должны усилить страницу. Также возможно, что после индексации подстраницы каталога также будут ранжироваться в результатах Google и Yandex. В настоящее время индексируются фотографии услуг и появляются высоко в поиске фотографий.

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

Таким «холодным» пользователям может потребоваться больше времени для принятия решения о посещении цента. Часто реклама также может напоминать потенциальным клиентам о необходимости принять меры, которые по какой-то причине были проигнорированы ранее. Иногда потребность в стимуле к действию и реклама может помочь в такой ситуации.

Подробное описание
Сайт ландшафтного дизайна
Подробное описание
Сайт парка отдыха
Подробное описание
Сайт частной клиники
Подробное описание
Сайт энергетических подстанций
Подробное описание
Сайт базы отдыха
Подробное описание
Сайт парфюмерного магазина

А у Вас хороший сайт?

Мы улучшим Ваш сайт.

Звоните сейчас!