Теория 30/11/2021

Могут ли элементы iframes повлиять на SEO сайта?

Автор

Тег <iframe> (от англ. inline frame — встроенная рамка) — это отличный инструмент веб-дизайна, также известный как плавающий встроенный фрейм, которым пугают начинающих разработчиков. Он является одним из старейших тегов HTML и был представлен еще в 1997 году в HTML 4.01 Microsoft Internet Explorer. Видео с YouTube на других сайтах, кнопка «Нравится» известной социальной сети на любой странице, реклама казино? Все это <iframe>.

Данный тег позволяет добавлять на вашу страницу элементы мультимедиа и документы с других сайтов в контейнере заданного размера. Однако откуда взялись первые фреймы и почему вокруг <iframe> столько негативных мифов?

Содержание
История появления фреймов
Что такое iframe?
Атрибуты для работы с iframe
Безопасность
iframe: события и общение
Могут ли элементы iframes повлиять на SEO сайта?
Заключение

История появления фреймов

В начале-середине 1990-х годов интернет выглядел совершенно по-другому. Скорость соединения тогда была в сотни раз ниже, чем сейчас, а потому сайты старались делать максимально минималистичными. Более того, считалось, что разделение одной страницы на несколько отдельных блоков помогает сайту в целом работать быстрее (то есть, когда у пользователя страница прогружается отдельными блоками, он может видеть какой-то контент до полной загрузки страницы). Поэтому для создания веб-сайтов стали использовать фреймы.

Это отдельные законченные HTML-документы, которые вместе с другими HTML-документами могут быть отображены в окне браузера. По сути, одна страничка разбивается на прямоугольные блоки, каждый из которых содержит в себе разные HTML-документы. Фактически разработчики, используя фреймы, создавали из веб-страниц подобие таблиц с некоторым количеством ячеек, каждая из которых являлась независимым элементом. Можно сказать, что пользователь видел на одном экране сразу несколько отдельных страниц сайта. При этом работа в одной ячейке не влияла на содержимое других.

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

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фреймы</title>
 </head>
 <frameset rows="25%,75%">
   <frame src="top.html" name="TOP" scrolling="no" noresize>
   <frameset cols="100,*">
     <frame src="menu.html" name="MENU">
     <frame src="content.html" name="CONTENT">
   </frameset>
 </frameset>
</html>

Вначале с помощью тега <frameset> создаются две строчки, которые разбивают страницу в соотношении 1:3. В верхней ячейке с помощью атрибута src= отображается документ top.html, который не прокручивается и размер которого не может быть изменен благодаря атрибутам scrolling="no" и noresize. Нижняя же строка разбивается на два столбца. При этом левая колонка занимает 100 пикселей, а правая — оставшееся пространство, заданное символом звездочки. В левую ячейку загружается страница menu.html, в правый — content.html. Таким образом у пользователя на одном экране отображается сразу три страницы одного сайта.

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

Фреймы очень хорошо подходили для создания шапки сайта. Например, сверху создается горизонтальная ячейка со списком всех доступных страниц, а ниже — ячейка отображения. Когда пользователь нажимает, допустим, «Новости», на второй ячейке у него идет отображение списка новостей, при этом, верхняя ячейка продолжает показывать список доступных страниц для перехода. В целом это касается любых неподвижных элементов интерфейса. То есть, если разработчику нужно было, чтобы на его сайте всегда отображалось какое-либо изображение (логотип), он мог зафиксировать его в отдельном фрейме. Еще одним интересным применением можно считать обучающие сайты, где на одном фрейме располагалась информация о задании, на другом — форма для ввода данных учеником, а на третьем — результат его действий.

