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

HTTP-заголовки, которые влияют на SEO

108

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

Схема работы веб-сервера и понятие HTTP-заголовки

Итак, в клиент-серверных протоколах, таких как HTTP, сеансы состоят из трёх фаз:

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

Код состояния (200OK, 301, 429, 500 и другие) является лишь частью полного HTTP-ответа, который сервер отправляет клиенту. Полный ответ кода состояния плюс дополнительная информация называется заголовком HTTP.

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

Важные HTTP-заголовки для SEO

Далее рассмотрим ряд важных элементов заголовка HTTP для SEO.

X-Robots-Tag

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

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

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

Canonical

Обычно теги canonical расположены в исходном HTML-коде веб-страницы. Однако вы также можете указать канонический URL как часть HTTP-заголовка URL.

Поскольку реализовать тег rel= “canonical” в HTML довольно просто, редко можно найти канонические ссылки, отправленные как часть HTTP-ответа страницы. Однако всегда стоит перепроверить HTTP Headers страницы на наличие канонических ссылок, особенно если вы видите на сайте необычные проблемы с индексацией и ранжированием. Как именно проверить заголовки сайта, мы расскажем чуть ниже.

Hreflang

Так же, как канонические ссылки, вы можете включить ссылки hreflang в ответ HTTP-заголовка страницы, чтобы сообщить поисковым системам об альтернативных версиях страницы на разных языках и/или для разных стран.

Cache-control

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

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

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

Last-Modified

В значении Last-Modified необходимо указывать дату последнего изменения ресурса. HTTP Header используется для сравнения нескольких версий одного и того же ресурса. Он тесно связан с заголовками If-Modified-Since и If-Unmodified-Since.

If-Modified-Since

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

If-Unmodified-Since

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

Expires

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

Accept-Encoding

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

Content-Encoding

Используется для указания алгоритма сжатия. Это заголовок ответа, в котором HTTP-сервер использует этот заголовок, чтобы сообщить клиенту, в какую именно кодировку фактически был закодирован контент.

Content-Length

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

Content-Type

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

Location

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

Проверка HTTP Headers

Далее рассмотрим некоторые способы, как посмотреть HTTP-заголовки страницы или отдельного файла.

Просмотр HTTP-заголовков в браузере Google Chrome

HTTP Headers в Chrome можно найти в инструментах разработчика. Для этого необходимо нажать либо Ctrl+Shift+I (многие используют просто F12), либо правой кнопкой мыши и выбрать пункт «Посмотреть код», либо в верхнем выпадающем меню браузера выбрать «Дополнительные инструменты» → «Инструменты разработчика».

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

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

Просмотр HTTP-заголовков в браузере Firefox

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

Другие способы проверки HTTP-заголовков

Для того чтобы посмотреть HTTP-заголовки в два счёта, есть множество расширений для любого браузера, будь то Google Chrome, Mozilla Firefox или Internet Explorer.

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

• Live HTTP Headers для Mozilla Firefox.
• HTTP Header Spy для Google Chrome и Mozilla Firefox.
• Microsoft Fiddler для Internet Explorer.
• Web Developer для Chrome, Mozilla Firefox и Opera.

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

Вдобавок в Яндекс.Вебмастере и Google Search Console также есть инструменты проверки HTTP Headers.

В заключение

Внедрение HTTP-заголовков особенно актуально для средних и крупных сайтов для ускорения работы веб-сервера, а также уменьшения расхода краулингового бюджета на ресурсы, которые нет необходимости повторно скачивать. Подробнее о том, какими ещё способами можно увеличить краулинговый бюджет сайта, читайте в статье: https://siteclinic.ru/blog/technical-aspects/kak-uvelichit-kraulingovyj-byudzhet/.

Если Вы хотите исправить все ошибки оптимизации на сайте, обращайтесь к нам!

Просмотреть заголовки HTTP в Google Chrome?

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

8 ответы

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

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

Понял, спасибо! Чтобы просмотреть элементы, страницу пришлось перезагрузить. — user267817

