Кейс: пример аудита фронтэнда сайта врача
Пример моей работы по аудиту фронтэнда. Заказчик — вебмастер, занимающийся поддержкой и развитием сайта врача-гинеколога. Нижу привожу итоговый отчёт по моему аудиту, но часть данных я удалил.
1. Валидация HTML
Были проверены типовые страницы.
1.1. Главная страница
15 ошибок, 5 предупреждений.
1.2. Страница листинга
На примере /patsientam.
6 ошибок, 3 предупреждения.
1.3. Страница с контентом
На примере /patsientam/podgotovka-k-laparoskopii.
6 ошибок, 3 предупреждения.
1.4. Страница контактов
/kontakty.
11 ошибок, 6 предупреждений.
1.5. Исправление ошибок
Полного исправления ошибок не требуется, так как это не является критичным. При наличии возможности исправления рекомендую обратить внимание на следующие ошибки и недоработки:
- Удалить дублирующий мета-тег с кодировкой: <meta charset=»utf-8″ />
- Убрать projection из значений атрибута media тега <link>. Он является запрещённым.
- Можно удалить атрибут type для тегов <script>.
- Удалить кавычки из значения атрибута alt тега <img> — из-за них html парсится некорректно. Пример: alt=»Научно-практическая конференция (мастер-класс) «Хирургическое лечение эндометриоза: стратегия и тактика»».
- В строчке с копирайтом © 2014–2018 не закрыт тег <span>.
- Для всех изображений, заданных через тег <img>, нужно указать атрибут alt, можно даже с пустым значением.
- Для некоторых ссылок дублируется атрибут target. Нужно удалить дубль.
- Для таблиц через тег <table> не нужно использовать атрибут border. Вместо этого лучше использовать CSS-правила.
- Аналогично для <iframe> — вместо атрибутов frameborder и scrolling нужно использовать CSS-правила.
- Для тега <textarea> используется атрибут value. Это некорректно, атрибут нужно удалить, а значение поля ввода задаётся в виде текста между открывающим и закрывающим тегами.
- На странице контактов используются атрибуты микроразметки, однако она не была объявлена на странице. Пример: используется <h1 itemprop=»name»>, но нет <html itemscope itemtype=»http://schema.org/WebPage»>.
2. Валидация CSS
Стили сайта
/templates/drmatveev/html/com_jcomments/default/style.css — всё в порядке, ошибок нет.
3. Мета-данные
3.1. Опенграф
Мета-теги для опенграф протокола не найдены. Рекомендуется добавить.
3.2. Твиттер
Мета-теги для твиттер-карточек не найдены.
3.3. Бренд
3.3.1. В теге <title> вхождение бренда найдено.
3.3.2. В подвале сайта вхождение бренда найдено. Однако оно выполнено в виде адреса сайта. Возможно, имеет смысл использовать русское написание, аналогичное хвосту в тайтле.
3.4. Кодировка
Кодировка сайта указана через мета-тег, задана корректно, используется юникод. Однако мета-тег прописан дважды — нужно удалить второе вхождение.
3.5. Фавикон
Фавикон на сайте найден, расположен по нестандартному пути. В коде сайта фавикон прописан дважды — по нестандартному пути и по стандартному. Фавикон по стандартному пути отдаёт ошибку 404. Нужно исправить: удалить из кода один из тегов для фавикон, проверить доступность оставшегося. Опционально: желательно размещать фавикон по стандартному пути /favicon.ico, однако можно оставить и в текущем варианте, это некритично.
3.6. Apple Touch Icon
Иконки для устройств Apple не найдены.
Опционально можно добавить иконки для устройств на iOS, а также для браузеров сафари — apple touch icon. Это квадратные иконки, задаются кодом:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">3.7. Keywords & description
Мета-дескрипшен на сайте не найден. Рекомендуется добавить.
Мета-кивордс на сайте не найдены. Опционально можно добавить, но с пустым значением.
3.8. Title
Тег <title> найден, заполнен корректно.
4. Адаптивность
4.1. Mobile-friendly от Google
Сайт не проходит проверку из-за ошибки сервиса. Причина неустановлена.
4.2. Визуально
Визуально в браузере сайт ведёт себя адаптивно. Однако на небольших разрешениях иногда появляется горизонтальный скролл. Рекомендуется проработать вёрстку для таких случаев, чтобы горизонтального скролла не было совсем.
5. Robots.txt
5.1. Директива Host
В файле найдена директива Host, рекомендуется её убрать, так как яндекс заменил её на 301 редирект.
5.2. Юзер-агенты
В роботсе указаны две группы правил под два юзер-агента — общий и яндекс. Это корректно в связи с использованием директивы Host. Однако при её удалении есть смысл объединить группы в одну.
5.3. Sitemap
В файле указана директива sitemap. Указана отдельно от групп, в конце файла. Всё корректно.
5.4. CSS & JS
В роботсе заблокированы некоторые файлы фронтэнда. Например, папка templates. Рекомендуется перепроверить список всех запрещённых папок и файлов, оставив только действительно нужные запреты.
6. Защищённое соединение
6.1. Обзор
Сертификат SSL на сайте не установлен. HTTPS-версия не работает. Основной версией является HTTP.
7. Социальные сети
7.1. Ссылки
Ссылки на страницы в социальных сетях найдены, указаны корректно. Они особенно уместны, так как речь идёт о личном бренде.
7.2. Пиксели
Пиксели от соцсетей вк и facebook не найдены. Возможно, есть смысл их добавить для последующего ретаргетинга. Тем более что группы в соцсетях уже имеются.
8. Разное
8.1. Логотип
Обычно логотип сайта является ссылкой на главную страницу, однако в данном случае у сайта нет логотипа. Ссылкой на главную является одноимённый пункт меню. Это тоже корректно.
8.2. 404
Несуществующие адреса отдают 404 страницу. 404 страница не имеет дизайн в стиле сайта. Сервер отдаёт 404 код для такой страницы. Форма поиска на 404 странице отсутствует. На странице есть битое изображение. Всё корректно, но можно добавить форму поиска и исправить проблему с изображением.
8.3. Консоль браузера
В консоли браузера ошибок нет, всё корректно.
8.4. Хлебные крошки
Хлебные крошки на сайте не используются. В данном случае не критично в виду размера сайта (количества страниц и уровня вложенности).
9. Рекомендации
Итого рекомендуется к исправлению:
- Исправить ошибки валидации HTML, перечисленные в 1.5.
- Добавить поддержку опенграф-протокола.
- Решить вопрос с дублированием фавикона в коде, а также с 404 ошибкой для одного из них (только в случае, если именно этот вариант в итоге будет использован).
- Добавить на сайт мета-дескрипшен.
- Исправить мелкую проблему с горизонтальным скроллом на некоторых разрешениях.
- Внести правки в файл robots.txt, согласно пунктам 5.1—5.4.
- Опционально: рассмотреть возможность подключения HTTPS-версии и перехода на неё.
- Рассмотреть вариант размещения пикселей от социальных сетей для накопления базы для последующего ретаргетинга.
- Исправить ошибки в странице 404.
