В отношении конструкторов сайтов со стороны профессиональных веб-разработчиков предъявляется большое количество претензий. Одна из основных — отсутствие доступа к HTML-коду. Соответственно, ошибки, которые неизбежно возникают в кодировке сайтов на любом движке, невозможно исправить вручную. Я не настолько силен в веб-программировании, чтобы вступать в дискуссию по столь сложному вопросу. Но тема меня весьма волнует, так как личный сайт создан в CMS-конструкторе Wix. Попробуем разобраться, насколько количество ошибок в HTML-коде сайта зависит от CMS-платформы.
Именно к Wix почему-то самое предвзятое отношение со стороны отечественных сайтостроителей даже по сравнению с тем же конструктором Тильда. Например, на Яндекс.Кью, где в своем сообществе периодически пишу о конструкторе Викс, получаю стабильные дизлайки и возмущенную критику. Естественно, от разработчиков, использующих альтернативные CMS-платформы.
Чтобы понять насколько все плохо, я провел небольшое исследование на предмет взаимосвязи ошибок в HTML-коде, CSS и выборе программных платформ для создания сайтов. Результат получился довольно любопытным. Не претендую на полномасштабность, но все сайты взяты из ТОП рейтингов или выдачи поисковых систем. Некоторые из них очень популярны и знакомы многим пользователям Рунета в определенной теме.
Что такое валидация HTML
Данный показатель является одним из основных факторов, влияющих на качество веб-дизайна. Консорциум Всемирной паутины (W3C) — это международное сообщество, которое де-факто определило стандарты написания HTML-кода. Эти правила были созданы для того, чтобы браузеры могли корректно обрабатывать код и правильно отображать веб-страницы. Последняя версия HTML5 добавила интересные функции, такие как хранение данных локально в браузерах пользователей, встроенная поддержка аудио и видео, поддержка векторной графики и прочее.
На что влияет показатель валидности HTML-кода
поддержка кроссбраузерности: если код сайта валиден, то ресурс примерно одинаково будет отображаться во всех популярных обозревателях;
оптимизация в поисковых системах: повышается вероятность правильной индексации содержимого страницы поисковиками;
снижается вероятность возникновения ошибок верстки в разных браузерах без изменения CSS (стиль сайта);
правильный код снижает вероятность возникновения проблем на веб-странице при редактировании CSS или добавлении новых фрагментов кода HTML;
если код соответствует требованиям W3C, то это снижает вероятность возникновения проблем с отображением сайта в новых версиях браузеров.
Убедительно для того, чтобы откровенно бояться появления ошибок в HTML-коде на сайте, верно? Посмотрим, как все обстоит на деле.
Проверка валидности HTML страниц сайтов, созданных в разных CMS
Увидеть код любой страницы сайта легко. Достаточно открыть ресурс в любом браузере и нажать комбинацию клавиш «Ctrl+U». Вот так выглядит код главной страницы моего сайта в Яндекс.Браузере:
Согласитесь, сложно, не очень красиво и совсем непонятно. Воспользуемся одним из сервисов автоматической проверки HTML-кода и CSS Markup Validation Service. Проверка выполняется по нескольким параметрам, основные из них:
Валидация синтаксиса — проверка на наличие синтаксических ошибок. <foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> не является допустимым HTML-тегом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.
Проверка вложенности тегов — теги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми <div>.
Валидация DTD — проверка соответствия кода указанному Document Type Definition. Она включает проверку названий тегов, атрибутов, и «встраивания» тегов (теги одного типа внутри тегов другого типа).
Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские теги и атрибуты.
Имейте в виду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным.
Результаты тестирования сайтов разных CMS на ошибки HTML и CSS
Начну со своего сайта. Чтобы не усложнять процедуру, протестировал Главную страницу. Результат вроде как удручающий: 124 ошибки в HTML-коде, из них 3 предупредительные, и 47 багов в CSS. Но не будем торопиться с выводами и переносить сайт, созданный в том же Викс, на безупречный WordPress или крутую «Битрикс». Посмотрим вначале, как обстоит дело с другими ресурсами, созданными на бесплатных, условно-платных и весьма недешевых движках.
Сайт | CMS | HTML-ошибки | Ошибки CSS | Примечание |
|---|---|---|---|---|
WordPress | 42 | 33 | Копирайтинг | |
WordPress | 92 | 93 | Разработчик сайтов WP | |
WordPress | 254 | 3 | Лайфхакер | |
Битрикс | 24 | 8 | Texterra | |
Tilda | 167 | 8 | Разработчик сайтов Тильда | |
Tilda | 372 | 22 | Сайт конструктора Тильда | |
MODX | 23 | 37 | Интернет-магазин | |
Joomla | 29 | 6 | Сайт киножурнала | |
Wix | 35 | 77 | Сайты на WIX |
Конечно, обзор выглядит немного хаотичным. Но я не ставил задачу проведения полномасштабного исследования. Просто хотел показать, что ошибки кодов и верстки присутствуют в разной степени у всех без исключения сайтов, на каком бы CMS-движке они не были созданы. Обратите хотя бы внимание на саму платформу конструктора сайтов Tilda — прямого конкурента Wix и фаворите в России. Платформа в лидерах по количеству багов HTML. В то время как сайт разработчика Викс выглядит очень даже неплохо.
Влияние ошибок HTML-кода сайта Викс на кроссбраузерность и поисковую оптимизацию
Раз валидность так важна для корректного отображения в различных обозревателях, проверяю кроссбраузерность главной страницы своего сайта Викс в следующих браузерах: Яндекс.Браузер, Opera, Firefox, Google Chrome, Atom, Tor. Устанавливаю разный масштаб от 100 до 125%, меняю размер окон. Причем у меня два монитора с разными настройками разрешения — 1600х900 и 1920х1080. Все страницы сайта отображаются корректно, верстка элементов не съезжает. Аналогичная ситуация на смартфоне с мобильной версией.
А что с поисковой оптимизацией? В Яндекс.Вебмастере все страницы сайта имеют статус 200 ОК, никаких ошибок нет. Рекомендация касается только подключения Турбо-страниц. Так же дело обстоит в Google Search Console и в новом инструменте контентного анализа Google Search Console Insights.
Вывод
Прямой зависимости между платформой по созданию сайтов и количеством ошибок в HTML-коде и CSS нет. Так же как популярность, индексация и даже ранжирование в ТОП поисковиков могут быть очень высокими при наличии большого количества ошибок в коде.
Настройки конструктора сайтов Wix позволяют минимизировать количество ошибок в коде HTML не хуже, чем на других платных и бесплатных CMS-платформах. Особенно с учетом возможности эксклюзивного инструмента настройки кода Wix Code.
Что касается WP, то как раз свободный доступ к исходному коду предъявляет высокие требования к уровню подготовки и опытности веб-программиста. Особенно для решения нестандартных задач дизайна, верстки, установки дополнений и плагинов. Для владельцев ресурсов, созданных на этой платформе, данный факт означает более внимательное отношение к квалификации разработчика, дополнительные затраты на найм профессиональных программистов.
Следует также различать, что ошибки кода делятся на критичные и некритичные. Здесь все зависит от веб-программиста, который создает и ведет ресурс. Не важно, на каком движке. К тому же современные браузеры, что видно из моего пусть весьма хаотичного обзора, совершенно нормально обрабатывают сайты с большим количеством некритичных ошибок валидации. Да и поисковые системы, на мой взгляд дилетанта, весьма лояльны к таким ресурсам при корректной настройке параметров SEO и других значимых для ПС факторов.
Получается, что все эти утверждения, что в конструкторах полная помойка с кодами, полный бред? А мне приходится, блин, платить за крутых вебспецов! Типа, только на этом движке все ок с хмл! Сцуко, разводчики!