Это очень мило! Я использовал хак chrome: // view-http-cache / [url], но ваше решение намного лучше! — окончательно

Также попробуйте chrome://net-internals/ . — XP1

Просто чтобы немного прояснить ответ выше — когда вы нажимаете на вкладку сети, вы сначала видите обзор с правой стороны в формате таблицы с графиком временной шкалы. Если вы щелкните отдельный файл из списка слева, вы увидите вкладки, показанные на рисунке выше (включая вкладку «Заголовки»). Это то, что @Tower имел в виду под «щелчком по ним» — SnapShot

Еще на заметку: если вы не видите никаких ресурсов — посмотрите на область вкладок ( All | XHR JS и т. д.) и выберите All — Заншин13

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

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

В открывшемся окне нажмите кнопку «Сеть».

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

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

Мне настолько понравилось расширение FireFox Header Spy, что я создал расширение HTTP Spy для Chrome. Раньше я тоже использовал инструменты разработчика для отладки заголовков, но теперь моя жизнь намного лучше.

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

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

Мой любимый способ в Chrome — это нажать на букмарклет:

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

ответ дан 01 авг.

Это не дает текущий заголовки, а вместо заголовков для второго запроса. — Ник

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

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

Также в моей версии Chrome (50.0.2661.102), он дает расширение с именем Заголовки LIVE HTTP который дает информацию о заголовках запросов для всех HTTP-запросов.

Обновление: добавленное изображение

на всякий случай, если кому-то это понадобится: если установлен флажок «Показать обзор», он будет указан под обзором и может быть не виден (случилось со мной). Вы можете щелкнуть значок «скрыть обзор» или расширить панель инструментов разработчика — Ангел М.

@ Chris22, пожалуйста, взгляните на изображение в посте — Ангел М.

@AngelM. спасибо, хорошо, так что, согласно изображению, «показать обзор» — это не флажок, это значок. — Chris22

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

Простое клиентское расширение REST для Chrome.

Создан 31 июля ’14, 18:07

Для версии 78.0.3904.87, ОС = Windows 7, 64-разрядный ПК

Шаги:

1. Нажмите F12
2. Выберите вкладку «Сеть»
3. Выберите XHR
4. В разделе Имя -> вы можете увидеть все сделанные запросы XHR.
5. Чтобы просмотреть заголовки конкретного запроса XHR, щелкните этот запрос. Все подробности об этом запросе XHR появятся справа.

Чтобы просмотреть HTTP-заголовки запроса или ответа в Google Chrome, выполните следующие действия:

