Использование Chrome DevTools для устранения неполадок - подсказки Semalt



Chrome DevTools - не то, что чуждо большинству профессионалов SEO. С другой стороны, для клиентов это может быть одна из тех вещей, которые вам еще предстоит изучить. Что ж, в Semalt часть нашего процесса обслуживания потребностей наших клиентов в SEO зависит от нашего способа обучения вас необходимым аспектам того, что нужно вашему сайту.

Инструменты разработчика Chrome для SEO важны, поскольку мы используем их при устранении неполадок. Чтобы облегчить общение между Semalt и нашими клиентами, мы хотели бы показать вам, как мы используем этот инструмент для устранения проблем с SEO на вашем веб-сайте.

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

Что такое Chrome DevTools?

DevTools или Chrome DevTools в полном объеме - это набор вспомогательных инструментов для веб-разработчиков, которые встроены непосредственно в браузер Chrome. Мы используем эти инструменты для редактирования страниц на лету и оперативно диагностируем проблемы. Это помогает нам создавать лучшие веб-сайты для наших клиентов, но мы можем делать это быстрее и обеспечивать их идеальное качество.

Мы все можем в значительной степени согласиться с тем, что Google Chrome - один из важнейших инструментов в арсенале любого SEO-специалиста. Независимо от того, какое программное обеспечение SEO вы используете для автоматизации аудита или диагностики проблем SEO в масштабе, Chrome DevTools остается незаменимым помощником. Благодаря его способности предоставлять важные способы проверки проблем с SEO на лету, многие специалисты по SEO, включая Semalt, использовали его снова и снова.

Мы могли бы потратить больше времени на обсуждение различных способов, которыми Chrome DevTools может помочь профессионалам и веб-разработчикам, но наше внимание сосредоточено на чем-то более конкретном. Здесь мы хотим поделиться с вами парой разных случаев, когда мы использовали Chrome DevTools для выявления и устранения проблемы.

Вот три ситуации, в которых наличие Chrome DevTools было бы неплохим решением:

Настройка Chrome DevTools для устранения неполадок

Скорее всего, вы никогда не пробовали использовать Chrome DevTools. Что ж, получить к нему доступ так же просто, как щелкнуть веб-сайт в поисковой выдаче и нажать кнопку проверки. Как специалисты по SEO, мы должны быть более осторожными, но вы знаете, как это используется. В Semalt мы используем как плоскость элементов, которая позволяет нам наблюдать за DOM, так и CSS, который позволяет использовать несколько других различных инструментов в ящике консоли.

Мы шаг за шагом покажем вам, как этот инструмент используется для устранения неполадок SEO.

Для начала щелкните правой кнопкой мыши и выберите «Проверить». По умолчанию вы увидите панель элементов, которая дает вам представление о DOM и природе таблицы стилей, используемой при построении страницы.

Такой взгляд предлагает нам множество вещей, в которые можно погрузиться; тем не менее, мы позволяем выдвижному ящику консоли использовать весь набор инструментов.

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

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

Для новичков в ящике консоли может не отображаться сама консоль, но после того, как вы некоторое время использовали Chrome DevTools, в ящике консоли начинает отображаться сама консоль. Панель консоли позволяет вам просматривать зарегистрированные сообщения, а также запускать javascript. Мы бы не стали углубляться в это сегодня.

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

Переключение пользовательского агента в DevTools

Смена User-Agent - один из самых недооцененных способов использования DevTools. Это простой тест, который помог нам выявить несколько различных проблем, поскольку он дает представление о том, как робот Googlebot видит и обрабатывает информационные функции на сайте.

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

Как вы можете переключить свой пользовательский агент на Chrome DevTools?

При переключении пользовательского агента в Chrome вам нужно будет использовать вкладку сетевых условий в панели инструментов консоли. Для этого вы снимаете флажок «Выбирать автоматически», что позволяет просматривать контент с помощью смартфона Googlebot, Bingbot или ряда других пользовательских агентов, чтобы увидеть, как ваш контент доставляется.

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

Использование Chrom DevTool в случае мобильного альтернативного сайта

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

Вы можете предположить, что мобильные сайты - это реликвия, но они действительно существуют.

Использование Chrome DevTools для выявления чрезмерной защиты сервера

В сети много людей со злонамеренными намерениями. Многие хакеры и злоумышленники пытаются использовать Google против сайтов в Интернете. По этой причине некоторые серверные стеки CDN и другие хостинг-провайдеры могут предлагать определенные встроенные функции, которые останавливают спуфинг роботов Google, когда их фактическое намерение состоит в том, чтобы помешать поисковым роботам спама получить доступ к сайту. При чрезмерных усилиях эти сайты могут заблокировать доступ робота Googlebot к сайту. Иногда пользователи видят сообщения «Неавторизованный запрос заблокирован».

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

Используя функцию переключения User-Agent, мы можем увидеть, что сайт обслуживает это сообщение, как только мы установим User-Agent на Googlebot Smartphone.

Диагностика основных веб-показателей с помощью DevTools

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

Показатели, которые формируют Core Web Vitals от Google, какое-то время были частью отчетов о скорости и производительности страниц. Очень важно, чтобы специалисты по SEO знали, как анализировать эти проблемы. Как веб-мастера, мы стали более отчетливо осознавать важность основных показателей сети для эффективности поиска.

Используя вкладку производительности в DevTools, мы делаем шаг ближе к тому, чтобы лучше понимать важные веб-метрики.

Дважды проверьте заголовки HTTP и просмотрите неиспользуемый код

Вы когда-нибудь слышали о программных ошибках 404 в ходе SEO-аудита? Ну, мягкие 404 - это когда браузер может отображать страницу 404, но они возвращают код ответа 200 OK.
В некоторых случаях контент может загружаться в браузере точно так, как ожидалось; однако код ответа HTTP может отображать ошибку 404 или 302. Это также может быть в целом неверным или не таким, как вы ожидали. В любом случае полезно видеть код ответа HTTP для каждой страницы и ресурса.

Хотя существует множество замечательных расширений Chrome, которые предоставляют вам ценную информацию о кодах ответа, DevTools может позволить вам проверить эту информацию напрямую.

На этом этапе DevTools показывает все отдельные ресурсы, вызываемые для компиляции страницы. Это включает в себя соответствующие коды состояния и визуализацию водопада.

Заключение

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

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


mass gmail