10 важных вещей при разработке сайта

Рассказываем о 10 вещах, которые важно проверить, прежде чем запускать новый сайт. Объясняем, почему без них не обойтись, делимся полезными инструментами для проверки и решениями.

Дизайн

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

1. Фавикон

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

Размер фавикона

Размер варьируется в зависимости от версии браузера и операционной системы. Чтобы фавикон масштабировался без ухудшения качества, лучше использовать форматы .ico, .png или .svg размером 16 x 16px или 32 x 32px с прозрачным фоном.

Качественный фавикон:

Ассоциируется с вашим брендом.
Отличается от фавиконов конкурентов.
Сразу понятно, что на нём изображено.

Где создать фавикон?

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

2. Дизайн страницы 404

Об этой странице часто забывают при разработке сайта. Ошибка «404 Not Found» показывается, когда пользователь пытается перейти на страницу, которой нет на сервере. Стандартная браузерная страница 404 невзрачная, не несёт в себе информации и не связана с вашим сайтом. Человек, попавший на такую страницу, либо возвращается на предыдущую, либо покидает сайт.

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

При правильном подходе страница 404 может не ухудшить показатели сайта, а улучшить их и стать конверсионной.

Что для этого нужно сделать?

Добавьте навигационные ссылки на основные разделы, страницу «О нас» и «Контакты».
Разместите видео о продукте или gif-анимацию, чтобы удержать пользователя на странице.
Для тех, кто не знаком с брендом, добавьте форму поиска по сайту или форму обратной связи с призывом сообщить об ошибке.

Не определились, что именно хотите разместить на своей странице 404? Почерпнуть вдохновение можно из подборок лучших страниц 404.

3. Превью для расшаривания страниц og:

Open Graph это разновидность микроразметки, которая формирует превью, если пользователь делится ссылкой на страницу. Практически во всех CMS есть специальные плагины для микроразметки, или же её добавляют вручную в код страницы строку:

<meta property="og:image" content="https://yoursite.ru/i/preview.png" />

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

Зачем нужны картинки в превью?

Они повышают привлекательность размещённой ссылки и увеличивают конверсию. Разметку og поддерживают все популярные соцсети и мессенджеры (Facebook, Pinterest, Viber, VK, Telegram, WhatsApp). Чем больше информации, в том числе визуальной, у пользователя, тем больше шансов, что он перейдёт по ссылке на ваш сайт.

Технические нюансы

Продолжим наш список некоторыми неочевидными техническими моментами, которые упускают из виду при разработке сайта.

4. SSL-сертификат

Что такое SSL-сертификат и зачем он нужен

Яндекс и Google внимательно следят за безопасностью данных пользователей и рекомендуют использовать протокол https, а не http. Если SSL-сертификат получен, браузеры показывают значок замка в начале адресной строки и красный разбитый замочек, если нет. Сайтам с красным замочком не доверяют пользователи, а Google не допустит такой сайт на первую страницу выдачи.

Как подключить сертификат

Как подключить SSL-сертификат? Сначала получите его от удостоверяющего центра (можно бесплатно). Чтобы установить на сервер SSL и подготовить сайт технически, можно обратиться к поставщику услуг хостинга.

5. Файл sitemap.xml

Что такое sitemap?

Sitemap (карта сайта) — это инструмент, который помогает поисковым роботам разбираться в структуре вашего сайта и понять, какие страницы посещать, а какие нет.

Как узнать, что с картой сайта всё в порядке?

Чтобы убедиться в её наличии, допишите после адреса /sitemap.xml. Убедитесь, что карта показывает реальную структуру сайта, отображает все страницы, которые есть на сайте. Дополнительно можно скормить URL-ссылку поисковикам через Яндекс.Вебмастер и Google Search Console, чтобы робот обошёл все страницы.

Что, если файла нет?

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

Чтобы сгенерировать карту сайта, есть специальные сервисы.

6. Файл robots.txt

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

Чтобы проверить, есть ли файл у вашего сайта, допишите /robots.txt к его адресу. Страницы после тега Disallow в поиске не отображаются.

Также проверить правильность файла можно в Яндекс.Вебмастере, раздел «Инструменты» пункт «Анализ robots.txt». Для этого выделите всё содержимое файла или страницы, которая открылась по yoursite.ru/robots.txt, и вставьте в специальное поле проверки robots и нажмите «Проверить».

Если обнаружилось, что файла нет, нужно сгенерировать его с помощью специального сервиса, сохранить в файл, назвать его Robots.txt и загрузить в корневой каталог сайта.

7. Счётчики посещаемости

Счётчики устанавливают уже после разработки сайта. Они будут снабжать вас данными о том, откуда пользователи приходят на сайт, на какие страницы, заполняют ли формы. Основываясь на этих данных, можно целенаправленно улучшать некоторые страницы сайта, чтобы люди оставались на них дольше, взаимодействовали с ними. Это влияет на позицию сайта в выдаче поисковиков.

Google Analytics и Яндекс.Метрика.

Чтобы пользоваться сервисом Google Analytics, нужно установить на сайт счётчик. Создать его можно в личном кабинете платформы Google Analytics. Здесь вы укажете адрес своего сайта и получите код отслеживания. Потом установите его на сайт (добавьте в код после тега ..., через настройки админки CMS или передайте задачу разработчикам). Яндекс.Метрика это похожая платформа от Яндекса.

Не забудьте настроить счётчик в личном кабинете в Google Analytics и Яндекс.Метрике. Отслеживать можно не только посещения, но и любые целевые действия. Например, добавление товара в корзину, оплаченная покупка, отправленная форма или заявка.

8. Редирект с www

www.site.ru и site.ru для поисковиков это два разных сайта. Чем они отличаются друг от друга? Префикс www устаревший, когда-то в нём была техническая необходимость, но теперь им не пользуются. Чтобы пользователи находили вас по адресу без www, пропишите его в файле robots.txt и Яндекс.Вебмастере. Запись в конце файла robots.txt должна выглядеть так:

Host: https://yoursite.ru

После этого нужно настроить перенаправление с адреса www.yoursite.ru на yoursite.ru. Тогда у пользователей всегда будет открываться ваш сайт, даже если они ввели в начале префикс www. Главное, чтобы в поисковом индексе был только один сайт. Иначе страницы будут считаться дубликатами, а сайт упадёт в выдаче.

Базовая оптимизация

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

9. Заголовки, тайтлы и мета-описания

Базовая SEO оптимизация это настройка тайтлов, описаний, мета-тегов и заголовков (H1, H2, H3... H5, div) страниц вашего сайта.

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

Заголовки H1–H5 размечают страницу для роботов поисковых систем. По заголовкам они определяют основное содержание страницы, чтобы потом показывать её в выдаче по самым подходящим запросам. Важно, чтобы базовая оптимизацию провели в конце разработки сайта, перед тем, как страницы начнут выдаваться в поисковых системах.

10. Политика конфиденциальности

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

Заключение

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