Новый формат
Исходный код сайта: зачем смотреть и как открыть
Исходный код страницы — HTML (и связанные CSS/JS), который браузер получает с сервера и превращает в то, что вы видите. Для SEO и отладки полезно уметь его открыть и найти title, meta, разметку и ошибки в консоли.
Ниже — зачем это маркетологу и владельцу сайта, как открыть код в браузере и что смотреть в первую очередь. Полный курс вёрстки — в отдельной статье; здесь — практичный осмотр.
Что такое исходный код страницы
По запросу URL сервер отдаёт документ: разметку HTML, ссылки на CSS и скрипты. Браузер парсит теги и рисует интерфейс. Пользователь видит результат; код — «партитуру».
Даже у сайтов на PHP, Python или конструкторах в браузер уходит HTML. Значит, осматривать страницу можно одинаково — через исходник и DevTools.
В коде обычно есть:
- HTML-структура;
- подключённые CSS;
- JavaScript;
- мета-теги и canonical;
- счётчики и пиксели аналитики.
Зачем смотреть код
Чтобы проверить, что реально отдаётся поисковику и браузеру: title, description, h1, noindex, разметка ссылок, вес скриптов, битые пути к картинкам.
Также удобно подсмотреть, как оформлен блок у конкурента (цвет, шрифт, класс) — для брифа дизайнеру, не для копипаста чужого контента.
Типичные задачи:
- аудит meta и заголовков;
- поиск счётчиков и пикселей;
- проверка canonical / robots;
- отладка JS-ошибок в Console;
- сохранение CSS/шрифта для анализа.
Как открыть код в браузере
Chrome / Edge / Firefox: ПКМ по странице → «Просмотреть код страницы» (View Page Source) — отдельная вкладка с текстом. Или ПКМ по элементу → «Просмотреть код» / Inspect — панель DevTools с подсветкой блока.
Меню → Дополнительные инструменты → Инструменты разработчика. Вкладки Elements/Inspector, Sources, Console, Network, Security (сертификат). Раскладку панели можно сменить, если мешает.
Быстрые приёмы:
- Ctrl+F / Cmd+F по `title`, `canonical`, `noindex`;
- клик по узлу в Elements — подсветка на странице;
- Sources — файлы скриптов и стилей, Save as;
- Console — ошибки JS;
- ПКМ по блоку на сайте → Inspect — прыжок к нужному узлу.
На что смотреть в HTML
`<head>` — служебное: title, meta, link на CSS и canonical. `<body>` — то, что видит пользователь: заголовки h1–h6, абзацы, списки, ссылки, картинки.
Семантические теги (`article`, `section`, `nav`) помогают структуре. `div`/`span` — универсальные блоки без сильного смысла. Для SEO важны ясный h1, осмысленные анкоры и alt у изображений.
Частые теги при осмотре
| Тег | Зачем смотреть |
|---|---|
| `title` | Заголовок вкладки и сигнал темы |
| `meta description` | Черновик сниппета |
| `link rel=canonical` | Канонический URL |
| `h1` | Главный заголовок на странице |
| `a href` | Куда ведут ссылки |
| `img alt` | Текст для картинки |
Частые вопросы
Чем «просмотр кода» отличается от DevTools?
«Просмотреть код страницы» показывает исходный HTML ответа (часто до сильных правок скриптами). Инструменты разработчика — живое дерево после выполнения JS, стили, сеть, консоль.
Нужно ли знать вёрстку, чтобы смотреть код?
Базовых тегов (title, h1, a, img, meta) достаточно для проверки SEO-гигиены. Писать макеты с нуля — уже задача верстальщика.
Виден ли в коде то, что скрыто CSS?
Часто да: текст может быть в HTML, но спрятан стилями. Роботы и люди видят по-разному — не используйте скрытие как SEO-трюк.
Где смотреть meta description и robots?
В `<head>`: `meta name="description"`, `meta name="robots"`, link rel="canonical". Удобно искать Ctrl+F / Cmd+F.
Можно ли править чужой сайт через «Inspect»?
Изменения в DevTools только у вас локально. На сервер они не сохраняются, пока вы сами не зальёте правки в CMS/репозиторий.
Нужно проверить, что отдаёт страница?
Поможем с техаудитом: meta, разметка, ошибки в коде — без лишней магии.
Обсудить задачу
