[Идеальный аудит] Шаг №23: проверка кода и HTML тегов, css, ошибки кодировки, кроссбраузерность и микроформаты, валидация для seo продвижения в поисковых системах

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

В этой статье мы рассмотрим:

• как проверять сайт на наличие HTML-ошибок и оптимизировать его для разных браузеров и устройств;
• как проверить микроформаты для улучшения представления контента;
• необходимость использования внешних CSS и JavaScript файлов для улучшения производительности вашего сайта.

1. Как проверить сайт на HTML-ошибки

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

W3C Markup Validation Service:

1. Перейдите на сайт W3C Markup Validator.
2. Введите URL вашего сайта или загрузите HTML-файл.
3. Нажмите «Check» (или соответствующую кнопку), и сервис проведёт проверку.
4. Результаты будут показаны, включая любые ошибки или предупреждения.

Инструменты разработчика в браузере:

1. Откройте сайт в вашем браузере.
2. Нажмите правой кнопкой мыши и выберите «Исследовать элемент» или «Inspect» (зависит от браузера).
3. Перейдите на вкладку «Console» (консоль).
4. Обратите внимание на любые ошибки или предупреждения, связанные с HTML.

• Используйте специализированные инструменты. Существует множество платных и бесплатных инструментов для анализа и проверки кода сайта. Примеры включают HTML Tidy и DirtyMarkup.
• Проверьте на кроссбраузерность. BrowserStack и CrossBrowserTesting проверяют, как ваш сайт отображается и функционирует в разных браузерах. Это помогает выявить HTML-ошибки, которые проявляются только в определённых условиях.
• Проведите ручное тестирование. Ничто не заменит внимательное ручное тестирование. Переходите по страницам вашего сайта, ищите визуальные аномалии или другие проблемы, которые могут указывать на ошибки в коде.
• Профессиональная проверка. Если у вас нет необходимых навыков или инструментов, обратитесь к профессионалам в области веб-разработки для проведения аудита кода вашего сайта.

2. Как проверить кроссбраузерность по матрице

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

Составьте матрицу кроссбраузерности:

1. Определите ключевые браузеры: Chrome, Firefox, Safari, Edge и т. д.
2. Учтите разные версии каждого браузера.
3. Добавьте различные операционные системы: Windows, macOS, Linux, iOS, Android и т. д.
4. Учтите различные устройства: настольные ПК, планшеты, мобильные телефоны.

Используйте специализированные инструменты:

1. BrowserStack, CrossBrowserTesting и Sauce Labs, предоставляют доступ к множеству реальных и виртуальных устройств и браузеров для тестирования.
2. Запустите сайт или приложение в каждой комбинации из вашей матрицы и проверьте его функциональность и отображение.

• Ручное тестирование. Если у вас есть доступ к реальным устройствам, указанным в вашей матрице, проведите ручное тестирование на них. Обратите внимание на интерактивные элементы, анимации, шрифты и другие детали, которые могут отличаться в разных браузерах или на разных устройствах.
• Используйте эмуляторы и симуляторы. Эмуляторы позволяют имитировать различные устройства и окружения прямо на вашем компьютере. Они могут быть полезны для тестирования специфических сценариев или устройств, которые у вас нет в наличии.
• Анализ результатов. Запишите все проблемы и ошибки, обнаруженные во время тестирования. Определите приоритетность каждой проблемы на основе частоты использования определённой комбинации устройства/браузера вашими пользователями.
• Внесите коррективы и повторите тестирование. После внесения изменений в код повторите тестирование, чтобы удостовериться, что все проблемы были решены.

3. Как проверить наличие микроформатов

Микроформаты (microformats) — это способ маркировки информации на веб-страницах, использующий существующие HTML- или XHTML-теги, что позволяет программам легче интерпретировать и использовать содержимое страницы. Для проверки наличия микроформатов на вашем сайте можно использовать следующие методы:

Онлайн-инструменты проверки:

• Microformats Parser для анализа и извлечения микроформатных данных с вашего сайта.
• Google Rich Results Test — позволяет узнать, распознаёт ли Google микроформатные данные на вашем сайте и как они будут выглядеть в результатах поиска.

Ручная проверка кода:

1. Откройте исходный код вашей страницы (обычно это можно сделать, нажав правой кнопкой мыши на странице и выбрав «Просмотреть исходный код» или аналогичный пункт).
2. Ищите классы, связанные с микроформатами: «h-card», «h-entry», «h-event» и т. д.

