7 критических ошибок в коде сайта: как найти за пять минут самостоятельно

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

Какие ошибки мы отнесем к критическим:

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

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

Как посмотреть код верстки страницы?

Что бы посмотреть код страницы откройте любой браузер (в данном случае Google Chrome) и нажмите на клавиатуре клавишу F12 или Ctrl+Shift+I.

Появится небольшой окно, в котором Вы можете увидеть HTML-код.

Просмотр кода страницы

Посмотрим, какие ошибки мы можем быстро найти на сайте самостоятельно.

1. Открыт ли сайт или страница для индексирования.

Сначала открываем файл ВашДомен/robots. txt и смотрим, не закрыта ли интересующая нас страница от индексирования. User-agent * указывает на робота, для которого действуют перечисленные в robots. txt правила. А вот директива Disallow запрещает индексирование разделов или отдельных страниц сайта. Допустим нас интересует страница ВашДомен/catalog/, если в файле robots. txt видим конструкцию типа Disallow: /catalog/, то ее необходимо удалить, что бы открыть доступ поисковым роботам для индексирования страницы. (так же возможен такой вид Disallow: /, такой код тоже следует удалять – он закрывает для поисковиков весь сайт).

Далее открываем код страницы (способом который описывался выше), нажимаем Ctrl+F, появится поле для поиска.

Поиск по коду

В него вставляем следующий код

и выполняем поиск, если ничего не найдено, то все нормально, если вы видите такую строку

ее необходимо удалить или заменить на

2. <!DOCTYPE>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа. <!DOCTYPE> описывает, какую версию HTML разметки вы используете в документе. Очень важно что бы <!DOCTYPE> был указан в коде, иначе Ваш код не будет считаться валидным. Также браузеры будут делать свои предположения относительно версии HTML-кода, и в итоге страница будет отображаться не так, как было Вами задумано.

Указание типа текущего документа

3. Адаптивность

Все меньше пользователей, которые не слышали про адаптивность и не знали бы про ее важность для сайта.

Чтобы проверить адаптивность сайта даже необязательно лезть в его код. Достаточно просто изменить размер окна браузера и наблюдать на поведением элементов на сайте.

Отображение страница при ширине окна 1024px.

Ширина окна 1024 px

Отображение страницы при ширине окна 768 px

Проверить, как ваш сайт отображается на мобильных устройствах, можно с помощью инструмента Google Mobile Friendly (Google Search Console).

Адрес инструмента — https://search. google. com/test/mobile-friendly

Просто вбиваем полный URL в строку и получаем результаты. Обычно проверка занимает меньше минуты.

4. Наличие viewport

Так же необходимо проверить поиском по коду наличие мета-тега

который отвечает за оптимизацию сайта для мобильных устройств.

Указание в коде тега для оптимизации под мобильные устройства

5. h1 на странице

h1 — тег заголовка. Его наличие и содержание критически важно для улучшения позиций сайта в поисковой выдачи. Заголовок h1 на странице:

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

Тег заголовка на странице

6. Подзаголовки страницы

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

Открываете код страницы, поиск по коду и вы туда вбиваете <h2 и видите, есть ли на странице заголовки h2 или нет. Если h2 нет, не страшно. Потому что мы знаем, что должно быть минимум одно упоминание в этом диапазоне. Если заголовков в диапазоне h2-h6 нет, это плохо. Но если хотя бы один раз есть упоминание ключевого слова, это уже хорошо.

Указание подзаголовков страниц в коде

7. Проверяйте валидность сверстанных страниц

Чтобы сэкономить время и найти больше ошибок используем автоматические сервисы и инструменты.

Всегда пользуйтесь онлайн HTML/CSS валидатором чтобы определить ошибки в вашей разметке. Вот ссылки на сервисы валидации:

Как обнаружить и устранить ошибки на сайте?

У каждого веб-мастера возникают вопросы при проведении внутренней оптимизации сайта, кстати, я уже писал об основных ошибках при проведение оптимизации. Они связаны в основном с комплексом проводимых работ, и их содержанием. Что в них входит, а что лучше не делать?

Как обнаружить и устранить ошибки на сайте?

Чтобы определить этапы проведения аудита сайта, необходимо помнить о его конечной цели – оптимизации ресурса. Какие ошибки и недоработки требуют больше внимания, а какие меньше?

