Снова здравствуйте! В предыдущих статьях мы разбирали, как правильно оценивать контент сайта, его продающие способности и юзабилити.
Вёрстка – это когда программист создаёт полноценную веб-страницу на основе макета, который сделал дизайнер.
Теперь давайте ещё проще. Дизайнер нарисовал макет страницы. На ней есть кнопки, карточки товара, форма обратной связи и другие элементы. Но пока это лишь картинка. Так вот верстальщик с помощью HTML-вёрстки и чёрной магии превращает эту картинку в рабочую страницу. Если он сделал свою работу качественно, сайт будет конвертировать посетителей в покупателей. Если нет, то после 10 секунд мучений с кривой вёрсткой пользователь закроет страницу и перейдёт к конкурентам.
А теперь о том, как выглядит качественно свёрстанная страница:
- Всё ровно, аккуратно и красиво. Нет «съехавших» картинок, текста и прочих элементов. Кнопки, формы и ссылки исправно работают.
Это видно без особых знаний. Просто откройте страницу сайта.
Правильно:
Неправильно:
- Адаптивность и кроссбраузерность. Страница качественно отображается в любом браузере и на любом устройстве (ПК, смартфоны, планшеты).
Чтобы оценить этот фактор, зайдите на сайт с пары-тройки разных браузеров на компьютере и телефоне. Ключевой фактор – Вы не испытываете никаких неудобств при навигации по сайтам.
- Код без мусорных тэгов и ошибок. Он короткий настолько, насколько это возможно, все стили вынесены в отдельный файл. Структурирован, наглядно показаны все открывающиеся и закрывающиеся теги. Имеет блочную структуру, страница представляет собой совокупность блоков <div>.
Чтобы проверить код, кликните правой клавишей мыши на странице и выбрать параметр «просмотреть HTML-код».
Но самому проверять качество вёрстки не обязательно, особенно, если ничего в ней не понимаете. Это можно сделать с помощью автоматизированных сервисов:
- http://www.browsercam.com/ – очень удобная утилита, позволяющая проверять до 10 URL одновременно или вообще запустить комплексную проверку сайта вплоть до поддоменов. Единственный минус программы заключается в цене. Но если Вам не жалко сотни вечнозелёных в месяц, то милости просим.
- http://browsershots.org/ – бесплатная альтернатива. Ставите сайт на проверку, ждёте своей очереди. Одновременно можно проверять одну страницу. Ждать результатов придётся в среднем от получаса до двух часов. Если хочется сэкономить и проверить жирненький сайт с большим количеством страниц, придётся запастись терпением.
- http://validator.w3.org/ – проверка валидности (чистоты кода). Быстро и бесплатно.
Помните, что плохо свёрстанные страницы не только отпугивают пользователей. Они также негативно влияют на ранжирование сайта в поисковых системах. А теперь снова небольшое резюме к разделу.
Плохо: элементы расположены не то что не под линеечку, а как будто они пережили землетрясение и цунами одновременно. В коде настолько много мусора, что половина кнопок не работает, а половина ведёт не туда, куда нужно. Пока прогрузилась страница, Вы трижды заварили себе кофе (чтобы не уснуть от ожидания). Да, и почему футер сделали на месте шапки?
Хорошо: все элементы страницы расположены пропорционально и ровно, хоть под микроскопом разглядывай, погрешностей не будет. Все функциональные модули работают так же чётко, как швейцарские часы. Каждый бесперебойно и правильно выполняет возложенную на него функцию. Всё грузится в мгновение ока.
Поисковая оптимизация (SEO)
Сложно оценить работу сеошника, если Вы не сеошник. Но мы не будем углубляться в тёмные пучины SEO и рассмотрим только то, что будет понятно простому пользователю ПК. Но эти моменты действительно важные и нужные.
- Title, description, keywords – три кита, с которых начинается раскрутка сайта. Это мета-теги для предоставление структурированных мета-данных HTML-страницы. Чтобы особо не загоняться, просто скажем, что они очень нужны для ранжирования сайта поисковыми системами. И если их нет или они прописаны неверно, то сайт просто будет терять свои позиции и падать вниз.
Правильные мета-теги содержат в себе релевантный (подходящий) для своей страницы целевой запрос. Кстати, проверить «правильность» мета-тегов можно с помощью бесплатного сервиса https://promopult.ru/tools/parser_tag.html.
- ЧПУ (человеку понятный УРЛ, человекоподобный УРЛ). URL – это то, что написано в адресной строке браузера, то есть ссылка на страницу. В ней не должно быть абракадабры! Только простая и понятная для восприятия человеком ссылка. Давайте на примере:
Неправильно: site.ru/pages.php?cat=cont&id=33
Правильно: site.ru/contact
И дело тут не только в том, как на это посмотрит человек. Скажем больше – это вообще не очень важно. На наличие ЧПУ смотрят поисковые системы, и если последнего не обнаруживают, то очень сильно обижаются. А когда они обижаются, Ваш сайт стремительно падает в низы поисковой выдачи, где потенциальные клиенты его искать никогда не будут.
- Заголовки всех уровней. Они называются h1, h2, h3, h4 и так далее — чем больше цифра, тем ниже уровень заголовка. Они нужны для того, чтобы объяснить человеку и роботу, какая информация содержится в тексте страницы. В заголовок вписываются ключевые фразы с релевантным странице содержанием. Если на сайте такого нет, то дело очень плохо.
- Скорость загрузки страницы. Или PageSpeed. Определяет, насколько быстро прогружается всё содержимое страницы. Быстрее – лучше. Если страничка долго грузится, это начинает бесить пользователей и поисковых роботов, что приводит сами знаете к чему.
Проверяется просто. Либо оцените, как долго открывается страница лично (зайдите на сайт), либо воспользуйтесь специальным инструментом от заботливых ребят из Google. Кстати вот он – https://developers.google.com/speed/pagespeed/insights/?hl=RU. - Сниппеты. Это краткое описание самого сайта или его отдельной страницы, которое пользователь видит в поисковой выдаче. Состоит из заголовка и аннотации (краткого описания) к странице. Нередко включает в себя адрес и другую информацию.
Качественный сниппет состоит из:
- Привлекательного заголовка, который также должен быть релевантным основному содержанию сайта или страницы.
- Фавиконки, то есть маленькой иконки, которая соответствует фирменный стиль компании или концепции оформления сайта.
- «Быстрых» ссылок на самые важные или продающие страницы сайта.
- Навигационной цепочки. При этом обязательно правильно настройте на сайте «хлебные крошки».
Вроде всё. Этого хватит для самостоятельной проверки сайта на качество «заточки» под поисковую оптимизацию. Теперь резюме.
Плохо: Про мета-теги вообще не слышали, URL написан на языке десептиконов, заголовков нигде нет, скорость прогрузки страницы чуть ниже, чем у среднестатистической улитки. Сниппет при этом написан вообще никак, он не отражает содержание страницы, не содержит ключевых запросов.
Хорошо: Мета-теги прописаны с учётом релевантных странице запросов. URL написан понятно, его понимаете и Вы, и поисковой робот. Весь контент тщательно структурирован с помощью заголовков, в которые незаметно и гармонично вписаны ключевые фразы. Страница загружается после клика мышью. Грамотно написанный сниппет отражает всё содержание сайта в нескольких словах, в него вписан ключевой запрос, есть ссылки на важные страницы.
Наше послесловие
Не будем ходить вокруг да около – если хотя бы один пункт из списка не выполнен или выполнен, но с грубыми погрешностями, стоит задуматься о профессионализме команды, которая работала (работает) над сайтом и поискать другую компанию. Надеемся, что эта статья поможет найти Вам компетентного и ответственного разработчика.
До встречи в новых публикациях! Ставьте палец вверх и подписывайтесь на наш канал, а мы будем регулярно дарить Вам новые порции полезного и информативного контента. Кстати, больше статей ищите в нашем блоге.
Блог веб-разработки INTRID – https://intrid.ru/blog
Мы ВК – https://vk.com/intrid_web_studio
Мы в FB – https://www.facebook.com/intrid