Как посмотреть http заголовки в google chrome

Обновлено: 03.07.2024

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

Клиент устанавливает TCP-соединение (или соответствующее соединение, если транспортный уровень не является TCP).
Клиент отправляет свой запрос и ждёт ответа.
Сервер обрабатывает запрос, отправляя ответ обратно, предоставляя код состояния и соответствующие данные.

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

X-Robots-Tag

Это аналог метатега robots в html. У данного элемента есть преимущества над meta name=“robots”. Например, если вы хотите запретить к индексации файлы PDF, метатег robots не поможет, так как он не работает с PDF-файлами. Вместо этого, вы можете использовать заголовок X-Robots-Tag.

К тому же у X-Robots-Tag есть ещё одно преимущество – его легко настраивать для целых каталогов и папок, что может ускорить работу.

Помимо «noindex» и «nofollow», вы можете прописать другие ответы X-Robots-Tag. Директивы из справки Google — ссылка:

Canonical

Hreflang

Cache-control

Cache-control может влиять на то, как браузер кэширует страницу и связанные с ней ресурсы. Например, вы можете предоставить ответ «max-age», который сообщает браузеру, что через некоторое время страница должна быть повторно запрошена с сервера. В противном случае кэш страницы действителен то время, которое указано в значении «max-age», тем самым ускоряя скорость загрузки страницы. Директивы из справки Google — ссылка:

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

При правильной настройке заголовка Vary поисковые боты будут сканировать сайт со всеми указанными типами User-agent и определять, какая версия кода будет ранжироваться для какого типа пользователей.

Last-Modified

If-Modified-Since

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

If-Unmodified-Since

Это условный запрос, который передаёт объект, только если он не был изменен после указанной даты.

Expires

Дата/время, после которого ответ веб-сервера считается устаревшим. Например, можно указывать текущую дату + 7/10/14 дней.

Accept-Encoding

Content-Encoding

Content-Length

Размер ресурса в десятичном числе байтов.

Content-Type

Указывает тип носителя ресурса.

Location

Указывает URL-адрес для перенаправления страницы. Он используется только тогда, когда для пользователя указывается перенаправление на другую страницу (3xx код) или при новом местоположении ресурса (201 код).

После чего выбрать вкладку «Network» и обновить страницу (F5).

Далее в графе «Name» необходимо выбрать тип файла, для которого вы хотите проверить заголовки, и справа во вкладке «Headers» будут указаны все заголовки текущего файла.

Аналогичным способом можно проверить заголовки и в Firefox: при помощи Ctrl+Shift+C либо в верхнем выпадающем меню выбрать «Веб-разработка»→«Инструменты разработчика». Далее выбрать вкладку «Сеть» и обновить страницу (F5). После чего выбрать тип документа для проверки и в правой части экрана выбрать вкладку «Заголовки». Перед вами появятся заголовки текущей страницы.

Примеры популярных расширений:

Также в сети есть большое количество онлайн-программ, при помощи которых вы можете проверить заголовки своего сайта:

В заключение

Заголовки — это метаинформация, которую мы обычно не видим.

В заголовках запроса могут быть такие данные как:

предпочитаемые языки
характеристика программы, которая делает запрос
содержимое кукиз
информация для сервера — для какого хоста предназначен запрос и прочее

В заголовках ответа могут быть такие данные как:

кодировка присланного текста
тип присланного контента (изображение, текст, архив и пр.)
данные о ПО веб-сервера
данные о кэшировании: ПО, используемое для кэширования, возраст присланных данных и прочее

Это самый простой способ, доступный в любой операционной системе.

Нажмите в веб-браузере F12 и откройте интересующую вас страницу. Перейдите на вкладку Network (сеть) и выберите интересующее вас подключение.

Вначале идут Заголовки ответа (Response Headers), а затем Заголовки запроса (Request Headers), хотя, конечно же, вначале отправляется запрос и его заголовки, а затем приходит ответ.

Опция -i также показывает только заголовки ответа, не показывает TLS рукопожатие, но зато показывает всё тело ответа.

Пример использования метода HEAD:

Пример вербального вывода:

Отправленные на веб сервер заголовки имеют в начале символ >, а полученные с веб-сервера строки начинаются на <.

Программа Burp Suite содержит прокси специально для просмотра заголовков. Более того, в программе имеются функции по модификации заголовков и другого содержимого на лету. Но Burp Suite это профессиональная программа, требующая изучения.

И ещё смотрите близкую по теме статью: Как отобразить данные POST с cURL.

До 9.x заголовки находились под ресурсами в Инструментах разработчика, но сейчас я нигде не могу их найти.

Я не уверен в вашей точной версии, но в Chrome есть вкладка «Сеть» с несколькими элементами, и когда я нажимаю на них, я вижу заголовки справа на вкладке.

Нажмите F12 на Windows или ⌥⌘I Mac, чтобы открыть инструменты разработчика Chrome.

Для меня, начиная с Google Chrome версии 46.0.2490.71 м, информационная область заголовков немного скрыта. Для доступа:

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

При открытии нажмите «Сеть»