• Расширения браузера. Существуют расширения для некоторых браузеров, которые автоматически обнаруживают и отображают микроформаты на странице. Например — Web Developer для Chrome и Firefox.
• Специализированные инструменты. Pin13’s Microformats Parser позволяет анализировать страницы на наличие микроформатов и показывать структурированные данные.

Базовые теги HTML:

4. Как проверить корректность использования микроформатов

• Google Rich Results Test — анализирует страницы на наличие структурированных данных, включая микроформаты.

Вставьте URL или фрагмент кода страницы, и инструмент выдаст вам результаты о том, как Google интерпретирует ваши микроформаты и есть ли ошибки.

• Microformats Parser — это инструмент, который извлекает микроформатные данные с вашего сайта.
  Вставьте URL или HTML-код, и инструмент предоставит структурированный вид данных.

Ручная проверка:

1. Откройте исходный код вашей страницы через «Просмотреть исходный код страницы» в вашем браузере.
2. Проверьте, что микроформаты используют правильные классы и структуру. Например, убедитесь, что у вас правильно используется «h-card» для контактной информации или «h-event» для событий.

• Расширения браузера. Некоторые расширения для браузера, например, Web Developer для Chrome и Firefox, предоставляют инструменты для анализа структурированных данных, включая микроформаты.
• Проверка документации. Посетите официальный сайт микроформатов и просмотрите документацию, чтобы удостовериться, что вы следуете правильным практикам и стандартам.

5. Как проверить попадание содержимого микроформатов в индекс поисковых систем

• Используйте Google Rich Results Test. Он определит, как Google интерпретирует структурированные данные на вашем сайте. Если микроформаты корректно распознаются, то их содержимое будет правильно отображаться в этом инструменте.
• Поисковый запрос. Попробуйте выполнить поисковый запрос, используя информацию из в микроформатов на вашем сайте. Посмотрите, корректно ли отображается информация в результатах поиска.
• Используйте Google Search Console. Перейдите в раздел «Внешний вид в поиске» и затем в «Результаты с расширенной разметкой». Это покажет, какие страницы с микроформатами успешно индексировались и какие ошибки (если таковые имеются) были обнаружены.
• Ручная проверка через операторы поиска. Вы можете использовать операторы поиска, такие как «site:yourwebsite.com», чтобы увидеть, какие страницы вашего сайта индексированы. Затем, выбрав конкретные страницы, проверьте их в результатах поиска на наличие расширенных сниппетов, которые генерируются благодаря микроформатам.

6. Как проверить код на наличие скриптов и css инструкций внутри страницы

Исходный код страницы:

1. Откройте нужную страницу в вашем веб-браузере.
2. Щелкните правой кнопкой мыши и выберите пункт «Просмотреть исходный код» или «Просмотр исходного кода страницы» (точное название зависит от вашего браузера).
3. В открывшемся окне исходного кода ищите теги <script> и <style>.

Используйте поиск по странице:

1. В режиме просмотра исходного кода активируйте функцию поиска (обычно это Ctrl + F или Cmd + F на Mac).
2. Вводите <script> для поиска скриптов и <style> для CSS-инструкций. Если найдены соответствующие теги, значит, в коде страницы есть встроенные скрипты или стили.

• Расширения для браузера. Некоторые расширения для Chrome и Firefox предоставляют инструменты для быстрой проверки содержимого страницы, включая наличие встроенных скриптов и стилей.
• Инструменты разработчика. Почти все современные браузеры имеют встроенные инструменты разработчика. Вы можете открыть их (обычно клавишей F12) и перейти к вкладке «Elements» или «Элементы». Здесь можно просмотреть структуру DOM и найти встроенные скрипты и стили.
• Автоматические инструменты анализа. Существуют сервисы, которые выявляют встроенные скрипты и стили, указывая на них как на не лучшие практики с точки зрения производительности и оптимизации.

Итог

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

Рекомендуем ознакомиться с небольшой лекцией, где рассматриваются наиболее частые ошибки в HTML коде:

Что входит в этап проверки HTML:

• Проверка сайта на ошибки кода.
• Проверка сайта на кроссбраузерность по матрице.
• Проверка наличия микроформатов.
• Анализ корректности работы микроформатов.
• Анализ совпадения содержимого микроформатов в индексе поисковых страниц.
• Анализ кода на наличие скриптов и CSS-инструкции внутри страницы.
• Анализ вёрстки HTML заголовков по матрице.
• Проверка валидации по матрице.

Теги публикации: css, HTML теги, seo, аудит, аудит сайта, валидация кода, идеальный аудит, кроссбраузерность, микроформаты, ошибки кодировки, продвижение сайта