Фреймы

Фреймы – это HTML-элементы, которые показывают внутри одной страницы другой документ со своим адресом. Старые фреймы (frameset и frame) делили окно браузера на независимые части и сейчас считаются устаревшими, а встроенный фрейм iframe используют для карт, видео, виджетов и платёжных форм.

В начале 2000-х так собирали целые сайты: меню слева, шапка сверху, содержимое в середине, и каждая часть грузилась отдельным файлом. Адрес в строке браузера при переходах не менялся, ссылку на нужную страницу было не отправить, а поисковик приводил человека в средний фрейм без меню. Сейчас frameset в стандарте HTML числится среди устаревших элементов, а iframe встречается постоянно: в нём живут карта на странице контактов и видео в карточке товара.

Как устроены фреймы

Фрейм работает как окно в другой документ. Браузер загружает его отдельным запросом, со своими стилями, скриптами и cookies. Два варианта для сравнения:

<!-- устаревший вариант: окно делится на части -->
<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

<!-- iframe: встроенный документ внутри обычной страницы -->
<iframe src="https://example.ru/map/" width="600" height="400"
  loading="lazy" title="map"></iframe>

У страницы на frameset нет обычного тела: окно целиком состоит из фреймов. iframe, наоборот, вставляется в любое место обычной страницы, как картинка. Атрибут title в примере стоит не для красоты: без него программа экранного доступа зачитает фрейм как безымянный блок, и человек не поймёт, что внутри.

Как поисковики видят фреймы

Для робота содержимое фрейма остаётся отдельным документом по адресу из src. Яндекс в справке пишет, что индексирует контент, который загружается во frameset и frame, и позволяет найти исходный документ по содержимому фреймов. Отсюда старая беда: в выдачу попадает внутренний фрейм, и человек приходит на голый текст без меню и шапки.

С iframe то же самое. Текст внутри встроенного документа принадлежит другому адресу, часто другому сайту, и рассчитывать, что он добавит релевантности вашей странице, не стоит. У Google есть правило indexifembedded: если встраиваемая страница закрыта тегом noindex, оно разрешает индексировать её содержимое в составе страницы, которая её встроила. Это настройка владельца встраиваемого контента, и решает её он, а не вы.

Вывод простой: основной текст, меню, каталог и ссылки держат в HTML самой страницы, тогда индексация идёт без сюрпризов. Во фрейм выносят то, что берут у других сервисов.

Где iframe уместен, а где нет

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

Встраивание, настройка и замена фреймов

Как фреймы замедляют страницу

Каждый iframe тянет за собой ещё одну полноценную страницу: свой HTML, стили, скрипты, шрифты. Плеер или виджет карты загружается, даже если до него никто не долистал. Страница контактов с тремя картами и двумя видео без ленивой загрузки сразу при открытии грузит пять дополнительных документов. Это бьёт по скорости сайта и метрикам Core Web Vitals.

• Добавьте loading="lazy": фрейм ниже первого экрана загрузится, когда до него долистают.
• Вместо плеера покажите обложку с кнопкой и подгружайте iframe по клику.
• Задайте ширину и высоту, чтобы блок не сдвигал страницу при загрузке. Подробнее в статье CLS.

Кликджекинг и защита от чужих фреймов

Фрейм работает в обе стороны: чужой сайт может встроить ваш. На этом построен кликджекинг, когда посетитель видит одну страницу, а кликает по спрятанной вашей. Защита ставится заголовком ответа сервера:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Оба варианта запрещают встраивать страницы сайта на чужие домены. Для сторонних виджетов на своём сайте есть обратная мера: атрибут sandbox ограничивает, что код внутри iframe может делать.

Как проверить фреймы на сайте

1. Откройте код страницы (Ctrl+U) и поищите «frame». Нашлись frameset или frame: сайт пора переделывать.
2. Для каждого iframe посмотрите, что внутри. Карта и видео в порядке, основной текст и каталог нет.
3. В DevTools на вкладке Network оцените, сколько весят запросы из фреймов.
4. Проверьте заголовки ответа: есть ли X-Frame-Options или frame-ancestors.

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

Документация и справки

• HTML Living Standard (WHATWG): элемент iframe, устаревшие элементы frameset и frame
• Справка Яндекс Вебмастера: индексирование документов
• Google Search Central: правило indexifembedded в мета-теге robots
• MDN Web Docs: X-Frame-Options, Content-Security-Policy frame-ancestors

См. также: Индексация сайта, Скорость сайта, Core Web Vitals, Хост.