Однако использование фреймов также играло с разработчиками злую шутку. Например, пользователи абсолютно не имели понятия в каком разделе сайта они находятся, потому что в адресной строке всегда отображала одна и та же информация (http://mysite.com/index.html). Все фреймы встраивались на одну страничку — index.html — и не влияли на отображение. То же касалось и поисковиков, они просто не могли находить отдельные страницы сайтов, использующих фреймы. Если же пользователь каким-то образом узнавал адрес внутренней страницы и переходил на нее напрямую, то вся структура сайта для него ломалась.

Курс-професія "Web Design" від Skvot.

Для тих, хто давно хоче опанувати професію вебдизайнера, але не знає, з чого почати.Після 4 місяців навчання — старт в карʼєрі з двома кейсами у портфоліо.

Програма курсу і реєстрація

Что такое iframe?

В конце 1990-х годов начали активно развиваться технологии Java и Flash, что позволило разработчикам не только встраивать на свои странички различные видео, анимации и приложения, но и решить некоторые проблемы с фреймами. Например, поломка структуры сайта при переходе на внутреннюю страницу легко устранялась средствами JavaScript. В начале кода прописывается скрипт, который будет создавать фреймовую структуру в том случае, когда пользователь попадает на «неверную» страницу. Кроме того, в мире начала расти средняя скорость интернет-соединения, доступная обывателям, а поэтому необходимость ячеистой структуры сайтов отпадала.

Поэтому постепенно фреймы канули в небытие и на данный момент уже считаются устаревшей технологией и не поддерживаются в HTML5 (таких тегов, как frame, frameset и noframes уже попросту не существует). А затем из-за проблем с безопасностью, скоростью работы и доступностью начали уходить и Flash-технологии (многие браузеры уже давно отказались от ее поддержки). А для встраивания мультимедийного контента на страницы появляется универсальный тег iframe.

Для чего нужен и где используется iframe?

Как уже упоминалось выше, тег <iframe> используют для того, чтобы на своей странице отображать внешние документы, будь то другие страницы, сторонние видео (например, с YouTube), презентации и другой визуальные контент, различные апплеты (например, формы оплаты или карты Google Maps), для отображения рекламы других сайтов (или же создания фонового трафика через партнерские программы), а также для создания приложений (например, справочных документов). То есть разработчик может добавлять контент в любом месте на странице, без необходимости включать его в структуру веб-макета как традиционный элемент. Кроме того, встраиваемый элемент будет независимым HTML-документом, а значит, он будет изолирован от JavaScript и CSS основной страницы.

Знатоки не рекомендуют использовать фреймы для создания фотогалерей и чатов, а делать их самостоятельными невстроенными элементами. Также стоит забыть об «олдскульном» применении фреймов для создания навигационной панели. Некоторые современные браузеры могут не поддерживать отображение встраиваемых элементов, поэтому нужно позаботиться о защите от такого сценария (добавлением предупреждающего текста между тегами <iframe> и </iframe>).

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

Одним из ярких примеров использования iframe, который каждый из читателей может проделать самостоятельно прямо сейчас, является добавление карт из Google Maps на любую страничку. Если взять приложение Google Maps и открыть «Меню», там можно найти строчку «Ссылка/код». Там есть два параметра: «Отправка ссылки», чтобы поделиться картой с другом через мессенджер или социальные сети, и «Встраивание карт». Последний выдает вам код с тегом <iframe> для размещения на своем сайте:

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d20325.35072803851!2d30.531452584657586!3d50.44726872840224!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sua!4v1637242327427!5m2!1sru!2sua" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Чтобы добавить на страничку видео с YouTube, достаточно найти нужный ролик, нажать на кнопку «Поделиться» и выбрать из списка доступных вариантов «Встроить». Затем ввести у себя полученный код:

<iframe width="720" height="480" src="https://www.youtube.com/embed/ydxgOZG0BUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Можно также использовать iframe, чтобы добавить кнопку для призыва пользователей делиться ссылкой на ваш сайт, например, в Twitter:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border:0;” width:”100” height:”33”></iframe>

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

Атрибуты для работы с iframe

src=”ссылка” — задает путь к странице/файлу/элементу, содержимое которого будет отображаться во фрейме.

Онлайн-курс "Директор з продажу" від Laba.

Як стратегічно впливати на дохід компанії, мотивувати сейлзів перевиконувати KPI та впроваджувати аналітику — навчить комерційний директор Laba з 12-річним досвідом у продажах.

Приєднатись до курсу

srcdoc=”ссылка” — дает возможность установить содержимое фрейма непосредственно в атрибуте, чтобы не допустить влияния CSS-кода текущего сайта на стиль элементов. Важно: значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html>, а при одновременном использовании атрибутов src и srcdoc, src игнорируется.

height=”” и width=”” — с помощью этих атрибутов задается высота и ширина блока iframe. Значение можно указывать в пикселях и оно будет фиксированным или в процентах для автоматической подстройки размера элемента на странице.

name=”имя” — задает имя фрейма (в основном используется для ссылки на элемент в JavaScript).

referrerpolicy=”” — используется для настройки реферера для отправки при получении содержимого iframe.

loading=”” — имеет несколько значений: auto (браузер сам определяет порядок загрузки элемента iframe), eager (загрузка происходит немедленно) и lazy (откладывает загрузку фрейма пока он находится вне поля зрения, что увеличивает скорость загрузки сайта).

style=”border:0;” — убирает рамку вокруг встраиваемого элемента, которую iframe имеет по умолчанию.

allow=”” и sandbox=”” — данные атрибуты задают политику и ограничения для объектов iframe. О них подробнее мы поговорим чуть ниже.

seamless — экспериментальный атрибут, который работает только с браузерами на базе Chromium, и позволяет отображать содержимое iframe без швов и полос прокрутки в главном документе.

Между тегами <iframe> и </ iframe> можно помещать содержимое, которое будет отображаться в случае когда браузер не поддерживает данный элемент. К примеру данный код побуждает пользователей обновить браузер, если они не видят часть контента:

<iframe src="ссылка на видео" width="720" height="480" style="border:0;” allowfullscreen>
    Ваш браузер не поддерживает iframe. Пожалуйста, обновите его до последней версии.
</iframe>

Безопасность

Несмотря на то, что сам по себе элемент iframe не представляет ничего страшного, вокруг него и связанных с ним проблем с безопасностью ходит много слухов. Так как с помощью iframe вы, по факту, добавляете на свою страницу сторонний контент, то на сто процентов нельзя быть уверенными в том, что он не содержит в себе скрытых угроз. Потому что если установить ссылку на вредоносный сайт, то он будет угрожать и вашим посетителям. Одним из примеров использования iframe в мошеннических схемах — clickjacking. Это когда на сайт добавляется невидимый элемент, который захватывает действия пользователя. Так злоумышленники могут получать некоторые конфиденциальные данные.

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

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

Второе правило — по возможности использовать HTTPS (зашифрованную версию HTTP), которая уменьшает вероятность кражи данных третьими лицами, а также разграничивает доступы сайта и встраиваемого элемента между собой.

Третье правило — предоставлять элементам iframe только необходимые для их работы разрешения. Это делается с помощью атрибутов sandbox и allow, о которых пришло время поговорить более детально.

Атрибут sandbox

Когда внутри тега iframe прописывается атрибут sandbox, то встраиваемое содержимое как бы попадает в так называемую песочницу, где у него забирают права и не дают выполнять определенные действия (JavaScript, отправку форм, вызов всплывающих окон и так далее). Причем без указания дополнительных параметров работают все доступные ограничения. Включать же различные функции для элементов в песочнице можно прописыванием внутри атрибута sandbox специальных флагов.

Список доступных флагов для атрибута sandbox, которые дают элементу отдельные права:

allow-forms — дает право элементу отправлять формы.
allow-modals — открывать новые модальные окна (которые делаются с помощью функции alert в JavaScript).

allow-orientation-lock — блокировать ориентацию экрана.
allow-pointer-lock — использовать API блокировки указателя.
allow-popups — создавать всплывающие окна и вкладки (такие как window.open, target=”_blank”, showModalDialog).
allow-popups-to-escape-sandbox — открывать окна, к которым не применяются ограничения песочницы.
allow-presentation — запускать презентации.
allow-same-origin — загружать содержание, воспринимая его из того же источника, что и родительский документ.
allow-scripts — запуск и выполнение скриптов.
allow-top-navigation — получать доступ к элементам верхнего уровня.
allow-top-navigation-by-user-activation — получать доступ к элементам верхнего уровня, только если действие инициировано пользователем.

Если в теле тега iframe прописать sandbox="", то для элемента будут закрыты все права. sandbox="allow-popups, allow-presentation" — даст возможность запускать презентации и всплывающие окна. Нужно учитывать, что одновременное использование флагов allow-scripts и allow-same-origin позволит встраиваемому элементу использовать скрипты, позволяющие обходить политику безопасности.

Атрибут sandbox поддерживается в браузерах версии Chrome 4.0, IE/Edge 10.0, Firefox 17.0, Opera 15.0, Safari 5.0 и выше.

Атрибут allow

Атрибут allow позволяет открыть для содержимого iframe дополнительные возможности, которые по умолчанию всегда закрыты, даже без использования sandbox. Однако он работает только в браузерах на основе Chromium.

Список популярных флагов для атрибута allow:

accelerometer — дает элементу доступ к интерфейсу акселерометра.
ambient-light-sensor — доступ к интерфейсу сенсора освещения.
autoplay — дает возможность автоматического воспроизведения аудио и видео.
battery — доступ к состоянию батареи.
camera — доступ к камере.

Онлайн-курс "Лідогенерація у B2B" від Laba.

Де шукати нових клієнтів, щоб збільшити дохід компанії та які інструменти лідогенерації застосовувати? Розбираємо покроково та комплексно.

Дізнатись більше про курс

display-capture — возможность вести захват экрана.
fullscreen — дает возможность запускать содержимое в полноэкранном режиме.
gamepad — доступ к геймпаду.
geolocation — доступ к интерфейсу геолокации.
gyroscope — доступ к интерфейсу гироскопа.
layout-animations — позволяет воспроизводить анимации разметки.
microphone — доступ к микрофону.
midi — доступ к WEB MIDI API.
oversized-images — позволяет загружать и отображать большие изображения.

payment — доступ к API запроса платежа.
picture-in-picture — позволяет запускать медиа в режиме картинка-в-картинке.
usb — доступ к WebUSB API.
speaker-selection — позволяет просматривать и выбирать средство воспроизведения аудио.
screen-wake-lock — возможность блокировать выключение и затемнение экрана.

Iframe: события и общение

Так как iframe, по сути, является документом, то для него применимы многие глобальные обработчики событий. К примеру, можно отображать счетчики или сообщения для пользователей. Когда элемент iframe полностью загружен, можно вызывать какое-либо событие с помощью load event, а если происходит сбой, то выдавать другое событие через error event. В iframe это реализовывается через атрибуты onload=”” и onerror=””.

Общение между основной страницей и содержимым iframe производится благодаря использованию функции Window.postMessage().

Пример отправки сообщения от основного документа к iframe:

const myiframe = document.getElementById('myIframe');
myIframe.contentWindow.postMessage('message', '*');

И его прием во встраиваемом элементе:

window.onmessage = function(event)
{
    if (event.data == 'message') 
{
        console('Message received!');
    }
};

Пример сообщения от iframe к основному документу:

window.top.postMessage('reply', '*');

И его прием:

window.onmessage = function(event)
{
    if (event.data == 'reply') 
{
        console('Reply received!');
    }
};

Могут ли элементы iframes повлиять на SEO сайта?

Вокруг данного вопроса также присутствует много спекуляций. Ранее роботы поисковых систем вообще не могли видеть содержимое iframe, а если и попадали каким-то образом в данный блок, то могли не выбраться и переставали индексировать остальное содержимое сайта. Однако данная проблема уже давно решена.

Поисковые системы легко понимают, что элементы iframe — это не дубликаты, не украденные материалы, а ссылки на другие сайты. Наличие встроенных элементов обычно никак не влияет на итоговый рейтинг сайта для поисковых выдач. Специалисты для уверенности советуют дополнительно индексировать содержимое iframe с помощью инструмента robots.txt, разрешая или запрещая поисковым системам доступ к содержанию страницы.

Заключение

Подводя итог всего вышесказанного, <iframe> — это действительно мощный инструмент для наполнения вашего сайта различным медиаконтентом. В отличие от <video>, <audio> и <img>, данный элемент является универсальным и позволяет работать не только с видео, аудио, но и картами, баннерами, презентациями и так далее. При этом <iframe> не вредит SEO, не влияет на скорость загрузки сайтов и сам по себе не является вредоносным элементом.

Просто всегда следует держать в голове тот факт, что встраиваемый контент является сторонним и вы должны доверять источнику прежде, чем делиться им с пользователями. А главное правило — предоставлять <iframe> только необходимые для его работы разрешения.

Также о фреймах можно посмотреть это дополнительное обучающее видео: