Сегодняшнюю статью я хочу посвятить валидации сайта (то есть HTML). Сперва определим что означает этот термин! Валидация сайта — это проверка синтаксических ошибок, проверка вложенности тэгов и другие критерии. Как правило, валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой. Если вы не знали для чего она, теперь будете знать! 🙂 Но для чего, собственно, нужна эта самая валидация и на что она влияет?
«Что такое валидация сайта?»
Как я уже говорил выше, валидация — это соответствие HTML-кода определенным правилам и стандартам. На смену XHTML пришла , которая значительно облегчила жизнь разработчикам. Дело в том, что в версии XHTML синтаксис был очень строгим. Если в HTML5 вы можете писать тэг переноса
как без наклонной черты, так в таком виде
, то в XHTML будет верным только последний вариант. HTML5 не так строг, да и к тому же появилось множество полезных тегов, но не об этом сейчас 🙂 .
«На что влияет валидация сайта?»
А сейчас ответим на второй вопрос.
Валидация сайта позволяет следить за правильным отображением сайта в разных браузерах. Например, если не закрыть тэг или где-то сделать опечатку в коде, в дальнейшем одна и та же страница может отображаться в разных браузерах по-разному. Также (CSS) могут отображаться не так как вы этого ожидали. Поэтому необходимо внимательно следить за этим.
Также я не мог не сказать что валидация влияет на поисковые системы: поисковые системы отдают предпочтение сайтам с валидным HTML-кодом . Имейте это в виду!
Ну что, я вас убедил в том, что валидация сайта действительно необходима? Тогда с теорией закончили и переходим к практике!
Способы проверки валидации
О каждом из способов я написал подробные инструкции в виде текста, а также, если кому-то лень читать и вникать, снял видео 😉 .
1 способ. Сервис validator.w3.org
Суть первого способа состоит в использовании сервиса для проверки валидности сайта. Как проверить валидность сайта с помощью сервиса validator.w3.org :
Переходите по ссылке выше, выбираете версию браузера Firefox и нажимаете на кнопку «Download». Затем выбираете необходимую операционную систему и устанавливаете как обычное дополнение. (те, кто не понял, смотрите видео 🙂)
2. Плагин для браузера Google Chrome —
Здесь вам необходимо нажать на кнопку «Бесплатно» и затем во всплывающем окошке нажать «Добавить».
Здесь также происходит обычная установка дополнения.
4. Плагин для браузера Safari —
Установка:
- Распакуйте архив с плагином.
- Скопируйте файл «Safari Validator.webplugin» в папку, где установлен браузер, затем /Library/Internet Plug-Ins (создайте папку, если она отсутствует)
- Сделайте двойной клик на файле Safari Validator.safariextz.
- Перезапустить браузер Safari.
Как установить плагин в Firefox и как пользоваться им я рассказываю во втором видео:
Вывод
Вот и вся статья. Надеюсь видеоматериалы, а также текстовая информация, которую я здесь представил поможет вам улучшить ваш сайт и сделать его еще более «привлекательным» для поисковых систем 🙂 , ведь мы все так к этому стремимся. Если возникают вопросы и сложности на каком-либо этапе — пишите в комментариях, будем вместе разбираться! Тот, кто дочитал до конца статью и проделал всё, о чем я писал — уже улучшил свой сайт и результат не заставит себя ждать. 🙂
Валидатором называют устройство, осуществляющее проверку проездных и иных документов, подтверждающих право доступа. Валидаторы широко используют в метро, автобусах и т. д.
Валидатор в понимании создателей сайтов — это компьютерная программа, проверяющая соответствие HTML-кода страниц сайта и CSS-кода на соответствие современным стандартам.
Нашёл онлайновый Валидатор на сайте http://validator.w3.org , запустил его, получил сообщение о 54-х ошибках HTML-кода и о 17-ти предупреждениях уже на главной странице этого сайта! Отмечу, что этот Валидатор является весьма быстрым и удобным, первое время использовал только его, ибо он признан лучшим для проверки HTML-кода.
Чтобы получать максимум информации от Валидатора, в его опциях отмечаю все, кроме крайней правой опции.
Заодно проверил и главную страницу Яндекса : 192-ве ошибки и 10-ть предупреждений. Рассмотрение кода главной страницы Яндекса в тот день показало, что код содержал лишь три длиннющие строки, то есть ими применено уплотнение кода. Причём многие ошибки можно трактовать, как преднамеренное нарушение стандартов: браузеры, мол, вполне разберутся.
Например, Валидатор возмущается отсутствием пробела между тэгами, а Яндекс предпочитает сокращать длину кода.
Надо будет со временем взять на вооружение этот способ ускорения загрузки путём уплотнения кода! Но безошибочный, то есть не приводящий к недовольству валидатора. Сейчас ещё слишком рано, да и разбираться с этим некогда. Мне пока что ясно лишь, что уплотнение придётся проводить сначала вручную, а потом поискать средства автоматического уплотнения кода перед публикацией, но не перед кешированием.
Вывод первоначально сделал такой: Яндекс чихает на валидность HTML -кода, буду чихать на него тоже.
Гораздо важнее, чтобы страницы сайта нормально отображались во всех браузерах (я проверял отображение весьма многих страниц сайта в 11-ти браузерах) и достаточно быстро загружались.
И всё-таки Валидатор весьма полезен: он указал мне ошибки кода, дал советы по исправлению ошибок и показал места ошибок, чем облегчил процесс избавления от ошибок. Валидатор помог мне избавиться от сотен ошибок, чтобы они не мозолили мне глаза, не заставляли браузеры напрягаться и не замедляли обработку страниц.
Исправил почти все найденные ошибки: на главной странице моего сайта валидатор находил лишь три ошибки — все они содержались в чужом коде: одна в коде, отвечающем за Комментарии, а две в скриптах FeedBurner’а. Избавился и от них!
На большинстве страниц сайта Валидатор находил эти же три ошибки, других ошибок обычно не бывало.
Отмечу, что валидатор особенно не любит таблицы, вставленные CMS WordPress на страницы сайта после копирования таблицы из Excel . Изрядно повозившись, разобрался с правкой кода сохраняемых таблиц и c переделкой файла стилей styles.css
Чёткий десятишаговый полуавтоматизированный алгоритм правки кода таблиц описал на странице .
Замечу, что даже страница , содержавшая много таблиц и сотни ошибок, имела хорошие показатели загрузки, но окончательная обработка кода явно задерживалась. Исправил все таблицы и на этой странице.
Дополняя и совершенствуя страницы, обязательно правлю таблицы, а Валидатор использую лишь для подсчёта числа ошибок: в его советы уже не заглядываю.
20.03.14 впервые получил от валидатора «зелёную метку»: его фавикон позеленел, а на странице появилась строка с сообщением «This document was successfully checked as HTML5!», имеющая зелёный фон. Такой метки раньше не видел ни у одной страницы ни этого, ни других сайтов!
Теперь я могу утверждать, что главная страница моего сайта лучше, чем главная страница Яндекса!
Для проверки валидности CSS-кода использовал частично русифицированный онлайновый сервис http://jigsaw.w3.org/css-validator/validator.html.ru Он выдал 283-ри предупреждения — попробую внести изменения в файлы стилей, чтобы постепенно избавиться от этих предупреждений. Давно подозревал, что используемого шаблона недостаточно хороши, а теперь убедился в этом. Подробности опубликую на странице, доступной по ссылке.
Приглашаю всех высказываться в
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Валидатор микроразметки - программное обеспечение, которое проверяет разметки веб-страниц в любых форматах и на всех существующих языках программирования.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Все любят путешествовать, особенно в гипермаркетах. Вот и ты, не нарушая общепринятых тенденций, отправляешься в поход по магазинам. Тебе нужно найти соки, воду, печенье, хлеб, носки, памперсы и другие вещи. Но магазин слишком большой, и для того чтобы обойти его, и найти то что нужно, может потребоваться не один час. Как вариант - обратиться к сотруднику гипермаркета, но покупок много, поэтому этот метод не всегда применим. Намного удобнее ориентироваться по вывескам, которые расположены между рядами, и точно указывают на размещение продукции в отделе.
Для того, чтобы подобрать актуальную и полезную информацию, поисковые боты также используют определенные алгоритмы подбора информации для пользователей.
Какая разметка считается правильной
Правильной семантической , считается та, которую хорошо воспринимает такие поисковые системы, как Google, Яндекс,Bing и Yahoo. Все мы не раз сталкивались с тем, что эти сервисы абсолютно по-разному индексируют информацию, поэтому чаще всего обращаем внимание на продуманные, броские и четкие сниппеты.
Поэтому, перед тем, как внедрить микроразметку на сайт, нужно определить тип ваших данных. Например, в карточке товара для интернет-магазина, необходимо разметить цену товара, его наименование, описание, изображение, отзывы, рейтинг. Так поисковый бот без каких-либо проблем сможет понять, что именно размещено на странице и сделает ее более релевантной.
Для проверки правильности микроразметки существует несколько сервисов:
- инструмент проверки данных от Google;
- валидатор микроразметки от Yandex;
- validator.w3.org;
- validator.nu.
Если ваша страница прошла валидацию на одном сервисе, то из-за различий в алгоритмах поиска, она может быть не пропущена на другом. Для того, чтобы поисковые роботы правильно проиндексировали разметку, разберитесь в ее структуре и настройках.
Зачем нужен валидатор разметки
– это стандарт семантической разметки, разработанный специально для структурирования информации на странице для программ-обработчиков. В нашем случае микроформаты позволяют указать поисковому роботу на смысловое значение отдельных фрагментов страницы и используются для передачи сведений об организации, товарах, отзывах, рецептах.
Любая страница в интернете состоит из HTML тегов, которые сообщают браузеру, каким образом будет отображаться та или иная информация, а микроразметка устанавливает поисковикам определенные рамки, в пределах которых и нужно искать. Поэтому она позволяет добиться лучшей релевантности страницы для поисковых роботов и пользователей. И самое важное - семантическая микроразметка позволяет улучшить внешний вид сайта в результатах поиска (snippet).
Сниппет без разметки:
Сниппет с разметкой:
Валидатор проверяет правильность всего процесса и определяет ошибки допущенные при работе с кодом. Ведь, если его как следует не проверить, это может негативно отразиться на индексировании ресурса и, тем более, на ваших доходах. Поэтому он является обязательным инструментом любого программиста или веб-мастера.
Страницы без ошибок в коде - мечта владельца любого сайт, так как результаты качественной работы явно отразятся на ваших позициях в поисковой выдаче. На сайте с 30+ позиции это никак не скажется. Однако когда поисковик показывает 15 место, а не 3 как хотелось бы, это означает серьёзные недоработки, которые влекут материальные затраты.
Чаще всего пользователи, которые начинают использовать такое программное обеспечение, неточно понимают как микроразметка сайта влияет на ранжирование. Яндекс отвечает, что оно действует только косвенно, при этом сайт становится более привлекательным для пользователя, его аудитория становится больше, в результате чего повысятся и его позиции. Он уточняет - не стоит ожидать результатов в ближайшие дни, так как они появятся только в течение одного-двух месяцев.
Как работает валидатор разметки
Для проверки страницы нужно ввести URL проверяемого документа или вставить нужный код в форме ниже.
В колонке «Результаты проверки» программа выведет распознанные недочеты и их расположение.
Существует два случая, когда выводится сообщение об ошибке:
- если валидатор не может распознать разметку;
- если у разметки нет соответствия стандарту, и она не может распознаваться корректно.
Сообщение о том, что «страница не обнаружена» означает несуществующую страницу. Возможно страница недоступна для поисковика по причине ошибки сервиса, или из-за ограничений безопасности.
При этом будет приведен перечень обязательных полей, которые не учтены в работе, отправленной для проверки.
Инструмент Google
Гугл в сотрудничестве с Yahoo! и Bing впервые в 2011 опробовали свое изобретение - валидатор микроразметки , к которому позже примкнул и Яндекс. В результате валидатором стал пользоваться весь мир. Валидатор постоянно дорабатывается, а его функционал расширяется.
Как проверить:
1. С помощью URL-адреса. Подходит для владельцев активных сайтов. Копируете ссылку и вставляете в специально отведенное для нее поле.
2. При помощи HTML фрагмента. Этот вариант подойдет тем, кто только создает сайт и хранит его где-нибудь на локальном сервере. Действия те же - копируете код и вставляете для проверки.
Поддерживаемые форматы разметки у Гугл:
- микроданные;
- микроформаты;
Поддерживаемые типы информации для разметки:
- отзывы;
- товары;
- компании;
- организации;
- мероприятия;
- музыка.
Инструмент Яндекс
За последние четыре года, программисты все чаще стали использовать семантическую микроразметку - размечены около 15% страниц рунета. Поэтому возросла потребность в валидаторах. И Яндекс не стоит в стороне от новых разработок в этой отрасли. Он, в отличие от Google, развивается более стремительно и создает новые универсальные инструменты.
Поддерживаемые форматы:
- микроформаты;
- Schema;
- HTML;
- Open Graph.
Типы данных, поддерживаемые валидатором Яндекса:
- товары;
- цены;
- адреса;
- организации;
- статьи;
- музыка;
- тест-драйвы;
- рисунки;
- видеоклипы;
- рецепты;
- фильмы.
Валидатор микроразметки позволяет проверить правильность структурирования данных. Он упрощает работу оптимизаторов и помогает правильно разметить контент на сайте. Это делает красивой информацию о странице в поисковой выдаче и привлекает посетителей на ресурс.
HTML-стандарт однозначно определяет основную структуру Web-документа. Язык HTML является подмножеством языка описания документов SGML (Structured Generalized Markup Language), таким образом, html-документ - это текстовый документ, состоящий из html-кодов и основного текста документа. Для просмотра этого документа необходим WEB-браузер - специальная программа для интерпретации и корректного отображения страницы на экране.
Что такое стандарт HTML?
* HTML был первоначально разработан Tim Berners-Lee и популяризован браузером Mosaic, разработанным NCSA. В течение 90х гг. он буквально расцвёл в связи с бурным развитием Web. Было время, когда веб-разработчики вынуждены были использовать html-стандарт 2.0 (был разработан под эгидой Internet Engineering Task Force (IETF) для упорядочения общепринятых положений в конце 1994 года), который поддерживал только форматирование текста и встраивание простой графики.* В 1995 году были опубликованы некоторые предложения по расширенному стандарту HTML 3.0, которые стали использоваться как неофициальные HTML-рекомендации, воплотившиеся в различных браузерах.
* В мае 1996 года появился стандарт версии 3.2. За стандарт несет ответственность организация - WWW-Консорциум (W3C - world wide web consortium), она представляет собой объединение представителей промышленности и науки.
* 18 декабря 1997 года вышел первый релиз W3C спецификации на HTML 4.0. Второй выпуск (24 апреля 1998 года) содержал некоторые редакторские корректировки.
* 24 Декабря 1999 года вышел стандарт HTML 4.01 - исправлены некоторые ошибки предыдущего стандарта – 4.0
* Наличие стандарта предполагает необходимость в специальной программе (собственно VALIDATOR), которая проверяет наличие в HTML-документе нарушение спецификаций, согласно которой составлен документ, если эти нарушения там действительно есть.
Что такое Валидатор?
определение:
Validator: a conforming SGML parser that can find and report a reportable markup error if (and only if) one exists.
Валидатор: анализатор соответствия стандарту SGML, который находит и сообщает о подлежащей отчету ошибке разметки, если (и только если) она существует.
ISO 8896, параграф 15.4.
Таким образом HTML-система является валидирующей HTML-системой, если
1) она является валидирующим SGML-анализатором согласно ISO 8879, п.15.4;
2) она способна обрабатывать любой согласующийся с HTML документ;
3) она находит и сообщает об ошибке в HTML, если она существует;
4) она не сообщает об ошибке в HTML, если она не существует.
ISO/IEC 15445:2000/DCOR 1:2001(E), параграф 2.2.
Следует помнить о том, что html-документ - явление не самодостаточное, и само по себе никак не выглядит. Сайт обретает зримую форму лишь в конкретном браузере. Как показывает практика – различные браузеры показывают конкретную страницу разными способами (отображение страниц зависит от работы алгоритмов коррекции, встроенных в браузер, а в разных браузерах эти алгоритмы весьма различны), и, как правило, все эти способы - правильные. На самом деле это одно из важных достоинств сети - скажем, человек с плохим зрением может увеличить себе шрифт или использовать читающий браузер, причём для этого не требуется готовить отдельную, специальную версию сайта.
Два самых распространённых браузера для Windows отображают страницы примерно одинаково, отличаясь лишь в таких деталях, как поля и отступы. Браузеры для Macintosh или *никсов обычно отличаются от этих двух более глобально. Очевидная выгода наличия стандарта в том, что проконтролировать одну спецификацию значительно легче, чем многие браузеры.
цитата:
«...Для людей с проблемами зрения HTML предоставляет многообещающие возможности уравнять их в правах с обычными людьми при использовании базового графического пользовательского интерфейса Windows. Табличная модель HTML включает атрибуты для пометки каждой ячейки, чтобы поддержать высококачественный текст для речевого интерфейса. Эти же атрибуты могут использоваться при поддержке автоматизированного импорта и экспорта данных таблиц в базы данных или электронные таблицы...»
Многие разработчики (преимущественно начинающие веб-дизайнеры) могут не согласиться с необходимостью соответствия кода спецификации: «Валидатор оставляет после себя тоскливые сайты, убивает творчество». Такое мнение возникает от простой лени. Корректный HTML-текст вполне допускает динамику, мультимедийные объекты, использование сценариев и т.д.; просто все эти эффекты можно сделать грамотно, а можно - неграмотно. Надо также помнить, что во всякой творческой области надо сначала изучить правила, а уже потом суметь превзойти их. Кроме того, даже опытные разработчики не застрахованы от ошибок, мы все можем допускать опечатки или забывать закрыть тег. Валидатор способен отследить подобные ошибки и явным образом указать место с некорректным форматированием.
Приведем конкретные примеры ошибок, которые определяются валидатором:
ISO 8896, параграф 15.4.
- неправильно(Error: start tag was here).
ISO 8896, параграф 15.4.
- правильно. вставлен текст
(Error: element "P" not allowed here; possible cause is an inline element containing a block-level element)
Вставлен текст
- правильно.Если вы пришли к тому, что вам необходимо проверить ваш код на соответствие спецификации, прочтите несколько советов:
Где взять валидатор?
Валидатор в форме веб-страницы предлагается на https://validator.w3.org. Он основывается на SP Кларка.Есть также и валидатор на https://htmlhelp.com/ . Он тоже основывается на SP, хотя и немного изменённом. Авторами декларируется, что он более строг в оценке и объявляет потенциально опасные, хотя и допустимые места (скажем, незакрытый тег с необязательным закрытием). Предлагают исходники валидатора
Доступный подо все платформы бесплатный валидатор можно скачать с сайта Дж. Кларка (https://www.jclark.com/sp/). Вместе с парсером/валидатором в поставке прилагается потоковый нормализатор.
W3C раздаёт исходники валидатора на https://validator.w3.org/, но это, на самом деле, не валидатор. Это лишь адаптация кларковского валидатора к веб-интерфейсу, исполненная на перле. В описании этой адаптации недвусмысленно сказано, что следует иметь на машине кларковский валидатор. Еще ссылки:
· https://ugweb.cs.ualberta.ca/~gerald/validate/
· https://www.webtechs.com/html-val-svc/
· https://www2.imagiware.com/RxHTML/
Можно ли назвать валидатором инструмент из HomeSite – Validate Document?
Разработчики Allaire HomeSite объявляют, что что «…проверяющая программа выпускается ими под названием «валидатор» сугубо из коммерческих соображений…», и настоящий валидатор выпускаться ими не будет.
Программа, идущая в комплекте с HomeSite, нарушает определение валидатора: она находит и показывает ошибки, которые не были допущены, и не находит ошибок, которые были допущены.
Вот пример её неправильных действий:
а) 
Реакция: нет реакции.
В действительности, здесь ошибка: не выставлен ALT второго IMG.
б)
Реакция: ошибка.
В действительности, этот тег возможен в рамках XHTML.
Стремление к безупречности - первый признак профессионализма, и нет необходимости ориентироваться на популярные, однако далекие от совершенства html-кода порталы. Возможно, менеджеры подобных сайтов, проанализировав статистику посещений, выяснили, что 99% приходящих пользователей увидят все так, как предполагал дизайнер... Возможно, авторы сайта намеренно исключают из числа своих посетителей пользователей с ограниченными возможностями... однако следует помнить такие понятия, как гуманизм и требования закона. С появлением официального стандарта из-за нарушений спецификации есть опасность попасть в суд по обвинению в недоступности сайта для тех, кто не может использовать «обычный» браузер. Хотя в регионах стран бывшего СНГ законодательство довольно ограничено в этом отношении, в просвещённом мире вопрос решается лучше. Доступность понемногу приобретает силу закона. Валидатор не гарантирует доступности (потому что не может быть заменой здравого смысла), но помогает обеспечить должную меру поддержки всех пользователей.
Удачных сайтов и безупречного кода вам, уважаемые разработчики!
