Проверка валидации кода: как найти ошибки в HTML и CSS
Разберем, насколько критическими для работы сайта и его продвижения могут быть ошибки в HTML-коде, и зачем нужны общие стандарты верстки.
Что такое валидность кода
После разработки дизайна программисты верстают страницы сайта — приводят их к единой структуре в формате HTML. Задача верстальщика — сделать так, чтобы страницы отображались корректно у всех пользователей на любых устройствах и браузерах. Такая верстка называется кроссплатформенной и кроссбраузерной — это обязательное требование при разработке любых сайтов.
Для этого есть специальные стандарты: если им следовать, страницу будут корректно распознавать все браузеры и гаджеты. Такой стандарт разработал Консорциумом всемирной паутины — W3C (The World Wide Web Consortium). HTML-код, который ему соответствует, называют валидным.
Валидность также касается файлов стилей — CSS. Если в CSS есть ошибки, визуальное отображение элементов может нарушиться.
Разработчикам рекомендуется следовать критериям этих стандартов при верстке — это поможет избежать ошибок в коде, которые могут навредить сайту.
Чем ошибки в HTML грозят сайту
Типичные ошибки кода — незакрытые или дублированные элементы, неправильные атрибуты или их отсутствие, отсутствие кодировки UTF-8 или указания типа документа.
Какие проблемы могут возникнуть из-за ошибок в HTML-коде
- страницы загружаются медленно;
- сайт некорректно отображается на разных устройствах или в браузерах;
- посетители видят не весь контент;
- программист не замечает скрытую рекламу и вредоносный код.
Как валидность кода влияет на SEO
Валидность не является фактором ранжирования в Яндекс или Google, так что напрямую она не влияет на позиции сайта в выдаче поисковых систем. Но она влияет на мобилопригодность сайта и на то, как поисковые боты воспринимают разметку, а от этого косвенно могут пострадать позиции или трафик.
Почитать по теме:
Главное о микроразметке: подборка знаний для веб-мастеров
Представитель Google Джон Мюллер говорил о валидности кода:
«Мы упомянули использование правильного HTML. Является ли фактором ранжирования валидность HTML стандарту W3C?
Это не прямой фактор ранжирования. Если ваш сайт использует HTML с ошибками, это не значит, что мы удалим его из индекса — я думаю, что тогда у нас будут пустые результаты поиска.
Но есть несколько важных аспектов:
— Если у сайта действительно битый HTML, тогда нам будет очень сложно его отсканировать и проиндексировать.
— Иногда действительно трудно подобрать структурированную разметку, если HTML полностью нарушен, поэтому используйте валидатор разметки.
— Другой аспект касается мобильных устройств и поддержки кроссбраузерности: если вы сломали HTML, то сайт иногда очень трудно рендерить на новых устройствах».
Итак, критические ошибки в HTML мешают
- сканированию сайта поисковыми ботами;
- определению структурированной разметки на странице;
- рендерингу на мобильных устройствах и кроссбраузерности.
Даже если вы уверены в своем коде, лучше его проверить — ошибки могут возникать из-за установки тем, сторонних плагинов и других элементов, и быть незаметными. Не все программисты ориентируются на стандарт W3C, так что среди готовых решений могут быть продукты с ошибками, особенно среди бесплатных.
Как проверить код на валидность
Не нужно вычитывать код и считать символы — для этого есть сервисы и инструменты проверки валидности HTML онлайн.
Что они проверяют:
- Синтаксис
Синтаксические ошибки: пропущенные символы, ошибки в написании тегов. - Вложенность тэгов
Незакрытые и неправильно закрытые теги. По правилам теги закрываются также, как их открыли, но в обратном порядке. Частая ошибка — нарушенная вложенность
Обычно сервисы делят результаты на ошибки и предупреждения. Ошибки — опечатки в коде, пропущенные или лишние символы, которые скорее всего создадут проблемы. Предупреждения — бессмысленная разметка, лишние символы, какие-то другие ошибки, которые скорее всего не навредят сайту, но идут вразрез с принятым стандартом.
Валидаторы не всегда правы — некоторые ошибки не мешают браузерам воспринимать код корректно, зато, к примеру, минификация сокращает длину кода, удаляя лишние пробелы, которые не влияют на его отображение.
Почитать по теме:
Уменьшить вес сайта с помощью gzip, brotli, минификации и других способов
Поэтому анализируйте предложения сервисов по исправлениям и ориентируйтесь на здравый смысл.
Перед исправлением ошибок не забудьте сделать резервное копирование. Если вы исправите код, но что-то пойдет не так и он перестанет отображаться, как должен, вы сможете откатить все назад.
HTML и CSS валидаторы — онлайн-сервисы для проверки кода
Есть довольно много валидаторов, выберите тот, в котором вам удобнее работать. Мы рекомендуем использовать известные сервисы от создателей стандартов. Если пояснения на английском воспринимать сложно, можно использовать автоматический перевод страницы.
Валидатор от W3C
Англоязычный сервис, онлайн проверяет соответствие HTML стандартам: можно проверить код по URL, залить файл или вставить код в окошко.
Инструмент покажет список ошибок и предупреждений с пояснениями — описанием ошибки и ее типом, а также укажет номер строки, в которой нужно что-то исправить. Цветом отмечены типы предупреждений и строчки с кодом.
Валидатор CSS от W3C
Инструмент от W3C для проверки CSS, есть русский язык. Работает по такому же принципу, анализирует стили на предмет ошибок и предупреждений. Первым идет блок ошибок, предупреждения собраны ниже отдельно.
Проверить HTML можно с помощью браузерных плагинов, к примеру, Web-developer или HTML Validation Bookmarklet для Google Chrome, HTML Validator для Firefox и Google Chrome, Validator или W3C Markup Validation Service для Opera, или другого решения из списка инструментов.
Исправления ошибок и валидации HTML и CSS может быть недостаточно: всегда есть другие возможности испортить отображение сайта. Если что-то не работает, как надо, проведите полноценный аудит, чтобы найти ошибки.
С другой стороны, не зацикливайтесь на поиске недочетов в HTML — если код работает, а контент отображается корректно, лучше направить ресурсы на что-то другое — оптимизацию и ускорение загрузки, например.
Как найти ошибку на сайте
АУДИТ САЙТА — ССЫЛКИ
Мария Васильева
Customer Support Specialist at Serpstat
Ошибка 404 означает, что сайту не удалось найти запрошенную вами страницу, потому что ее попросту не существует. Зачастую эта ошибка влечет за собой немало проблем с оптимизацией сайта. Мы подготовили этот материал, чтобы помочь вам разобраться, какую угрозу представляют страницы 404, как их найти и исправить.
- В чем опасность страниц с 404 ошибкой для сайта
- Причины появления 404 ошибки
- Как найти страницы с 404 ошибкой
- Что делать с неработающими страницами
- Заключение
В чем опасность страниц с 404 ошибкой для сайта
Страницы, отдающие 404 код ответа сервера, есть на каждом сайте: на них можно попасть, просто неправильно задав адрес страницы в адресной строке.
Однако если ошибка 404 появилась в результате удаления страницы или ошибки в ссылке на сайте, это может повлечь негативные последствия для продвижения. Почему?
В первую очередь, страдают поведенческие факторы. Чем больше на сайте неработающих страниц, тем меньше пользователи проводят на нем времени и реже возвращаются. Алгоритмы поисковых систем особое внимание уделяют поведенческим факторам, потому последние играют важную роль в ранжировании.
Растрачивается краулинговый бюджет. У каждого сайта он ограничен, роботы не могут просканировать большие сайты за один раз. И чем больше на их пути будет попадаться 404 страниц, тем менее вероятно, что они доберутся до страниц с новым и обновленным контентом, которые нужно просканировать для попадания в выдачу.
Теряется ссылочный вес. Если страница удалена, весь ссылочный вес, который она получала, будет идти в никуда.
Ссылки, которые ведут на неработающие страницы, называются битыми и несут серьезную опасность. Поэтому, удаляя какие-либо страницы на вашем сайте, замените или удалите ссылки, которые на них ведут.
Причины появления 404 ошибки
Самые распространенные причины, почему пользователи сталкиваются со страницей 404:
-
Неправильно прописан URL (например, с опечаткой в адресе, а также с или без символа «/» в конце).
- Полный гайд по оптимизации картинок на сайте
- SEO-аудит сайта с помощью Serpstat: обзор инструмента
- Самые распространенные SEO-ошибки на сайте: инфографика
- Как найти на сайте ошибки, которые мешают его продвижению?
Как найти страницы с 404 ошибкой
Проверка сайта на 404 ошибку может проводиться многими способами, самые эффективные из них я опишу ниже.
Панель вебмастеров Google
Откройте сервис Google Search Console и перейдите на вкладку «Обзор».
Прокрутите вниз и посмотрите типы найденных на сайте ошибок, которые также отображаются в разделе «Покрытие».
Хотите с помощью Serpstat найти и исправить технические ошибки на сайте?
Активируйте триал и протестируйте платформу бесплатно в течение 7 дней!
В поиске неработающих страниц вам поможет модуль «Аудит сайта» . Алгоритм работы следующий:
Добавьте проект.
В открывшемся окне введите домен, название и группу проекта, после чего кликните на кнопку «Создать».
После добавления сайта в список проектов слева вы увидите колонку «Аудит сайта», вам необходимо нажать «Запустить аудит». Также вы можете провести аудит одной страницы.
Выставьте необходимые настройки и затем нажмите «Начать анализ».
По окончании анализа откройте отчет Все проверки «Код ответа: 4xx» и посмотрите страницы с 404 ошибкой.
Проверить свой сайт
404 ошибка: почему возникает и как ее устранить
Как создать страницу ошибки 404
Как отслеживать 404 ошибки с помощью Google Analytics и Tag Manager
Как удалить пустые страницы на сайте
Netpeak Spider
Проверить неработающие страницы вы также можете в Netpeak Spider .
Запустите краулер.
На вкладке «Параметры» боковой панели выберите шаблон «Минимум», если хотите сосредоточиться только на поиске ошибки 404.
Введите в строку адрес сайта и нажмите кнопку «Старт».
По завершении сканирования перейдите на вкладку «Отчеты» → «Ошибки». Ознакомьтесь с ошибками «4xx ошибки: Client Error» и «Битые страницы» (в этот отчет попадают страницы, отдающие код ответа 4xx). Кликните на каждую из ошибок, чтобы ознакомиться со списком страниц, на которых они были обнаружены, на вкладке «Отфильтрованные результаты».
Чтобы узнать, какие ссылки ведут на неработающие страницы, откройте отчет по ошибке, нажав на соответствующую кнопку в этой же вкладке.
При необходимости вы можете выгрузить отдельный отчет по битым ссылкам через меню «Экспорт» → «Специальные отчеты по ошибкам» → «Битые ссылки».
Помимо описанных методов ошибки 404 можно отслеживать с помощью Google Analytics и Tag Manager .
Что делать с неработающими страницами
При обнаружении на сайте 404 страниц и битых ссылок следует немедленно от них избавиться. Сделать это можно несколькими способами:
- заменить некорректные ссылки на работающие;
- удалить все ссылки, которые ведут на страницы 404. Также стоит удалить битую страницу из индекса поисковых систем.
Перед этим убедитесь, что страницы закрыты от индексации и правильно отдают 404 код ответа сервера. У Google также есть подобный инструмент , но с его помощью вы можете убрать страницы из результатов поиска только на 90 дней. Подробно о том, как удалить страницы навсегда, читайте в справке Google .
Как проверить сайт на ошибки и их исправить
Шутки ради: Тебе не нужно исправлять ошибки на сайте – если у тебя нет сайта.
- Как найти ошибки на сайте через Яндекс Вебмастер
- Поиск мусорных страниц и ошибок
- Продолжаем искать ошибки на сайте
- Исправляем ошибки: дубликаты страниц
- Исправляем ошибки: находим и убираем «битые ссылки»
- Исправляем ошибки: Оптимизация картинок
- Исправляем ошибки: Два заголовка H1
- Исправляем ошибки: Отсутствие заполненных мета тегов
Сайты без ошибок и с быстрой скоростью загрузки могут получить ТОП даже без ссылок. Конечно поисковые системы отдают предпочтения сайтам которые хорошо оптимизированы имеют четкую и понятную структуру для поисковых роботов.
О поисковых роботах
У поисковых систем есть специальные роботы которые посещают ваш сайт и скачивают всю информацию о странице и ее данных, а именно заголовок страниц, название статей и других метатегов Их несколько видов и вот самые основные на примере Яндекса:
- YandexBot — основной робот Яндекса, обходит и скачивает всю информацию;
- YandexImages – индексирует картинки для поиска;
- YandexBlogs — робот поиска по блогам исоциальным сетям;
- YandexWebmaster – приходит придобавлении сайта через форуму Веб Мастер;
- YandexPagechecker – проверяет ошибки в разметке сайта;
- YandexFavicons — индексатор фавиконок картинок в браузере
Поисковые роботы ежеминутно и ежедневно проводят обновления своей базы обновляя поисковую выдачу новыми данными и на благодаря им вы получаете более свежую и актуальную информацию, например о свежих новостях. Они сортируют информацию и сохраняют в соответствующий раздел своего сервера по специальным метатегам.
А если там ошибки, то и поисковый робот не может правильно разметить информацию на сайте и понять о чем та или иная страница. Уже исправив ошибки на сайте можно начать получать трафик из поисковой выдачи.
Вот например в рекомендациях от Яндекс написано:
- Необходимо поддерживать четкую внутреннюю ссылочную структуру.
- Использовать карту сайта (sitemap) для роботов.
- Ограничение служебных страниц в robots.txt, а информации в специальные закрывающие от индексации .
- Быть внимательнее с движками (CMS) для сайта. Они грузят поиск ненужными техническими страницами и битыми ссылками.
Как найти ошибки на сайте через Яндекс Вебмастер
Чтобы исправить ошибки на сайте их во первых нужно найти =) Для этого добавляем сайт в зарегистрировав почту на Яндекс .
После чего вам предложат подтвердить права на сайт тремя разными способами, то есть доказать сервису что домен принадлежит вам.
Лично мне проще загрузить файл через FTP клиент (скачать можно тут) поэтому я выбираю этот способ.
После загрузи этого файла на ваш сервер с сайтом нажмите кнопку подтвердить и подождите пока информация обновиться по вашему сайту. Это происходит как за несколько часов так до нескольких дней.
После чего выполняем рекомендации и например как в моем примере заполняем на те которые сам покажет инструмент Яндекс Вебмастер.
Приоритет обязательно отдавайте Фатальным и Критичным ошибкам ведь они на прямую влияют на ранжирование сайта.
Удобство Яндекс Вебмастер заключается в том, что там понятным языком написано что нуждается в доработке, а также предложено решение по исправлению, ну а если появятся вопросы, то задавайте их в комментариях.
Углубляемся в поиск мусорных страниц и ошибок
В Веб Мастере есть замечательная функция и находится она в разделе Индексирование > Статистика обхода.
Тут мы видим все страницы куда заглядывает поисковый робот и какую информацию он скачал для поисковой системы, ошибки, редиректы и прочую нужную информацию.
Внизу с права есть функция выгрузки этих данных для удобства работы в Exel. Выгружаем, открываем, сомотрим.
Чтобы нам не просматривать одни и те же страницы, рекомендую воспользоваться функцией удаление дубликатов а колонке A.
Все технические, информационные, мусорные страницы должны быть запрещены к индексации в robots.txt, но сначала выпишите их в отдельный текстовой документ. О настройке файла robots.txt мы будем говорить в следующей статье (Части 3).
Вот например технические страницы движка WordPress. Это папка /wp-json/ и все что с ней связано, а также страницы /?p=. Такие страницы тянут сайт внизу, так как поисковые системы думают что сайт захламлен техническими данными и за ним никто не смотрит, а значит доверия к ним меньше.
Просмотрите все страницы, выпишите «мусорные» страницы и сохраните в текстовом файле, они нам потребуются позднее.
Продолжаем искать ошибки на сайте
Тут нам уже понадобиться определенный софт, например Netpeak Spider. Очень удобная программа причем «условно» бесплатная. В ней есть 14 дней тестового доступа без ограничения функционала. Эти две недели с «головой» хватит для аудита простого сайта. Вот ссылка https://netpeaksoftware.com/ru/spider
Инструмент позволит найти:
Битые ссылки – то есть ссылки на несуществующие страницы сайта и выдающие ошибку 404 (отсутствие страницы). Ссылки на несуществующие страницы тянут сайт вниз, такая как поисковая система думает что сайтом не занимаются и понижают в выдаче.
- Дубликаты страниц и текста – страницы с дублирующимся контентом плохо или вообще не получают трафик (посетителей). Поиск просто не может понять на какую страницу вести пользователя и иногда исключает из выдаче обе страницы.
- Находит страницы без внутренних ссылок – как известно весь интернет это миллиарды ссылок если с вашей страницы невозможно уйти на другую то образуется «тупик» или по-другому «висячий узел», что негативно влияет на получение трафика на страницу.
- Отсутствие заполненных мета тегов – очень важный инструмент для поискового робота. Именно по ним робот получает информацию о чем ваш сайт или конкретная страница. Нет мета тегов – нет трафика.
- Максимальный размер изображения – скорость загрузки сайта напрямую зависит от его оптимизации, а если картинка или фотография загружается по 20-30 секунд это никуда не годится.
- Одинаковые мета теги Title и H1 – Делайте теги с максимальным вхождением ключевого запроса о котором страница, но все хорошее в меру. По умолчанию рекомендуемый максимальный размер тега H1 не более 65 символов, а тега title не более 120.
Исправляем ошибки: дубликаты страниц
Дубликаты страниц нужно удалить или поставить с них 301 редирект. Если у вас сайт на движке CMS WordPress то вам поможет плагин «Перенаправления». Скачать вы его можете в админ панели во вкладке Плагины > Добавить новый.
Или сделайте через файл .htaccess, просто добавив в него следящий текст
Где в первой строчке /test/ это с какой страницы, а на второй строчке куда переводить.
Исправляем ошибки: находим и убираем «битые ссылки»
Если вы не видите «битые» то есть ведущие на несуществующие страницы ссылки, то это не значит, что поисковой робот их не видит.
Принцип работы поискового робота как раз заключается в переходе по каждой ссылке и получение информации о следующей странице, а если страница не существует то сервер выдает ошибку.
Вывод: сайтом не занимаются. Итог: понижение в выдаче. Результат: Отсутствие посетителей.
Для поиска битых ссылок также можно использовать бесплатную программу Xenu. Она проста в использовании и понятна.
Убираем ссылки на несуществующие страницы. При использовании «дивижка» сайта убрать ссылку не составит труда. Заходим в редактирование страницы с битой ссылкой и убираем ссылку.
Если движок отсутствует, то заходим через FTP доступ на сервер и редактируем страницу вручную. Нам необходимо найти ссылку в коде страницы.
Ссылка имеет вот такой HTML код:
Убираем весть HTML код кроме «ТЕКСТ ССЫЛКИ», тем самым мы уберем ссылку и избавимся от ошибки.
Исправляем ошибки: Оптимизация картинок
Чем быстрее грузится сайт, тем лучше. Для этой проверки есть специальные сервисы, например бесплатные от Google Page Speed Insights. Он не только покажет скорость сайта, но и каждой страницы в отдельности.
В 70% случаев причина медленной загрузки страницы это неоптимизированные картинки, а остальные 30% это скрипты, сервер и само программирование.
Каждую картинку необходимо сделать меньшим объемом и без потеря качества. Для оптимизации можно воспользоваться сервисом https://tinyjpg.com/.
Необходимо загрузить картинку на сервис, а потом скачать оптимизированную картинку и заменить ее на самом сайте.
Готово! И так должно быть с каждой картинкой.
Исправляем ошибки: Два заголовка H1
Этот мета тег на должен быть на странице только один, то есть в коде он должен встречать один раз. Найти его можно открыв HTML код страницы. Если вы используете браузер Chrome делается это комбинациями клавиш Ctrl + U.
Дальше проверяем саму страницу. Ищем мета тег H1. Нажимаем сочетание клавиш Ctrl+F и вводит в поиск h1 или
Если вы находите более одного тега h1 то это ошибка и ее нужно исправлять.
Скажу сразу, если нет навыков в HTML сайта и знания CSS то рекомендую обратиться к программисту для исправления этой ошибки.
Каждый заголовок имеет свой класс, а соответственно и вид отображения на странице, но можно попробовать заменить в коде h1 на h2. Если это повлияло на отображение сайта, то верните все обратно и обратитесь к программисту. Стоимость таких работ от 200 до 500 рублей.
Исправляем ошибки: Отсутствие заполненных мета тегов
Тут все просто. Заполните данные основываясь на самой информации которую несет страница. Если страница о «как похудеть к лету», то рекомендую делать заголовки и title «цепляющими». Ведь именно title видят пользователи поисковиком.
Чтобы не ломать голову воспользуйтесь контекстной рекламой. Конечно не в прямом смысле, а введите продвигаемый запрос и посмотрите выдачу.
Теперь генерируем например вот так: Как похудеть к лету – 10 килограмм в домашних условиях!
Если у Вас остались вопросы задайте их в комментариях, обязательно отвечу на них, теперь переходим дальше: Продвижение сайта — настройка robots.txt — часть 3
Обзор самых популярных ошибок на сайте и секреты управления ими
Prostobiz расскажет о наиболее распространенных внутренних ошибках, о причинах их возникновения, инструментах проверки и возможных способах устранения 403, 404, 500 и других ошибок. Ни один сайт во время своего взаимодействия с посетителем не застрахован от появления ошибок. Причины у ошибок могут быть очень разные – это действия пользователя, ошибки программиста при разработке сайта, проблемы с аппаратным обеспечением сервера или сетью.
Путеводитель по статье
- Ресурс не найден (код ошибки 404)
- Внутренняя ошибка сервера (код 500)
- Сервис недоступен (код ошибки 503)
- Ошибка при маршрутизации запроса (код ошибки 502)
- Ошибки, связанные со временем ожидания ответа (коды ошибок 408, 504, 522)
- Ошибки авторизации (коды 401, 403, 407, 511)
- Ошибки запроса к серверу (коды 400, 405, 406, 409, 411-417, 501, 505, 510 и многие другие)
- Редактируем страницы ошибок в CPanel
- Управление ошибками в Joomla
- Управление ошибками в WordPress
- Важность управления ошибками для веб-мастера
- 5 инструментов, которые помогут найти ошибки на сайте12.1 Usersnap12.2 BugHerd12.3 BugMuncher12.4 Redline12.5 InVisionLiveCapture
Обзор самых популярных ошибок на сайте и секреты управления ими
Ошибки при работе сайта разделяются на 2 большие группы: ошибки на стороне клиента и ошибки на стороне сервера. Ошибки клиентской стороны имеют коды ответа протокола HTTP из серии 4xx, ошибки сервера — 5xx. Коды ответов сгруппированы логически на несколько неформальных групп для упрощения восприятия. Итак, какие же ошибки подстерегают нас при серфинге в Интернет?
Ресурс не найден (код ошибки 404)
Самая распространенная и простая в обработке ошибка, которая возникает, когда некоторый ресурс на сайте меняет свое расположение.
Причины:
- страница сайта была удалена или перемещена;
- заголовок страницы был изменен, и система управления сайтом автоматически изменила ее URI (универсальный идентификатор ресурса);
- запрошенный ресурс действительно отсутствует, т.к. его адрес был введен пользователем вручную неверно;
- нарушена целостность сайта в результате проблем с программным или аппаратным обеспечением, например, стерт или недоступен индексный файл, картинка, видеоролик и т.д.
Что делать:
- обязательно создать пользовательскую страницу для данного типа ошибки и дать в ней ссылку на главную страницу сайта и/или поисковую форму;
- при переименовании страниц и изменении их URI создать 301-ый редирект на новый адрес;
- периодически проверять сайт на наличие так называемых «битых» ссылок и исправлять их;
- периодически создавать резервные копии файлов сайта, чтобы при обнаружении «битой» ссылки на существовавший ранее файл можно было его восстановить.
Также есть понятие «программной» 404-ой ошибки (soft 404 error), которая возникает в случае, если программист по незнанию при отсутствии некоторого ресурса возвращает код успеха 200 и сообщение о том, что такая страница не найдена. Ситуация крайне неприятная, т.к. поисковые системы могут расценить это как большое количество задвоенных страниц, а найти «программные» ошибки с помощью ПО для обнаружения «битых» ссылок без дополнительных действий нельзя. Здесь совет один: если ресурс не найден, должен возвращаться именно код 404.
Внутренняя ошибка сервера (код 500)
Это зачастую довольно сложная техническая проблема, для решения которой без глубоких знаний в веб-разработке не обойтись. Код 500 возвращается, если есть проблема на стороне сервера, для которой не предусмотрен никакой другой код из группы 5xx.
Причины:
- ошибки в программном коде сайта;
- проблемы с настройкой веб-сервера.
Что делать:
- не менять без крайней необходимости и соответствующих знаний код системы управления сайтом и настройки веб-сервера;
- тестировать код сайта перед публикацией в Сети, тестировать функциональность сайта после публикации.
Сервис недоступен (код ошибки 503)
Причины:
- проблемы с серверным программным обеспечение: веб-сервер, базы данных, кеширующие прокси-сервера, акселераторы выполнения кода;
- сервер действительно отсутствует в Сети из-за проблем с его аппаратурой, питанием, сетью, в которой он находится.
Что делать:
- следить за состоянием сервера и сайта с помощью соответствующего ПО и своевременно исправлять нештатные ситуации.
Ошибка при маршрутизации запроса (код ошибки 502)
Причины:
- проблемы с сетью на участке между клиентом и сервером;
- проблемы в работе одного из связанных с работой сайта серверов.
Что делать:
- проверить, что у Вас точно работает Интернет или локальная сеть, если целевой сайт находится во внутренней сети организации (Интранет);
- проверить работоспособность сайта, подключившись к другому провайдеру или через другой прокси-сервер;
- веб-мастеру следует проверить, что все сервера, на которых работает сайт, нормально работают.
Ошибки, связанные со временем ожидания ответа (коды ошибок 408, 504, 522)
Причины:
- сервер не дождался запроса от клиента (код 408);
- не получил ответ от следующего в цепочке сервера (код 504);
- соединение клиента с сервером вообще не было установлено (код 522).
В таком случае клиенту также есть смысл повторить свой запрос через некоторое время, больше от него ничего не зависит. Веб-мастеру нужно проверить связь между серверами, которые принимают участие в работе его сайта, и их работоспособность в принципе.
Ошибки авторизации (коды 401, 403, 407, 511)
Причины:
- для доступа к странице сайта требуется авторизация на нем самом (код 401) либо в прокси-сервере (коды 407 и 511);
- авторизация успешна, но для данного пользователя доступ запрещен (код 403).
Что делать:
- ввести правильные имя пользователя и пароль, если их запрашивает сайт через специальное окно в браузере (для кода 401);
- при настройке соединения через прокси-сервер указать действующие имя пользователя и пароль (коды 407 и 511);
- в случае получения кода ответа 403 нужно использовать другие имя пользователя и пароль, если они известны, либо же ничего не делать, если 403-й код получен в ответ на попытку просмотреть список содержимого каталога на веб-сервере, отображение которого запрещено серверными настройкам.
Ошибки запроса к серверу (коды 400, 405, 406, 409, 411-417, 501, 505, 510 и многие другие)
Данные ошибки возвращаются в случае, если запрос получен, не может быть обработан сервером. Причины могут быть очень разными и не всегда могут быть правильно интерпретированы со стороны клиента.
Что делать:
- повторить запрос, который не был выполнен с первого раза (например, повторно отправить форму в браузере);
- поменять клиентское приложение, если это возможно (например, выполнить действия в другом браузере);
- повторить свой запрос позже;
- если ничего не помогает, нужно обратиться в службу поддержки того ресурса, при работе с которым возникают проблемы.
Редактируем страницы ошибок в CPanel
Если система управления сайтом не позволяет управлять страницами ошибок, которые возникают на сайте, используйте панель управления хостингом. Как это сделать, будет показано на примере широко распространенной системы CPanel.
В CPanel отредактировать страницы ошибок можно зайдя по соответствующей ссылке в секции «Дополнительно».
Здесь по умолчанию открывается вкладка с наиболее распространенными кодами ошибок: неверный запрос (ошибка 400), проблемы с доступом (ошибки 401 и 403), страницы не найдена (ошибка 404) и внутренняя ошибка сервера (ошибка 500). Если нужны дополнительные коды, то выбираем вкладку справа.
Для редактирования страницы с ошибкой выбираем соответствующий код, например, 404 и вводим текст, который будет отображаться вместо стандартной страницы с ошибкой, которую выводит веб-сервер.
Создание пользовательских страниц с описанием ошибок через панель управления хостингом – не самый лучший вариант. Предпочтительнее, если система управления сайтом позволяет создать такую страницу в едином дизайне с основным сайтом. Рассмотрим эту возможность на примере некоторых распространенных бесплатных CMS (систем управления сайтом).
Управление ошибками в Joomla
Система управления сайтом Joomla 3.1.5 по умолчанию обрабатывает ошибку 404 и показывает страницу, которая описана в файле error.php в каталоге с темой.
Кроме встроенной возможности CMS, веб-разработчик может предоставить пользователю настраиваемую страницу для ошибки 404, которая будет полностью повторять дизайн сайта с заголовком, боковыми панелями, меню и подвалом. Нужно создать эту страницу в административной панели сайта и немного изменить код стандартного файла error.php. Вот такой результат может получиться в этом случае: контент данной страницы настраивается в админ-панели любым уполномоченным пользователем, и при этом возвращается правильный код ответа протокола HTTP – 404.
Управление ошибками в WordPress
В самой популярной системе для создания блогов встроить страницу с 404-ой ошибкой в дизайн сайта совсем не трудно. Достаточно создать файл 404.php в каталоге с темой и внести в него рекомендованный в документации код. Ниже представлен пример создания такой страницы в дизайне сайта.
Важность управления ошибками для веб-мастера
Постоянный мониторинг и грамотная обработка ошибок на сайте очень важны, т.к. это напрямую влияет на удобство его использования посетителями и отношение к нему поисковых систем. Одна ошибка за раз может перечеркнуть месяцы работы SEO-оптимизаторов, поэтому обязательно правильно возвращайте код ошибки при проблемах на сайте и уделите время для настройки страницы ошибок через панель управления хостингом или, что предпочтительнее, используйте возможности CMS, на которой работает сайт.
Материалы по теме
- Краткое описание HTTP-кодов ответа.
- Спецификация протокола HTTP версии 1.1 — RFC 2616.
- Описание кода ошибки 404.
- Описание и примеры дизайна страницы с 404-ой ошибкой.
- Описание и причины ошибки 502 (ссылки, http://www.wikireality.ru/wiki/502_Bad_Gateway, http://blog.pcmag.ru/node/601)
- Описание и причины ошибки 503.
- Создание собственной страницы для 404-ой ошибки в Joomla.
- Руководство по созданию страницы для ошибки 404 в Joomla.
- Создание собственной страницы для 404-ой ошибки в WordPress.
5 инструментов, которые помогут найти ошибки на сайте
Традиционно ошибки, обратная связь от клиентов и запросы на нововведения и правки обсуждаются в длинных переписках или встречах, на которых инициируется следующая фаза разработки, в которой реализуются поднятые вопросы.
Но последовательность «намылить, сполоснуть, повторить» работает медленно: отчёты об ошибке надо обработать, задокументировать, сделать скриншоты, принять решение, что делать, и затем поставить задачу.
Гораздо более эффективно — как можно раньше получить обратную связь и обработать её параллельно с процессом разработки. Prostobiz предлагает вам рассмотреть варианты.
Современный путь отчёта об ошибках
Сейчас доступны отличные решения, такие как встроенные интерфейсы, позволяющие заказчикам, тестировщикам и пользователям отправлять отчёты об ошибках, давать обратную связь касательно дизайна и предлагать нововведения прямо из браузера. Нет необходимости вручную делать снимки экрана, сохранять какие-либо данные и т.д.
Такой подход к отчётам об ошибках в высшей мере уничтожает ручное документирование, отслеживание, обработку данных, создание скриншотов, спецификаций и долгие совещания, отбирающие ценное время разработчиков.
К тому же этими инструментами могут пользоваться все участники проекта: заказчики, менеджеры, дизайнеры и разработчики, причём одновременно. Правами доступа легко можно управлять, отчёты генерируются автоматически, зачастую реализована интеграция с такими сервисами, как Basecamp, Trello, GitHub.
Рассмотрим некоторые из таких инструментов подробнее.
Usersnap
Согласно сайту Usersnap, этот сервис является «отчётом об ошибках для всех, работающих над веб-проектами». Настроить Usersnap на работу с вашим проектом просто: необходимо скопировать и вставить готовый сниппет на JavaScript’е или установить расширение для Chrome или Firefox.
После установки, Usersnap добавляет кнопку «Feedback» на вашу веб-страницу. Далее клик на кнопке покажет панель с различными инструментами комментирования, помогающими оставлять обратную связь в виде текста и рисунков.
Одним из полезных инструментов сервиса Usersnap является Console Recorder, сохраняющий ошибки и другие потенциально ценные данные, полученные с помощью консоли разработчика.
Usersnap работает с Asana, Basecamp, GitHub.
Стоимость использования начинается от $19 в месяц. Самый дорогой пакет — $99 в месяц. Интеграция Usersnap с другими сервисами требует как минимум $49 в месяц.
BugHerd
Когда вы начнёте пользоваться BugHerd’ом вы быстро поймёте, что авторы сервиса потратили много времени, упрощая процесс отправки сообщения об ошибках и обратной связи. Как и Usersnap, данный сервис может быть установлен как сниппет на JavaScript или расширение для браузера.
При установке BugHerd’а запускается мастер установки, направляющий вас в этом процессе.
После установки, интерфейс сервиса появляется в боковой панели браузера. Самым важным инструментом является кнопка «+», позволяющая выбирать любой элемент HTML на странице и добавлять к нему комментарии.
Также BugHerd добавляет цветные маркеры на веб-странице для быстрой и лёгкой визуализации статуса каждой задачи.
Ответственный за устранение ошибки назначается по ходу просмотра проекта.
После отправки отчёта об ошибке создаётся новая «карточка», к которой можно получить доступ из интерфейса администратора BugHerd’а.
Сервис интегрируется с Basecamp, GitHub, Campfire и другими сервисами управления проектами кроме Trello.
В самом BugHerd’е неплохо реализованы функции управления проектами, так что интеграция с другими сервисами не критична.
Стоимость использования начинается с $29 в месяц для 5 пользователей и доходит до $180 для 50 пользователей.
BugMuncher
BugMuncher — это минималистский инструмент для ведения отчётов об ошибках. Устанавливается с помощью готового сниппета на JavaScript’е, расширений для браузеров не существует. Весь процесс установки подробно описан.
Подобно другим сервисам ведения отчётов об ошибках, BugMuncher добавляет кнопку «Feedback!» на страницу вашего проекта. Клик по кнопке отображает в модальном окне два инструмента: «Подсветить (Highlight)» и «Затемнить (Black Out)».
Во время отправки сообщения обратной связи, пользователю также необходимо ввести электронный адрес. После этого скриншот передаётся сервису BugMuncher вместе с такой сопутствующей информацией, такой как название, версия и размер открытого окна браузера, последовательность кликов и т.д.
BugMuncher не совсем корректно работает с браузером Chrome: подсвеченные и затемнённые области отображаются со смещением.
Сервис интегрируется с Trello, GitHub и Zendesk’ом, но для этого нужна подписка на средний план стоимостью $49.
Стоимость использования начинается от $19 в месяц — до 150 отчётов об ошибках. Максимальный пакет стоит $99 в месяц, и вы можете использовать логотип своей компании вместо логотипа BugMuncher’а.
Redline
Redline устанавливается в ваш проект с помощью сниппета на JavaScript’е.
Сервис предлагает два инструмента: размещение меток и комментирование.
После отправки сообщения об ошибке пользователь получит ссылку на страницу с описанием и скриншотом. Хотя этот способ сотрудничества удобен, то, что сообщения находятся в свободном доступе, оттолкнёт от использования Redline’а и заказчиков, и исполнителей. Но если вам нужен простой способ передачи некритичных сообщений об ошибках, Redline справится с этим.
Сервис интегрируется с Basecamp, Trello, Jira, GitHub и другими сторонними сервисами.
Стоимость подписки начинается от $19 в месяц и, даже начиная с самого простого плана, пользователи получают доступ к поддержке по SSL и бексонечному количеству проектов. API, настройки безопасности и подсветка элементов доступны для подписчиков плана Enterprise (стоимость на сайте не указана).
InVisionLiveCapture
InVision заработала свою репутацию за то, что этот сервис является самым тщательно продуманным, включающим в себя инструменты прототипирования и управления проектами. Интеграция с сервисами третьих сторон возможна благодаря так называемому Live Embed-коду.
Несколько месяцев назад InVision ввела в действие функцию LiveCapture — расширение для Chrome, собирающее информацию и скриншоты для отправки сообщений об ошибках и обратной связи.
Сам процесс установки Live Capture простой и быстрый. Сервис сохраняет весь экран, и после авторизации в InVision’е возможно комментирование и приглашение других пользователей к сотрудничеству.
InVision интегрируется с большинством популярных сервисов, таких как Basecamp, Trello, Slack. Кроме функций отправки сообщений об ошибках и обратной связи, InVision может сохранять различные версии дизайна, создавать прототипы и т.д.
Стоимость начинается от $15 в месяц, максимальный план стоит $100 и разрешает работу пяти сотрудников.
Заключение
Возможность отправлять сообщения об ошибках и иметь обратную связь прямо из браузера — отличное и простое решение: нет необходимости описывать каждую ошибку, каждое пожелание, достаточно указать на неё прямо на веб-странице и добавить небольшой комментарий.
Usersnap интуитивно понятен, может быть интегрирован с 20 другими сервисами, что хорошо для гибкости. Возможность получать дополнительную информацию о сессии работы тоже весьма полезна, так что Usersnap можно назвать победителем.
Стиль организации сообщений об ошибках BugHerd’а, называемый «Канбан», аккуратен. Также неплох сервис управления сообщениями об ошибках.
Redline и BugMuncher обладают набором простых функций, подходящих для процесса однопользовальского управления и разработки, например, для фрилансеров. В случае необходимости командной работы, потребуется переключиться на сервис с большим количеством функций или подключиться к какому-либо сервису, предоставляющему такие возможности.
InVision не подходит на 100% для работы с отчётами об ошибках. Хотя InVision LiveCapture и позволяет сохранять снимки экранов, он не позволяет пользователям оставлять комментарии без авторизации. Но InVision сам по себе полноценная платформа для работы с веб-проектами.
Материал с сайта sixrevisions.com. Перевод: Константин Войцеховский