Что такое iFrame и почему нужно осторожно использовать его на сайте

Рассказываем, что такое iFrame, в каких случаях его полезно использовать и как правильно встроить контент на сайт с помощью фреймов. 

Зачем нужен iFrame

iFrame‑тег (англ. inline frame — встроенная рамка; нескл. об iFrame, с iFrame и др.) — элемент HTML, который представляет собой контейнер для вставки других HTML‑документов. Обычно инструмент используют для вставки мультимедийного контента: карт, видео с YouTube или аудиозаписей. 

Как HTML‑элемент iFrame появился уже давно: браузер Microsoft Internet Explorer поддерживает его с 1997 года. Полное название iFrame звучит как inline frame и переводится как «встроенная рамка». 

іFrame позволяет встраивать сторонние материалы на сайт с минимальными затратами времени и сил. Например, при размещении видеоролика разработчику не нужно самому создавать видеопроигрыватель и хранить контент на собственном хостинге — достаточно опубликовать ролик на YouTube‑канале и встроить его в страницу с помощью фрейма. 

Разработчики используют іFrame, потому что он обеспечивает разделение между исходными данными сайта и содержимым фрейма. Встроенный HTML‑документ остаётся изолированным от CSS и JavaScript‑страниц и не вредит основному содержанию площадки. 

Пример использования iFrame

Тег <iframe> создаёт встроенный фрейм, который находится внутри страницы. Он позволяет загружать в область заданных размеров любые сторонние документы.

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

<iframe src= «https://www.google.ru/» height=»200px» width=»300px»></iframe>

В результате в HTML‑документе появится квадрат, в который встроена страница, карта или другой контент.

Атрибуты iFrame

Для настройки содержания iFrame используют следующие атрибуты:

• src=«URL» — источник содержимого фрейма ссылкой;

• srcdoc=»<p>Название документа</p>» — HTML‑источник содержимого фрейма.

Кроме того, существуют и другие атрибуты для настройки поведения и внешнего вида фрейма:

• allow="fullscreen” — полноэкранный режим фрейма;

• name — название фрейма;

• height — высота фрейма в пикселях;

• width — ширина фрейма в пикселях;

• loading — характер загрузки фрейма: сразу или при прокрутке до области расположения фрейма;

• referrerpolicy — политика реферера: какие данные реферера будут отправлены при обработке атрибутов iFrame;

• scrolling — отображение полосы прокрутки фрейма;

• seamless — отображения фрейма как части документа;

• sandbox — «песочница», которая задаёт ограничения на контент фрейма.

Атрибут sandbox позволяет настроить для фрейма разрешения на отправку форм, открытие окон, блокировку ориентации экрана и другие действия. Для этого используются специализированные флаги. Например, флаг allow‑popups позволяет ресурсу открывать новые всплывающие окна или вкладки.

Как iFrame влияет на поисковую индексацию

Ранее считалось, что использование iFrame на сайте вредит его поисковой индексации, так как контент фреймов не считается уникальным. Но это предположение уже давно опровергли многие разработчики. 

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

Контент фреймов не способен повлиять на SEO‑продвижение сайта положительно или отрицательно. Поэтому у площадки, в коде которой используется iFrame, есть такие же шансы выйти на первые позиции выдачи, как и у любой другой. Однако уникальный контент всегда остаётся для поисковых систем предпочтительным, поэтому такие сайты продвигаются в поиске лучше. 

iFrame может навредить поисковой оптимизации сайта только в одном случае — когда разработчик использует контент из ненадёжных источников. Если встроить на сайт фрейм с площадки, которая публикует запрещённые материалы, например рекламу нелегальных казино, есть риск попасть под санкции поисковиков. Поэтому при добавлении стороннего контента на сайт важно проверять надёжность и безопасность источников. 

Потенциальные риски использования iFrame 

При использовании фреймов есть риск столкнуться со следующими проблемами:

• избыток фреймов на сайте тормозит загрузку и перегружает память пользователей;

• фреймы могут самопроизвольно выполнять на сайте разные действия: автоматически проигрывать видео, создавать всплывающие окна или показывать уведомления — чтобы этого не допустить, настройте разрешения для рамки через атрибут sandbox;

• контент фреймов не учитывается поисковыми системами как содержимое сайта;

• фреймы могут вредить юзабилити сайта и отвлекать аудиторию от просмотра основной информации;

• чтобы встроить фреймы в адаптивный дизайн, разработчику необходимо обернуть элементы iFrame в <div> с определёнными CSS‑свойствами, установить соотношения сторон в CSS или поменять высоту и ширину фрейма с помощью библиотеки iFrame Resizer;

• пользователи переходят на источник контента во фрейме, из‑за чего сайт теряет часть трафика. 

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

Что запомнить

• Тег iFrame — элемент HTML, который представляет собой контейнер для вставки других HTML‑документов.

• Обычно iFrame используют для вставки мультимедийного контента: карт, видео с YouTube или аудиозаписей.

• іFrame обеспечивает разделение между исходными данными сайта и содержимым фрейма.

• Ранее считалось, что использование iFrame на сайте вредит его поисковой индексации, но это предположение уже давно опровергли многие разработчики.