1. В Chrome перейдите по URL-адресу (например, https://www.google.com ), щелкните правой кнопкой мыши, выберите «Проверить», чтобы открыть инструменты разработчика.
   
2. Выберите вкладку «Сеть».
3. Перезагрузите страницу, выберите любой HTTP-запрос на левой панели, и заголовки HTTP будут отображаться на правой панели.

ответ дан 17 апр.

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками http-headers google-chrome-devtools or задайте свой вопрос.

How can I view HTTP headers in Google Chrome?

Till 9.x, the headers were under the resources in the Developer Tools, but now I can’t find it anywhere.

9 Answers 9

I’m not sure about your exact version, but Chrome has a tab «Network» with several items and when I click on them I can see the headers on the right in a tab.

Press F12 on windows or ⌥⌘I on a mac to bring up the Chrome developer tools.

For me, as of Google Chrome Version 46.0.2490.71 m, the Headers info area is a little hidden. To access:

While the browser is open, press F12 to access Web Developer tools

When opened, click the «Network» option

Initially, it is possible the page data is not present/up to date. Refresh the page if necessary

Observe the page information appears in the listing. (Also, make sure «All» is selected next to the «Hide data URLs» checkbox)

My favorite way in Chrome is clicking on a bookmarklet:

Put this code in your developer console pad.

I loved the FireFox Header Spy extension so much that i built a HTTP Spy extension for Chrome. I used to use the developer tools too for debugging headers, but now my life is so much better.

Here is a Chrome extension that allows you to view request-, response headers and cookies without any extra clicks right after the page is loaded.

It also handles redirects. It comes with an unobtrusive micro-mode that only shows a hand picked selection of response headers and a normal mode that shows all the information.

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

Inspect network activity

Published on Friday, February 8, 2019

Technically, I’m a writer

This is a hands-on tutorial of some of the most commonly-used DevTools features related to inspecting a page’s network activity.

See Network Reference if you’d like to browse features instead.

Read on, or watch the video version of this tutorial:

# When to use the Network panel

In general, use the Network panel when you need to make sure that resources are being downloaded or uploaded as expected. The most common use cases for the Network panel are:

• Making sure that resources are actually being uploaded or downloaded at all.
• Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on.

If you’re looking for ways to improve page load performance, don’t start with the Network panel. There are many types of load performance issues that aren’t related to network activity. Start with the Audits panel because it gives you targeted suggestions on how to improve your page. See Optimize Website Speed.

# Open the Network panel

To get the most out of this tutorial, open up the demo and try out the features on the demo page.

Figure 1. The demo

You might prefer to move the demo to a separate window.

Figure 2. The demo in one window and this tutorial in a different window

Open DevTools by pressing Control+Shift+J or Command+Option+J (Mac). The Console panel opens.

Figure 3. The Console

Figure 4. DevTools docked to the bottom of the window

Click the Network tab. The Network panel opens.

Figure 5. DevTools docked to the bottom of the window

Right now the Network panel is empty. That’s because DevTools only logs network activity while it’s open and no network activity has occurred since you opened DevTools.

# Log network activity

To view the network activity that a page causes:

Reload the page. The Network panel logs all network activity in the Network Log.

Figure 6. The Network Log

Each row of the Network Log represents a resource. By default the resources are listed chronologically. The top resource is usually the main HTML document. The bottom resource is whatever was requested last.

Each column represents information about a resource. Figure 6 shows the default columns:

Status. The HTTP response code.

Type. The resource type.

Initiator. What caused a resource to be requested. Clicking a link in the Initiator column takes you to the source code that caused the request.

Time. How long the request took.

Waterfall. A graphical representation of the different stages of the request. Hover over a Waterfall to see a breakdown.

Note The graph above the Network Log is called the Overview. You won’t be using it in this tutorial, so you can hide it if you prefer. See Hide the Overview pane.

So long as you’ve got DevTools open, it will record network activity in the Network Log. To demonstrate this, first look at the bottom of the Network Log and make a mental note of the last activity.

Now, click the Get Data button in the demo.

Look at the bottom of the Network Log again. There’s a new resource called getstarted.json . Clicking the Get Data button caused the page to request this file.

Figure 7. A new resource in the Network Log

# Show more information

The columns of the Network Log are configurable. You can hide columns that you’re not using. There are also many columns that are hidden by default which you may find useful.

Right-click the header of the Network Log table and select Domain. The domain of each resource is now shown.

Figure 8. Enabling the Domain column

Tip You can see the full URL of a resource by hovering over its cell in the Name column.

# Simulate a slower network connection

The network connection of the computer that you use to build sites is probably faster than the network connections of the mobile devices of your users. By throttling the page you can get a better idea of how long a page takes to load on a mobile device.

Click the Throttling dropdown, which is set to Online by default.

Figure 9. Enabling throttling

Select Slow 3G.

Figure 10. Selecting Slow 3G

Long-press Reload and then select Empty Cache And Hard Reload.

Figure 11. Empty Cache And Hard Reload

On repeat visits, the browser usually serves some files from its cache, which speeds up the page load. Empty Cache And Hard Reload forces the browser to go the network for all resources. This is helpful when you want to see how a first-time visitor experiences a page load.

Note The Empty Cache And Hard Reload workflow is only available when DevTools is open.

# Capture screenshots

Screenshots let you see how a page looked over time while it was loading.

Click Capture Screenshots .

Reload the page again via the Empty Cache And Hard Reload workflow. See Simulate a slower connection if you need a reminder on how to do this. The Screenshots pane provides thumbnails of how the page looked at various points during the loading process.

Figure 12. Screenshots of the page load

Click the first thumbnail. DevTools shows you what network activity was occurring at that moment in time.

Figure 13. The network activity that was happening during the first screenshot

Click Capture Screenshots again to close the Screenshots pane.

Reload the page again.

# Inspect a resource’s details

Click a resource to learn more information about it. Try it now:

Click getstarted.html . The Headers tab is shown. Use this tab to inspect HTTP headers.

Figure 14. The Headers tab

Click the Preview tab. A basic rendering of the HTML is shown.

Figure 15. The Preview tab

This tab is helpful when an API returns an error code in HTML and it’s easier to read the rendered HTML than the HTML source code, or when inspecting images.

Click the Response tab. The HTML source code is shown.

Figure 16. The Response tab

Tip When a file is minified, clicking the Format button at the bottom of the Response tab re-formats the file’s contents for readability.

Click the Timing tab. A breakdown of the network activity for this resource is shown.

Figure 17. The Timing tab

Click Close to view the Network Log again.

Figure 18. The Close button

# Search network headers and responses

Use the Search pane when you need to search the HTTP headers and responses of all resources for a certain string or regular expression.

For example, suppose you want to check if your resources are using reasonable cache policies.

Click Search . The Search pane opens to the left of the Network log.

Figure 19. The Search pane

Type Cache-Control and press Enter. The Search pane lists all instances of Cache-Control that it finds in resource headers or content.

Figure 20. Search results for Cache-Control

Click a result to view it. If the query was found in a header, the Headers tab opens. If the query was found in content, the Response tab opens.

Figure 21. A search result highlighted in the Headers tab

Close the Search pane and the Timing tab.

Figure 22. The Close buttons

# Filter resources

DevTools provides numerous workflows for filtering out resources that aren’t relevant to the task at hand.

Figure 23. The Filters toolbar

The Filters toolbar should be enabled by default. If not:

1. Click Filterto show it.

# Filter by string, regular expression, or property

The Filter text box supports many different types of filtering.

Type png into the Filter text box. Only the files that contain the text png are shown. In this case the only files that match the filter are the PNG images.

Figure 24. A string filter

Type /.*\.[cj]s+$/ . DevTools filters out any resource with a filename that doesn’t end with a j or a c followed by 1 or more s characters.

Figure 25. A regular expression filter

Type -main.css . DevTools filters out main.css . If any other file matched the pattern they would also be filtered out.

Figure 26. A negative filter

Type domain:raw.githubusercontent.com into the Filter text box. DevTools filters out any resource with a URL that does not match this domain.

Figure 27. A property filter

See Filter requests by properties for the full list of filterable properties.

Clear the Filter text box of any text.

# Filter by resource type

To focus in on a certain type of file, such as stylesheets:

Click CSS. All other file types are filtered out.

Figure 28. Showing CSS files only

To also see scripts, hold Control or Command (Mac) and then click JS.

Figure 29. Showing CSS and JS files only

Click All to remove the filters and see all resources again.

See Filter requests for other filtering workflows.

# Block requests

How does a page look and behave when some of its resources aren’t available? Does it fail completely, or is it still somewhat functional? Block requests to find out:

Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

Figure 30. The Command Menu

Type block , select Show Request Blocking, and press Enter.

Figure 31. Show Request Blocking

Click Add Pattern .

Figure 32. Blocking main.css

Click Add.

Reload the page. As expected, the page’s styling is slightly messed up because its main stylesheet has been blocked. Note the main.css row in the Network Log. The red text means that the resource was blocked.

Figure 33. main.css has been blocked

Uncheck the Enable request blocking checkbox.

# Next steps

Congratulations, you have completed the tutorial. Click Dispense Award to receive your award.

Check out the Network Reference to discover more DevTools features related to inspecting network activity.