Кейс: пример аудита фронтэнда сайта врача

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

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

Тег &lt;title&gt; найден, заполнен корректно.

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. Рекомендации

Итого рекомендуется к исправлению:

  1. Исправить ошибки валидации HTML, перечисленные в 1.5.
  2. Добавить поддержку опенграф-протокола.
  3. Решить вопрос с дублированием фавикона в коде, а также с 404 ошибкой для одного из них (только в случае, если именно этот вариант в итоге будет использован).
  4. Добавить на сайт мета-дескрипшен.
  5. Исправить мелкую проблему с горизонтальным скроллом на некоторых разрешениях.
  6. Внести правки в файл robots.txt, согласно пунктам 5.1—5.4.
  7. Опционально: рассмотреть возможность подключения HTTPS-версии и перехода на неё.
  8. Рассмотреть вариант размещения пикселей от социальных сетей для накопления базы для последующего ретаргетинга.
  9. Исправить ошибки в странице 404.
pic
pic
pic
pic
pic
pic
pic
pic
pic
pic
Истляев Максим

Интернет-маркетолог. В интернете также известен под ником FladeX.

В данный момент занимаюсь интернет-маркетингом для b2b и сферы услуг.

Ранее несколько лет занимался изучением и модернизацией phpBB, вёрсткой и интеграцией шаблонов под различные CMS, фронтэнд-разработкой, инвестициями в информационные сайты.

Заинтересован в сотрудничестве. Вы можете заказать у меня услуги по интернет-маркетингу, лидогенерации, технической настройке сайтов, SEO.