Предлагаем рассмотреть критические ошибки в коде страницы сайта, которые оказывают влияние на корректность отображения страницы в браузере и степень ее оптимизации.
Какие ошибки мы отнесем к критическим:
- Открыт ли сайт или страница для индексирования
- <!DOCTYPE>
- Адаптивность
- Наличие viewport
- h1 на странице
- Подзаголовки страницы
- Проверяйте валидность сверстанных страниц
Такие ошибки делают невозможным индексирование страницы поисковыми системами или сильно усложняют его. Также эти ошибки могут повлиять на отображение вашего сайта в различных браузерах.
Для начала мы разберем, как проверить наличие таких ошибок самостоятельно, а в конце я дам несколько рекомендаций какими инструментами воспользоваться для полного анализа сайта и нахождения всех ошибок.
Как посмотреть код верстки страницы?
Что бы посмотреть код страницы откройте любой браузер (в данном случае Google Chrome) и нажмите на клавиатуре клавишу F12 или Ctrl+Shift+I.
Появится небольшой окно, в котором Вы можете увидеть HTML-код.
Посмотрим, какие ошибки мы можем быстро найти на сайте самостоятельно.
1. Открыт ли сайт или страница для индексирования.
Сначала открываем файл ВашДомен/robots.txt и смотрим, не закрыта ли интересующая нас страница от индексирования. User-agent * указывает на робота, для которого действуют перечисленные в robots.txt правила. А вот директива Disallow запрещает индексирование разделов или отдельных страниц сайта. Допустим нас интересует страница ВашДомен/catalog/, если в файле robots.txt видим конструкцию типа Disallow: /catalog/, то ее необходимо удалить, что бы открыть доступ поисковым роботам для индексирования страницы. (так же возможен такой вид Disallow: /, такой код тоже следует удалять –он закрывает для поисковиков весь сайт).
Далее открываем код страницы (способом который описывался выше), нажимаем Ctrl+F, появится поле для поиска.
В него вставляем следующий код
<meta name=“robots”
и выполняем поиск, если ничего не найдено, то все нормально, если вы видите такую строку
<meta name=“robots” content=“noindex,nofollow”> или <meta name=“robots” content=“noindex”>,
ее необходимо удалить или заменить на
<meta name=“robots” content=“index,follow”>
2. <!DOCTYPE>
Элемент <!DOCTYPE> предназначен для указания типа текущего документа. <!DOCTYPE> описывает, какую версию HTML разметки вы используете в документе. Очень важно что бы <!DOCTYPE> был указан в коде, иначе Ваш код не будет считаться валидным. Также браузеры будут делать свои предположения относительно версии HTML-кода, и в итоге страница будет отображаться не так, как было Вами задумано.
3. Адаптивность
Все меньше пользователей, которые не слышали про адаптивность и не знали бы про ее важность для сайта.
Адаптивный сайт— это стандарт веб-разработки, один из показателей качества интернет-ресурса и внимательного отношения к потребностям пользователей.
Адаптивность сайта - это его обеспечивать правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраиваться под заданные размеры окна браузера. Адаптивность при верстке реализуется на практике разными способами. Это:
- Применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
- Работа с медиа-запросами (англ. media queries);
- Bootstrap (front-end framework).
Чтобы проверить адаптивность сайта даже необязательно лезть в его код. Достаточно просто изменить размер окна браузера и наблюдать на поведением элементов на сайте.
Проверить, как ваш сайт отображается на мобильных устройствах, можно с помощью инструмента Google Mobile Friendly (Google Search Console).
Адрес инструмента — https://search.google.com/test/mobile-friendly
Просто вбиваем полный URL в строку и получаем результаты. Обычно проверка занимает меньше минуты.
4. Наличие viewport
Так же необходимо проверить поиском по коду наличие мета-тега
<meta name="viewport" content="width=device-width, initial-scale=1">,
который отвечает за оптимизацию сайта для мобильных устройств.
5. h1 на странице
h1 — тег заголовка. Его наличие и содержание критически важно для улучшения позиций сайта в поисковой выдачи. Заголовок h1 на странице:
- Должен быть один на страницу;
- Содержать ключевые слова.
Пренебрежительное отношение к важности и уникальности заголовков может вызвать проблемы в индексации, даже вплоть до попадания сайта под фильтры поисковых систем. Тег h1 является одной из главных составляющих SEO, так как предоставляет пользователю информацию о том, про что будет страница, на которую он попал с поиска. Поэтому очень важно добавить основной фокус ключ в заголовок h1, чтобы поисковик и пользователь понимали о чем данная страница.
6. Подзаголовки страницы
Подзаголовки размечаются специальными тегами в коде h2...h6. Цифра соответствует важности заголовка. Зачем это необходимо? Поисковые системы не видят как люди глазами, для них дополнительные заголовки показывают, что это та самая страница и её тоже можно показывать по этому ключевому слову. Заголовки h2-h6 помогают положительно усилить внимание поисковиков к этой странице по этим запросам.
Как проверить?
Открываете код страницы, поиск по коду и вы туда вбиваете <h2 и видите, есть ли на странице заголовки h2 или нет. Если h2 нет, не страшно. Потому что мы знаем, что должно быть минимум одно упоминание в этом диапазоне. Если заголовков в диапазоне h2-h6 нет, это плохо. Но если хотя бы один раз есть упоминание ключевого слова, это уже хорошо.
Частые ошибки:
- В тег заголовка заключен логотип страницы. Особенно часто встречается в ряде шаблонов, в том числе и от самых популярных сервисов шаблонов;
- Подзаголовками сверстаны служебные элементы страницы («Корзина», «Авторизация», «Форма обратной связи» и т.д.);
- Подзаголовки не используют ключевые слова;
- Подзаголовки содержат в оформлении стили, которые должны быть вынесены в файлы .css.;
- Пример кода со стилями:<h2 class="section-header" style="margin: 2rem 0 10rem; text-align: center;">Преимущества работы с нами</h2>
- Пример чистого кода:<h2 class="section-header">Преимущества работы с нами</h2>
А еще лучше:<h2>Преимущества работы с нами</h2> - Указанные ошибки относятся и к тегу заголовка h1.
7. Проверяйте валидность сверстанных страниц
Чтобы сэкономить время и найти больше ошибок используем автоматические сервисы и инструменты.
Всегда пользуйтесь онлайн HTML/CSS валидатором чтобы определить ошибки в вашей разметке. Вот ссылки на сервисы валидации:
- HTML Validator: https://validator.w3.org/
- CSS Validator: https://jigsaw.w3.org/css-validator/ (на практике используется редко, проверять и исправлять обычно стоит, когда другие важные задачи по seo и улучшению сайта сделаны)
- Анализ сайта SiteDozor: https://sitedozor.ru
SiteDozor - система анализа сайтов, а также продвижения и контроля сайтов. Определить ошибки помогут несколько видов аудитов в системе Sitedozor - как сайта в целом так и отдельных страниц. На выходе Вы получите многостраничный отчет с ошибками и рекомендациями по их исправлению. Плюс великолепный набор инструментов для быстрого решения отдельных вопросов: посмотреть на сайт глазами поисковиков, узнать что «тормозит» страницу, замерить скорость страницы и так далее — более 50 инструментов.
