Alejandro Rioja.
Scripts

Краткое руководство по просмотру исходного кода сайта

Alejandro Rioja
Alejandro Rioja
8 мин чтения
TL;DR

Откройте необработанный HTML любой страницы с помощью Ctrl/Cmd+U или префикса view-source: в адресной строке. Используйте DevTools (F12) для живой проверки отрендеренного DOM, CSS и сетевых запросов. Пять вещей, которые стоит проверить для SEO: теги title, мета-описания, заголовки H1, атрибуты alt изображений и сниппеты отслеживания аналитики.

Бесплатная рассылка

Каждую среду. 28 400+ читателей. Никакой воды.

Содержание

Обновлено май 2026 года.

TL;DR: Откройте необработанный HTML любой страницы с помощью Ctrl/Cmd+U или префикса view-source: в адресной строке. Используйте DevTools (F12) для живой проверки отрендеренного DOM, CSS и сетевых запросов. Пять вещей, которые стоит проверить для SEO: теги title, мета-описания, заголовки H1, атрибуты alt изображений и сниппеты отслеживания аналитики.

Вывод

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

В этом руководстве показано, как просматривать исходный код во всех основных браузерах и операционных системах в 2026 году, для чего подходят два основных метода (просмотр источника и DevTools), и пять SEO-элементов, которые стоит проверить, когда вы внутри.

Как просмотреть исходный код

Здесь есть два разных инструмента. Знайте, какой из них использовать:

Большинство современных сайтов частично или полностью рендерятся с помощью JavaScript, поэтому DevTools — это то место, где я провожу большую часть своего времени.

Ярлык view-source: (все браузеры)

Введите view-source: непосредственно перед любым URL в адресной строке — например, view-source:https://example.com — и нажмите Enter. Это работает в Chrome, Firefox, Edge и Opera. В Safari сначала нужно включить меню «Разработка» (см. ниже).

Горячие клавиши для ПК

Chrome (Windows / Linux)

Firefox (Windows / Linux)

Microsoft Edge (Windows)

Opera (Windows / Linux)

Горячие клавиши для Mac

Chrome (macOS)

Firefox (macOS)

Safari (macOS)

Safari по умолчанию скрывает инструменты разработчика. Включите их один раз:

  1. Откройте Safari → Настройки (или Параметры на старых macOS) → вкладка Дополнения.
  2. Установите флажок «Показывать функции для веб-разработчиков» (заменяет старый флажок «Показывать меню „Разработка”» начиная с Safari 17).
  3. Теперь доступны Разработка → Показать источник страницы (Cmd+Option+U) и Разработка → Показать Web Inspector (Cmd+Option+I). Также работает правая кнопка мыши → Просмотреть элемент.

Microsoft Edge (macOS)

Мобильные устройства

Важные SEO-элементы для проверки

Когда вы можете просматривать источник, используйте Ctrl+F / Cmd+F для поиска в необработанном HTML фрагментов, приведённых ниже.

1. Теги title

Найдите <title. На каждой странице должен быть ровно один такой тег, а текст внутри него должен быть уникальным для всего сайта. Теги title — это самый важный сигнал на странице, который говорит как пользователям, так и поисковым системам, о чём страница. Дублирующиеся или отсутствующие теги title — одна из наиболее распространённых SEO-ошибок, которую я нахожу во время аудитов.

2. Мета-описания

Найдите <meta name="description". Атрибут content — это фрагмент, который Google часто показывает в результатах поиска — держите его до примерно 160 символов. Это не прямой фактор ранжирования, но он влияет на кликабельность, а это важно. Убедитесь, что ни две страницы не имеют одинакового описания.

3. Заголовки H1

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

4. Alt-теги изображений

Найдите <img. Каждое изображение должно иметь атрибут alt, описывающий его содержимое. Текст alt — это то, что программы чтения с экрана озвучивают слабовидящим пользователям, и это единственный сигнал, который поисковые системы имеют для понимания содержимого изображений. Отсутствующие alt-теги — лёгкая победа: отметьте их и заполните.

5. Код отслеживания аналитики

Найдите ваш идентификатор измерений GA4 (формат: G-XXXXXXXXXX) или идентификатор контейнера Google Tag Manager (GTM-XXXXXXX). Если вы используете старый формат Universal Analytics UA-, обратите внимание, что Google закрыл стандартные свойства UA в июле 2023 года — эти идентификаторы больше не собирают данные. Убедитесь, что вы перешли на GA4 или альтернативу (Plausible, Fathom, PostHog и т. д.).

Причины читать исходный код сайта

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