Мы решили разобраться с этими и другими вопросами для составления комплексного подхода к внутренней оптимизации. Это позволит перераспределить силы на исправление ошибок по уровню приоритетности.

Как составить план проведения аудита?

Комплексное изучение ошибок на сайте включает следующие этапы:

После его проведения необходимо сгруппировать ошибки по уровню приоритетности решения. Это позволит при минимальных временных затратах провести ревизию самых серьезных ошибок.

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

Как проанализировать и оптимизировать дизайн?

Дизайн и посты – основная ценность, которую сайт представляет собой пользователю. Причем они эффективно работают только в тандеме, – невозможно сделать популярным сайт с красивым дизайном и отвратительными статьями.

Начнем с дизайна. С каждым годом новые веяния определяют визуальную составляющую миллионов ресурсов. В последнее время преобладает минималистический стиль. Он останется актуальным и в следующем 2017 году, претерпев при этом некоторые видоизменения:

Хаотичность при распределении элементов сетки на странице;

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

Включение динамических структур и композиций в формат страниц;

В следующем году на страницах ресурсов появится больше видео — и мини-презентаций.

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

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

Использование шрифтов в качестве основных графических элементов.

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

Далее необходимо определить, насколько сайт отвечает указанным тенденциям. Необходимо взять лист бумаги, и по 10-балльной шкале оценить соответствие сайта каждому из пунктов. Также полезен опрос среди пользователей ресурса по поводу дизайна.

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

Как проанализировать старые статьи и писать крутые новые?

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

Успешная публикация в наше время соответствует следующим требованиям:

Следуя этим рекомендациям, веб-мастер без проблем напишет интересную статью. Это повысит интерес пользователей к площадке, и увеличит объем привлекаемого трафика.

Как проверить наиболее проблемные части сайта?

Чтобы провести доскональный анализ, необходим мощный инструмент проверки. Мы решили воспользоваться Serpstat.

Как обнаружить и устранить ошибки на сайте?

Заходим на главную страницу, переходим в раздел “Список проектов”, кликаем по кнопке “Добавить проект”. Вводим адрес домена (в нашем примере это gold24.ru) и название проекта.

Кликаем по кнопке “Начать аудит сайта”. Выставляем количество одновременных потоков для краулинга – чем их больше, тем быстрее пройдет аудит. Вместе с тем, краулер может быть забанен при большом количестве потоков. Именно для этого включена возможность выбрать User-agent для аудита.

Аудит сайта

После проведения аудита, сервис перенаправляет нас на страницу раздела “Суммарный отчет”. Он позволяет оценить объем предстоящих работ в глобальном плане. В первую очередь, необходимо обратить внимание на ошибки с высоким уровнем приоритетности.

Далее постепенно решайте задачи среднего приоритета. В нашем примере на сайте практически нет серьезных ошибок, однако систематически допускаются недоработки среднего уровня по приоритетности решения.

По разделам наиболее проблемный – “Мета-теги”, “Индексация страниц” и “Скорость загрузки”.

serparser

В разделе “Мета-теги” найденные недоработки представлены более подробно. Если кликнуть по ее названию, и нажать кнопку “Подробнее”, обнаружим страницы с выявленной проблемой.

В нашем случае, к примеру, меньше всего оптимизированы длины title и description.

gold24

В разделе “Индексация страниц” сервис рекомендует проверить на правильность присвоение тега noindex 130 страницам. Если он установлен неправильно, страница не принесет пользы – ее не найдут пользователи через поисковую систему.

audit-gold24

Переходим в раздел “Скорость загрузки”. Здесь представлены недоработки, которые замедляют загрузку страниц мобильной и десктопной версии сайтов.

audit-gold24-2

Итак, чтобы зарегистрироваться в этом замечательном сервисе SerpStat пройдите по ссылке.

Итоги

Комплексный аудит сайта включает 3 основные направления исследования:

Дизайн и текст необходимо соотносить с современными тенденциями. Если шагать с ними в ногу, пользователи по достоинству оценят качество дизайна и полезность контента.

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

Техническая оптимизация проводится по следующим направлениям:

Все они в разной степени важны для удобства пользования ресурсом и оптимизации для поисковых систем.

Найденные ошибки и недоработки необходимо построить в порядке приоритетности, и начать их незамедлительно решать.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: