Свой сайт на WordPress — от А до Я. SEO блог Романа В

Валидность HTML кодаДля начала немного теории. Валидность HTML – это соответствие кодов html и каскадных таблиц стилей CSS неким стандартам, которые задает нам Консорциум Всемирной Паутины (W3C – World Wide Web Consortium). На производстве – ГОСТ, в русском языке – грамматика, а в интернете – валидность. Страницы сайта, прошедшего проверку на соответствие стандартам W3C будут правильно отображаться в современных браузерах, вырастет скорость загрузки и как следствие — маленький плюсик при ранжировании в поисковой выдаче.

Проверить валидность HTML кода сайта можно официальным валидатором стандарта W3C.

Онлайн сервис проверки валидности html кода страниц сайта Здесь мы видим три вкладки проверки:

  • Validate by URL – по URL адресу;
  • Validate by File Upload – загруженного файла;
  • Validate by Direct Input — непосредственно HTML кода страницы сайта.

Начните проверку по URL с главной страницы своего сайта (блога), а затем проверьте отдельные страницы, на которых вставлены какие-либо скрипты или блоки (голосование, различные сервисы, фотогалереи и т. д.).

Перед проверкой нажмите на кнопку «More Options» и выберите параметры отображения ошибок.

Онлайн сервис проверки валидности html кода страниц сайта

  • Show Source – с выводом исходного (с ошибками) кода;
  • Validate error pages – проверка страниц вывода ошибок (404 страница);
  • Show Outline – вывод строки с ошибкой;
  • Verbose Output — отображение заголовков, передаваемых сайтом браузеру: дата изменения документа, его размер и тип, параметры сервера;
  • Clean up Markup with HTML Tidy – вывод правильного кода (по версии html Tidy), которым можно заменить неправильный. Полезная функция, должна здорово помочь при исправлении ошибок. По моим наблюдениям, работает только с мелкими ошибками – пропущена кавычка, не закрыт тег, и т. д.
  • List messages Sequentially – вывод ошибок и предупреждений по порядку;
  • Group Error Messages bu Type – вывод ошибок и предупреждений в группах по типу.

Поиск и исправление ошибок и предупреждений валидности HTML

Рассмотрим на конкретном примере как найти на блоге и исправить найденные валидатором ошибки и предупреждения.

После проверки этой моей страницы валидатор выдал предупреждение на линии 252 и ошибку на линии 263.

Ошибки кода HTML После перевода этой абракадабры можно понять, что для устранения предупреждения на линии 252 рекомендуется заменить символ «<» (в куске кода выделен красным цветом) на амперсанд «&amp;«. Опустимся на линию 252 приведенного HTML кода нашей страницы ниже.

Валидность кода Dr.Web-poisk

Сразу становится понятным то, что это код поиска вирусов онлайн от Dr.Web, включенный мной в пост в HTML редакторе.

Validnostj-koda-Dr.Web-ispravlenie

1. Как и было рекомендовано символ «<» заменяем на амперсанд «&amp;«. 2. Проделываем аналогичную операцию с закрывающим символом «>» на линии 263. Проводим перепроверку страницы валидатором.

Валидность HTMK

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

Довольно часто, почти всегда, ошибки кроются в плагинах. В этих случаях ошибку найти не так просто, и я рекомендую воспользоваться инструментом «поиск» файл менеджера Total Commander. Как использовать этот инструмент файл менеджера я уже писал в статье «Внешние ссылки» и повторяться здесь не буду.

Многим блогерам, особенно тем, кто плотно не знаком с HTML, будет трудно понять чего нам говорит валидатор. Для облегчения понимания сути ошибки и ее исправления скачайте шпаргалку — подсказку по ссылке — на скачивание шпаргалки, где описаны самые распространенные ошибки HTML кода и способы их исправления. Если, несмотря на все усилия, ошибку в коде плагина, скрипта, и т.п., устранить не удается,  откажитесь от него и замените подобным с валидным кодом.

Sorry! This document can not be checked.