1. Проверьте мета-теги robots

Один неправильно размещённый <meta name="robots" content="noindex"> молча исключит страницу из индекса. Найдите в источнике robots, чтобы убедиться, что вы случайно не блокируете страницы от сканирования.

2. Проверьте структуру заголовков

Хорошая иерархия заголовков (H1 → H2 → H3) помогает как доступности, так и SEO. Быстрое сканирование с помощью view-source покажет, правильно ли вложены заголовки или кто-то использовал теги H исключительно для стилизации.

3. Проверьте оптимизацию изображений

Помимо alt-тегов, посмотрите на атрибут src. Изображения подаются с CDN? Они в современных форматах (WebP, AVIF)? Установлены ли атрибуты width и height (предотвращает сдвиг макета)? Эти детали чётко видны в источнике.

4. Обнаружьте скрытый или внедрённый контент

Иногда плагин, сторонний скрипт или злоумышленник внедряют контент на страницу, который невидим в отрендеренном виде, но виден поисковым системам. Распространённые паттерны: div с display:none, набитые ключевым словом-спамом, ссылки, скрытые за пределами экрана, или текст, совпадающий с цветом фона. Сканирование необработанного источника выявит их.

5. Проверьте структуру внутренних ссылок

Найдите <a href= и просмотрите цели ссылок. Неработающие относительные пути, случайно помеченные nofollow внутренние ссылки или цепочки перенаправлений внутри иерархии сайта могут тихо снижать PageRank. View Source быстрее, чем ждать полного сканирования Screaming Frog, когда вам нужна лишь быстрая проверка.

Вывод

Просмотр источника — это тридцатисекундная привычка, которая выявляет дорогостоящие SEO-проблемы до того, как они накапливаются. То, используете ли вы Ctrl+U для необработанного HTML или DevTools для живого DOM, зависит от того, рендерится ли страница на стороне сервера или на стороне JavaScript — для большинства сайтов в 2026 году вам нужны оба инструмента.

Ознакомьтесь с этими статьями, которые могут быть вам полезны для SEO:

Часто задаваемые вопросы — просмотр исходного кода сайта в 2026 году

Работает ли view-source на сайтах, рендеренных с помощью JavaScript?

Частично. view-source: показывает HTML, отправленный сервером — который для React, Next.js, Astro (только клиент) или подобных фреймворков часто представляет собой почти пустую оболочку с тегами script. Отрендеренный контент находится в живом DOM, доступ к которому осуществляется через DevTools → панель Elements. Для сайтов с рендерингом на стороне сервера (SSR) или статически генерируемых сайтов view-source: показывает полное содержимое страницы, поскольку HTML завершён до того, как достигает браузера.

Могу ли я просматривать источник страницы, требующей входа в систему?

Да, при условии что сессия браузера авторизована. view-source: и DevTools работают с тем, что браузер уже загрузил. Если вы можете видеть страницу, вы можете просматривать её источник. Вы не можете просматривать источник страницы, которую не загрузили.

Законно ли просматривать исходный код чужого сайта?

Практически в каждой юрисдикции чтение HTML, который веб-сервер добровольно отправляет вашему браузеру, является законным — сервер выбрал его передачу. Автоматизированный парсинг в масштабе, обход средств контроля доступа (например, обход платного барьера) или коммерческое использование исходного кода без лицензии — это отдельные вопросы с разными правовыми ответами. Для рутинных SEO-аудитов и конкурентных исследований чтение публично обслуживаемого источника является стандартным и неспорным.

Каков самый быстрый способ проверить, использует ли сайт определённую технологию в 2026 году?

Три варианта: (1) проверьте источник на характерные строки (например, __NEXT_DATA__ для Next.js, astro-island для Astro, wp-content для WordPress); (2) установите расширение браузера Wappalyzer, которое определяет фреймворки, CDN, инструменты аналитики и с 2025 года некоторые компоненты AI-стека (LangChain, LlamaIndex); (3) запустите URL через BuiltWith для подробного отчёта о технологическом стеке.

Связанные материалы:

Это руководство является частью alejandrorioja.com — написано Alejandro Rioja, который сейчас создаёт системы агентов ИИ для основателей. Включая агента, который поддерживает этот сайт в актуальном состоянии. Как это работает →

Обновлено для мая 2026 года

Несколько обновлений 2026 года к конкретным советам в этом посте:

Читать дальше

Получайте ИИ-руководство на почту

Каждую среду. 28 400+ читателей. Никакой воды.

⌕
↵ ↵ — все результаты esc esc — закрыть