Как использовать W3C Validator для улучшения SEO

Как веб-разработчик, вы должны убедиться, что ваш код чист, действителен и доступен. Это также может помочь вам повысить эффективность поисковой оптимизации (SEO). К счастью, вы можете использовать валидатор W3C, чтобы убедиться, что ваша работа соответствует стандартам.

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

Что такое проверка W3C?

W3C расшифровывается как World Wide Web Consortium, и это международная организация, которая наблюдает за стандартами кодирования в Интернете. Он предлагает услуги проверки, которые помогут вам убедиться, что ваш код HTML и CSS действителен и не содержит ошибок.

Валидатор CSS называется Jigsaw и проверяет ваш контент на соответствие веб-стандартам W3C.

Валидатор HTML работает очень похожим образом. Он проверяет правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т. д.

Придерживаясь этих веб-стандартов, вы можете быть уверены, что ваш контент удобен для пользователя и доступен. Эти инструменты также помогут вам проверить кроссплатформенную совместимость вашей работы, создав лучший пользовательский интерфейс (UX). Это, в свою очередь, может улучшить ваши показатели Core Web Vitals и улучшить SEO.

Как проверить код с помощью W3C

Как упоминалось ранее, валидаторы W3C сканируют ваш код HTML и CSS, чтобы убедиться, что они соответствуют веб-стандартам, установленным организацией. Этот учебник покажет вам, как использовать эти инструменты для проверки вашей работы.

Проверить HTML-код

Начнем с валидатора HTML. Вы можете ввести URI документа, который хотите проверить, загрузить файл, содержащий ваш код, или ввести разметку, которую вы хотите проверить, в соответствующее поле:

Как только вы отправите свою страницу или документ на проверку, валидатор сгенерирует список всех ошибок и предупреждений, связанных с HTML-кодом:

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

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

Обратите внимание, что если ваша страница содержит какой-либо JavaScript или CSS, валидатор HTML не проверит его. Для этого вам нужно будет использовать инструмент W3C Jigsaw для CSS (о котором мы расскажем чуть позже) или JSHINT для Javascript.

Проверить CSS

Валидатор CSS работает так же. После того как вы отправите свой URI, документ или разметку на проверку, вы получите страницу с ошибками и предупреждениями:

Как видите, результаты как для CSS, так и для HTML довольно подробные. Давайте рассмотрим, как их интерпретировать.

Как интерпретировать результаты валидатора

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

И ошибки, и предупреждения показывают вам номер строки с вашей проблемой. Они также предлагают способы решения проблемы:

Если вы нажмете на ссылку с ошибкой или предупреждением (например, «От строки 1, столбец 16; до строки 2, столбец 16»), валидатор выделит соответствующую строку в коде:

Обратите внимание, что ошибки, обнаруженные средством проверки HTML, повлияют на пользователей, которые полагаются на вспомогательные средства для инвалидов (например, программы чтения с экрана) для доступа к онлайн-контенту. Кодировщику легко не заметить эти проблемы доступности. Тем не менее, они могут оказать негативное влияние на вашу аудиторию. Мы более подробно рассмотрим эти распространенные ошибки в следующем разделе.

Распространенные ошибки проверки W3C

Валидаторы CSS и HTML подсветят любые ошибки в вашем коде. Некоторые из наиболее распространенных проблем включают в себя:

• Незакрытый элемент. Для добавления нового элемента на страницу требуются теги открытия и закрытия. Когда вы получаете эту ошибку, вы не включили закрывающий тег. Это довольно распространенная проблема при работе с сетками.
• Отсутствует тег alt. Для каждого изображения требуется тег alt, который будет отображаться, если изображение не загрузится. Он описывает изображение, и программа чтения с экрана прочитает его. Добавление тегов alt является важным требованием доступности.
• Неправильное использование тегов заголовков. Эта проблема CSS возникает, когда разработчик использует теги <h> в качестве стиля шрифта для определенных подзаголовков. Теги предназначены для навигации, а не для стилистических целей, поэтому размер ненавигационных подзаголовков следует определять с помощью атрибута font:size=# .

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

Вот один из примеров ошибки синтаксического анализа:

Эта ошибка возникает, когда таблица стилей CSS содержит элементы HTML. Хотя валидатор CSS не предоставляет номер строки для ошибки, вы можете просто скопировать предоставленный блок кода и выполнить поиск в редакторе кода или IDE.

Как исправить распространенные ошибки

К счастью, валидатор W3C подскажет, где найти ошибки и как их исправить. Например, если у вас отсутствует тег alt, валидатор сообщит вам, где его нужно добавить.

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

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

Вывод

Использование валидатора W3C может улучшить общую производительность вашего сайта. Это позволяет избежать раздувания кода, решить проблемы доступности и исправить распространенные ошибки. Все эти элементы могут привести к более быстрой загрузке и лучшему UX, что, в свою очередь, может повысить SEO вашего сайта.

Как мы видели, вы можете использовать W3C для проверки вашего кода HTML и CSS. Инструмент создаст список предупреждений и ошибок с предложениями по их устранению. Общие проблемы включают незакрытые элементы, отсутствующие теги alt и ошибки синтаксического анализа.

У вас есть вопросы по использованию валидатора W3C? Дайте нам знать в комментариях ниже!

Избранное изображение через Chaosamran_Studio / Shutterstock.com