Валидность HTML

Такой грозной надписью вас известит сервис, если он не сможет проверить сайт на валидность HTML сода. Причиной этому может быть конфликт плагинов. В моем случае помогло простое обновление WordPress. Можете использовать проверку валидности непосредственно HTML кода страницы блога на вкладке Validate by Direct Input.

В следующей статье «Валидность CSS» мы рассмотрим, как выполнить проверку и исправление ошибок CSS каскадных таблиц стилей. P.S. По многочисленным просьбам читателей публикую здесь валидный код блока кнопок поделиться в социальных сетях от Яндекса:

<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>
<script type="text/javascript"><!--
document.write('</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug,gplus,blogger"></div>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>');
--></script>

Именно этот блок вы видите в конце каждой моей статьи. Нажмите на кнопки, чтобы проверить, работают ли :-).

Валидность HTML — проверка и исправление ошибок валидности обновлено: 2 марта, 2017 автором: Роман Ваховский
Хороший человек всегда нажмет на кнопку!
Комментарий > Моя благодарность > Ссылка на секретную страницу блога

59 комментариев: Валидность HTML — проверка и исправление ошибок валидности

  • bytrina:

    Вот и мне при проверке валидности HTML: было обнаружено 30 ошибок, на самом же деле их 31.

  • Грайр:

    Здравствуйте,как исправить ошибки <footer id="colophon" class="site-footer" role="contentinfo"

    <script type="text/javascript" defer src="http://sladkoyeshka.ru/wp-content/cache/autoptimize/js/autoptimize_e6352394cc14a17240c41da34f1a8509.js&quot;

    • Роман Ваховский:

      Здравствуйте!
      В первом случае уберите из подвала шаблона атрибут role=»contentinfo». Совет-уберите заодно ссылку с подвала на сайт разработчика шаблона.
      Во втором отключите функцию кэширования плагина autoptimize или удалите атрибут type=»text/javascript» из кода плагина.
      А вообще, это не критичные ошибки, если лень исправлять :-), оставьте как есть.

  • Татьяна:

    Здравствуйте!
    Проверила на валидаторе свой блог по Вашему посту, есть ошибки.
    Подскажите пожалуйста, как исправить ошибки, не пойму где их найти? — перевела на переводчике —

    Предупреждение: требуется атрибут aria, необходимый для элементов, для которых требуется атрибут.
    Из строки 140, колонка 228; к строке 140, столбец 343
    © </ text

    Не знаю, что такое колонка и столбец, подскажите пожалуйста.
    Спасибо.

  • Инна37:

    Спасибо за информацию, сейчас попробую исправить свои ошибки. Только немного не разобралась, в какой папке или файле их искать и исправлять?

  • кристи:

    Добрый день! Подскажите, что значит ошибка The contentinfo role is unnecessary for element footer

  • артем:

    здравствуйте. валидатор показывает ошибку: «The aria-describedby attribute must point to an element in the same document» в файле comment-template.php. и соответственно предлагает вариант её исправления. но при проверке самого файла вижу, что у меня всё прописано точно также, как в правильном варианте валидатора. не подскажете, в чём может быть дело? как устранить эту ошибку?

  • ship_2014@mail.ua:

    Error Line 75, Column 157: required attribute «alt» not specified

    …s/HealthStyle/images/default-slides/1.jpg» />

    Вот, например 5 ,аналогичных этой, ошибок в слайдере. Пишет, что пропущен атрибут «alt», но в каком файле эта линия 75, колонка 157 — никак не пойму.

    • Роман Ваховский:

      Атрибут «alt» пропущен в html коде картинки. Этот атрибут описывает так называемое альтернативное содержание картинки. Даже если описание пропустить, атрибут должен присутствовать обязательно.
      Прочтите мою статью про оптимизацию изображений — http://wordpress-book.ru/prodvizhenie/optimizaciya-izobrazheniya-neobxodimost-i-pravila-osushhestvleniya/

  • ship_2014@mail.ua:

    Рома, спасибо за отзыв!
    Пробовал я найти эти файлы с помощью тотал. Не находит этих строк с ошибками. И ошибок немного, но не хочу их плодить…

  • ship_2014@mail.ua:

    Привет, Рома! Будем знакомы — я Саныч или Ship! Третий день 15-й раз читаю эту статью и никак не вкурю. Объясни убогому где найти эти строки и столбцы, в каком файле? С целью исправить ошибку.В браузере открываю код страницы — вижу ошибку. А где она в вордпрессе не знаю как найти эти файлы.

    • Роман Ваховский:

      Привет, Саныч!
      В статье есть такая фраза:

      Довольно часто, почти всегда, ошибки кроются в плагинах. В этих случаях ошибку найти не так просто, и я рекомендую воспользоваться инструментом «поиск» файл менеджера Total Commander. Как использовать этот инструмент файл менеджера я уже писал в статье «Внешние ссылки» и повторяться здесь не буду.

      Попробуй Total Commander для поиска файла с ошибкой. Очень полезный инструмент, только им и пользуюсь.

  • Игорь:

    Здравствуйте!
    Не могу найти файлы с ошибками, ну соовсем не получается! CSS AMIRO
    Прошу помощи!

    • Роман Ваховский:

      Только что ответил на комментарий с подобным вопросом. Смотрите выше. Желаю удачи.

  • Сергей:

    Спасибо Роман, что откликнулись. Проблема была в плагине, удалил его и все встало на свои места. Всего доброго.

  • Сергей:

    Роман, добрый день. Может Вы знаете в каком файле в админке находятся строки 161 и 175 с этой страницы http://www.banner-web.ru/ ? Все ошибки исправил, осталось только эта. Никак не могу найти расположение этого кода. Буду очень благодарен! С уважением, Сергей.

    • Роман Ваховский:

      Сервис выдал одно предупреждение, но не указал почему-то на эти строки.
      Могу сказать одно — уберите все дивы (div) с текстовой части на главной странице (зачем они там?) и уберите выравнивание абзацев по левому краю (тоже незачем). Скорее всего где-то не закрыли один из дивов.

  • Екатерина:

    Роман, добрый день! Я тут застряла, пробовала убирать ошибки через FTP и там, где просмотр кода элемента. Вот, к примеру, убираю itemprop, сохраняю, обновляю страницу, а оно опять как было и все там же. Убрать второй поиск со страницы тоже не получилось. Такое ощущение, что вордпресс мне не доверяет. Подскажите, пожалуйста 🙂

    • Роман Ваховский:

      Кэширование WordPress применяете? Если да, то очистите кэш и отключите (деактивируйте плагин) на время внесения изменений в файлы.

  • Ольга:

    Здравствуйте, валидатор выдал предупреждение «Line 174, Column 52: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles»

    Нашла в коде исходной страницы этот код, но он находится не на 174 строке, а на 190 и в шаблонах не могу найти эту строку, чтобы исправить. Что делать? Заранее спасибо))

  • Екатерина:

    Роман, здравствуйте! Учусь по Вашему учебнику:) Помогите, пожалуйста! Не качается шпаргалочка с ошибками, не могу понять, что за загадочный «Attribute itemprop not allowed on element meta at this point»

    • Роман Ваховский:

      Здравствуйте, Екатерина!
      Спасибо за регистрацию, повысил Ваш статус до «Участника».
      Ссылку восстановил, качайте шпаргалку.
      Что-то такое припоминаю. Валидатор считает, что атрибут itemprop не должен быть в этом месте. Я его просто удалил. На функциональности это никак не сказалось. Если мне не изменяет память, эта ошибка стала выскакивать в новых версиях WordPress.

      • cata.subbotina@bk.ru:

        Спасибо огромное, очень помогает! Буду штудировать.

        • Роман Ваховский:

          Совет: большинство ошибок создают плагины. Заменяйте их валидными.
          Удачи!

  • Дмитрий:

    Добрый день…

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

    В чем была причина и как сделать изображение фото как сейчас на сайте в исправном виде, мне сделали но я бы хотел сам узнать причину и как самому исправить…

    shot.qip.ru/00rd8v-618ZobUMX7

    shot.qip.ru/00rd8v-618ZobUMX8

    Заранее буду очень благодарен…

    С уважением,
    Дмитрий

    • Роман Ваховский:

      А те ребята, что исправили глюк, не сознаются?
      К сожалению, вот так с ходу невозможно ответить на Ваш вопрос. Неизвестен плагин, открывающий картинки. И тут скорее всего понадобиться доступ в панель администратора сайта.

    • Роман Ваховский:

      А те ребята, которые исправили глюк, не сознаются?
      К сожалению, вот так с ходу невозможно ответить на Ваш вопрос. Неизвестен плагин, открывающий картинки. И тут скорее всего понадобиться доступ в панель администратора сайта.

      • Дмитрий:

        Доброй день…
        На всех номерах в сайте: ( http://atrium-hotel.com.ua/цены/1-полулюкс-улучшенный-400грн ) фото номеров спускается в низ, подскажите пожалуйста, как можно исправить, плагины с админ панели в скринах ниже в ссылках))

        http://shot.qip.ru/00tsOZ-6UvvpmdMG
        http://shot.qip.ru/00tsOX-5QODkh2KO
        http://shot.qip.ru/00tsOY-6Kzjld5X5

        Заранее буду очень благодарен…

        С уважением,
        Дмитрий

  • Сергей:

    Подскажите плиз! Как исправить ошибки в плагине кнопок соц.сетей?

    • Роман Ваховский:

      Здравствуйте Сергей!
      Советую Вам не ставить кнопки в анонсах. Ставьте в конце статьи. Как показывает практика, люди не жмут на эти кнопки не ознакомившись с материалом полностью.
      Поставьте блок кнопок соц. сетей Яндекса. Валидный код блока я опубликовал только что в конце статьи. Чем меньше плагинов будет на сайте, тем он будет быстрее.
      Если все же хотите этот плагин оставить, сообщите, поковыряюсь в нем.

      • Сергей:

        Спасибо! Учту!

        • Сергей:

          Интересно, а где там проблема?

          • Роман Ваховский:

            Линия 27, самая первая критическая ошибка. В плагине в конце ссылки на одноклассники прописано …rel=»stylesheet»>. Пропущен слэш «/». Правильно так — …rel=»stylesheet»/>.

  • Ольга Черныш:

    Надо глянуть.
    А насчет того, как перевести заглавия в h1, это я здесь спрашивала?

    • Роман Ваховский:

      Вы спрашивали, только не помню на какой странице ). И я обещал помочь. Может на следующей неделе. После праздников все никак в рабочий режим не перейти :-).

      • Ольга Черныш:

        Я считаю это очень важной проблемой. И очень хочу изменить все страницы на заголовок 1. Но Я боюсь, что не смогу сама найти все страницы, ведь мне неизвестно, что и где писал автор шаблона. Мне, честно говоря, непонятно, зачем автор писал шаблон именно так. Ведь это нерационально.

  • Ольга Черныш:

    Все, я кажется все поняла. tynt-защита от копирования. pinit связана с ним. Только оно на картинках. Ладно, пусть будет. Плагин обратной связи не связан с этим. Я проверила.

    • Роман Ваховский:

      Я вспомнил, у меня была эта фишка от того сервиса. Сервис хорош тем, что предоставляет полный отчет по скопированному материалу (текст, картинки, обратные ссылки в скопированном). А потом подумал, да нафиг мне нужна эта статистика, геморрой один и снес код. Заморочек много, а польза иллюзорна. Там на сервисе можно кстати отключить все лишнее, ссылки в картинках например.
      В комментариях к статье «как защитить контент от воровства» я дал более легкий подобный скрипт. Функционал скрипта тот-же, правда без статистики и без кнопок поделиться, а сайт не грузит в отличие от первого.

  • Ольга Черныш:

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

    • Роман Ваховский:

      А вы пробовали кликнуть по этому слову на картинке? Не пробуйте, я уже кликнул. Открывается новое окно с каким-то левым сайтом :-). А что за плагин обратной формы? Установите Contact Form 7.

      • Ольга Черныш:

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

        • Роман Ваховский:

          Скорее всего это плагин обратной связи эти ссылки вставляет. Деактивируйте его, обновите кэш браузера и посмотрите на результат.
          Contact Form 7 мог перестать работать из-за проникшего вируса на сайт. У меня такое было. Опытные фрилансеры помогли справиться.
          Я бы на вашем месте не относился бы так беспечно к этой проблеме. Поисковики и за меньшие прегрешения в бан отправляют и не докажите им потом что не вы виноваты.

          • Ольга Черныш:

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

  • Ольга Черныш:

    Я как-то смотрела, но я там не все поняла, что они от меня хотят. Хотя бы часть исправить, где понятно.

    • Ваховский Роман:

      Основная масса ошибок от плагинов. Сносите кривые и ставьте с валидным кодом.

      • Ольга Черныш:

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

        • Роман Ваховский:

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

  • Татьяна:

    Здравствуйте,у меня ошибка с заголовком отображаемым в браузере. Почему то там отображается название сайта два раза, а потом название статьи, всё без пробела и два раза, не могу найти причину, может вы мне подскажите?
    На главной то же самое название сайта и сразу без пробела описание.
    Пожалуйста подскажите где нужно исправить такое недоразумение, а то у меня уже крыша едет и ничего не соображает.
    Буду очень рада вашей подсказке
    С уважением Татьяна

    • Ваховский Роман:

      По всей видимости у вас какой-то SEO плагин глючит или конфликтуют эти однотипные плагины между собой.
      По очереди отключайте плагины и смотрите на результат, не забывайте обновлять кэш браузера.
      Советую поставить плагин All in One Seo Pack.
      Если не справитесь, вышлите мне на почту пароль и логин блога, постараюсь помочь.

      • Татьяна:

        спасибо, это недоразумение поправила,убрала плагин по сео и всё нормализовалось, только теперь у меня стали не кликабельные статьи и все рубрики ведут на главную, не одно так другое 🙂

  • Надежда:

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

    • Ваховский Роман:

      Всегда делайте резервную копию тех файлов, которые правите. И тогда будет не страшно.

  • Михаил:

    Здравствуйте Роман! Я вот так и не могу понять, где искать эти линии с ошибками? В каком документе они прячутся? Какой файл надо открыть, чтобы их найти и исправить? У меня получается следующая ситуация: смотрю ошибки, смотрю код страницы в браузере, а вот где и как эту страницу найти в вордпрессе — не пойму, вобщем не знаю. Помогите пожалуйста разобраться мне в этом вопросе.

    • Роман Ваховский:

      Вы наверное перед началом проверки не нажали на кнопку «More Options» и соответственно не выбрали параметры отображения ошибок. Ставьте там все галочки (второй скриншот сверху).
      На 168 строке в валидаторе после анализа вашего блога (галочка Clean up Markup with HTML-Tidy) у вас стоит закрывающий . А открывающего

      нет, я проверял. Это критическая ошибка,

      надо удалить. Находится он в header.php так как под ним сразу ссылка на вашу картинку в шапке. В валидаторе это хорошо видно.

  • Tatiana:

    Роман,привет! Отличная статья.Понимаю, что это сложно,но делать надо.Ответь, пожалуйста,а плагины тоже надо проверять на валидность? Или только статьи?Поделилась.

    • Роман Ваховский:

      Статья она и есть статья. Текст и ничего более, разве что картинку не правильно вставить. А большинство ошибок содержаться именно в плагинах.

  • Борис:

    Спасибо за статью. Только один вопрос, возможно я упустил что-то, но где можно исправить код в вордпресе? Только через фтп-менеджер?

Добавить комментарий

Все права защищены © 2011-2024 WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.