Первоначально возможно, что данные страницы отсутствуют / обновлены. Обновите страницу при необходимости

Обратите внимание, что информация о странице появляется в листинге. (Также убедитесь, что рядом с флажком «Скрыть URL-адреса данных» выбрано «Все»)

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

Поместите этот код в панель разработчика.

Вы можете найти опцию заголовков на вкладке Сеть в консоли разработчика в Chrome:

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

Клиент устанавливает TCP-соединение (или соответствующее соединение, если транспортный уровень не является TCP).
Клиент отправляет свой запрос и ждёт ответа.
Сервер обрабатывает запрос, отправляя ответ обратно, предоставляя код состояния и соответствующие данные.

X-Robots-Tag

Помимо «noindex» и «nofollow», вы можете прописать другие ответы X-Robots-Tag. Директивы из справки Google — ссылка:

Canonical

Hreflang

Cache-control

Last-Modified

If-Modified-Since

If-Unmodified-Since

Это условный запрос, который передаёт объект, только если он не был изменен после указанной даты.

Expires

Accept-Encoding

Content-Encoding

Content-Length

Размер ресурса в десятичном числе байтов.

Content-Type

Указывает тип носителя ресурса.

Location

После чего выбрать вкладку «Network» и обновить страницу (F5).

В заключение

Как эффективно использовать Network в Chrome DevTools

Недавно я уже рассказывала о наборе инструментов DevTools, встроенных в Google Chrome. И о их полезных фишках, которые не на поверхности. Таких довольно много, поэтому продолжу. Расскажу об эффективном использовании вкладки Network в меню инструмента. Для SEO-специалистов и не только.

Как запустить Network в DevTools

Напомню, есть несколько способов открыть DevTools:

кликнуть правой кнопкой мыши на элемент на странице и выбрать «Просмотреть код»;
Command + Option + C или Command + Option + I для Mac OS;
Ctrl + Shift + C или Ctrl + Shift + I для Windows, Linux, Chrome OS;
F12 также для Windows.

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

При первом открытии она может оказаться пустой — тогда просто перезагрузите страницу.

Каждая строка в журнале Network — это ресурс. Все они перечислены в хронологическом порядке (по умолчанию). Верхний обычно является основным HTML-документом. Нижний — то, что было запрошено последним.

Каждый столбец — информация о ресурсе. Основные данные по умолчанию:

Status — код ответа;
Type — тип ресурса;
Initiator — что вызвало запрос ресурса. Щелкнув на ссылку в столбце Initiator, вы перейдете к исходному коду, вызвавшему запрос;
Size — размер ресурса;
Time — как долго длился запрос;
Waterfall — графическое представление различных этапов запроса.

Наведите курсор на диаграмму, чтобы увидеть этапы загрузки.

Функционал вкладки Network

Работать в Network удобно, если хорошо знать ее возможности.

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

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

2. Можете фильтровать данные в журнале с помощью панели инструментов Filter.

Допустим, нас интересует только информация по файлам с расширением .svg.

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

3. Кроме того, вы можете фильтровать данные по типу ресурса, используя на панели нужный функционал отбора.

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

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

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

7. Для сохранения данных в журнале необходимо включить Preserv log.

8. Если нажмете на шестеренку, в панели появятся дополнительные функции:

Group by frame — разбивает ресурсы на четкие группы в зависимости от домена или типа;
Capture screenshots — позволяет делать скриншоты страницы в ходе ее загрузки;
Use large request rows — добавляет дополнительную информацию о файлах в таблицу;
Show overview — позволяет скрывать и показывать графическую информацию о загрузке страницы.

Но чем эти опции полезны именно SEO-специалисту?

Проверка ответа сервера

Можно сделать проверку ответа сервера из панели Chrome DevTools:

Откройте целевую страницу.
Ctrl+Shift+C/Command+Option+C или F12.
Вкладка Network.

Обновите страницу (Ctrl+F5/Command+R).
Найдите основной URL (адрес страницы, которую мы изучаем). В колонке Status можно увидеть ответ сервера для данной страницы.

Например, нам нужно узнать ответ сервера для страницы:

Таким образом можно быстро проанализировать ответ сервера страницы и ее отдельных элементов. Увидеть, например, «битые» картинки.

Изначально ход проверки такой же, как и в случае с ответом сервера.

Но после пятого пункта появится шестой:

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

Смена User-Agent

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

Заходите в дополнительные настройки DevTools.
Выбираете Network Conditions.

Внизу панели появится рабочее пространство с нужным функционалом.

Снимаете флажок Select automatically и выбираете, например, Googlebot Smartphone.

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

Определение ресурсов, блокирующих рендеринг

Используйте данные о времени загрузки ресурсов на панели Network, чтобы определить, какие ресурсы JS и CSS загружаются до DOM и потенциально блокируют его. Фильтруя данные по CSS и JS, можно вычислить проблемные ресурсы.

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

Проверка времени загрузки страницы и ее отдельных элементов

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

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

Выводы

Таким образом, при эффективном использовании панель Network дает немало возможностей для SEO-оптимизации сайта.