Що таке теги iFrame і чи варто їх використовувати?
Теги iFrame були вперше представлені в 1997 році. З того часу веб-розробники використовують їх для вбудовування зовнішніх елементів. Одним з найпоширеніших способів використання iFrame є вбудовування Youtube відео, Google карт і дописів соціальних мереж на веб-сайти та цільові сторінки.
Незважаючи на свою популярність, iFrames несуть ризики для безпеки вашого веб-сайту. Так, на XSS-атаки припадає понад 30% усіх кібератак, і неналежне використання iFrame спричиняє основну частину з них.
Оскільки репутація веб-сайту — важлива складова успіху бренду загалом, необхідно дотримуватись усіх правил щодо використання iframe. У цій статті ми поговоримо про те, що таке iframe, які вони мають переваги і недоліки, а також розглянемо ставлення пошукових систем до цих маленьких помічників (або шкідників 🙂).
iFrame — що це і навіщо потрібен?
Вбудований фрейм (iframe) — це елемент HTML, який розміщує іншу веб-сторінку в межах батьківської сторінки. Зазвичай фрейми використовують для вбудовування реклами, відео, трекерів веб-аналітики та інтерактивного контенту. HTML iframe використовують для того, щоб:
- вставляти корисні ресурси із зовнішніх веб-сайтів;
- розміщувати відео та інші медіафайли на своєму веб-сайті, не використовуючи простір для зберігання та пропускну здатність;
- полегшувати користувачам веб-сайту пошук фізичного місця розташування компанії за допомогою коду iframe для Google карт;
- створювати привабливу медійну рекламу за допомогою повністю вбудованого документа HTML;
- підтримувати актуальність контенту на веб-сайті, адже iframe автоматично оновлюється з кожною зміною оригінального контенту.
Елемент iFrame підтримують усі браузери, зокрема: Google Chrome, Internet Explorer, Mozilla Firefox, Safari, Opera тощо. З точки зору коду, кожен фрейм містить HTML-теги iframe, а також атрибут src. Атрибут src визначає вихідну URL-адресу для контенту, який буде розташований в елементі iframe. Серед інших атрибутів:
- allow: визначає дозволені функції для фрейму;
- allowfullscreen: активація повноекранного режиму;
- height: визначає висоту iframe (за замовчуванням становить 150 пікселів);
- width: визначає висоту iframe (за замовчуванням становить 300 пікселів);
- sandbox: визначає список функцій, які мають бути дозволені або обмежені для контенту в iframe;
- name: визначає назву iframe.
Існують також додаткові атрибути, які не підтримуються в оновленій версії HTML5.
Переваги та недоліки: чи варто використовувати iFrames на своєму веб-сайті?
Для більшості користувачів iframe html це можливість відокремити основний HTML-документ (сайт) від зовнішнього контенту. Це корисно з двох причин:
- по-перше, вам не потрібно турбуватися про оновлення стороннього контенту. Рекламні оголошення, стрічка соціальних мереж та Google карти будуть автоматично оновлюватися.
- по-друге, iframe вставки забезпечують додатковий захист. Вам не доведеться хвилюватися про ненавмисне імпортування шкідливих файлів або помилок.
Незважаючи на це, багато розробників виступають проти використання iFrame з таких причин:
- Оскільки в iFrame ви додаєте контент із сторонніх джерел, у довгостроковій перспективі це збільшує потенційні загрози безпеці веб-сайту. Зловмисники можуть скористатися цією можливістю для фішингу даних користувачів та вбудовування шкідливого контенту.
- На пристроях із низькою пропускною здатністю завантаження контенту в iFrame призводить до білого спалаху на екрані. Це погіршує юзабіліті веб-сайту та негативно впливає на користувацький досвід.
Отож, фрейми — це по суті інструмент, який допомагає вбудовувати контент з однієї сторінки на іншу сторінку. Наприклад: для того, щоб вставити на сторінку блог, треба використати iframe blog.
Пошукові системи та iFrames — як фрейми впливають на SEO-оптимізацію сайту?
На початкових етапах проблема seo iframe полягала в тому, що пошукові системи не могли сканувати контент фрейму. Крім того, пошукові боти могли “застрягати” в iframe, а отже решта контенту веб-сайту ризикувала залишились непроіндексованою. На сьогодні ж веб-сканери вільно переміщаються між iframe і звичайним контентом веб-сайту. Окрім цього, ви можете полегшити пошуковим системам доступ до вмісту iframe за допомогою файлу robot.txt.
Отож, постає питання: який звязок полягає між iframe та google seo? Пошукові системи вважають, що контент у фреймах належить іншому сайту. Це означає, що наявність iframe насправді не впливає на рейтинг ресурсу (ні в кращу, ні в гіршу сторону). Натомість, у довідковому центрі Google зазначено, що iFrame створюють проблеми для пошукових систем. Це пояснюється тим, що фрейми не відповідають концептуальній моделі мережі інтернет.
Якщо ви все ж таки вирішили додати iframe на веб-сайт, тоді варто зосередитися на розміщенні контенту з авторитетних джерел. Варто пам’ятати, що контент всередині фрейму не буде проіндексований як частина документа.
Як знайти сторінки з iframe на веб-сайті?
Для цього у пригоді стане інструмент Serpstat та функція “Аудит сайту”, яка дозволяє проаналізувати технічні характеристики веб-ресурсу та виявити критичні SEO-помилки. За допомогою платформи ми можемо знайти і iframe: для початку роботи увійдіть до свого облікового запису або зареєструйтеся на платформі.
Надалі дотримуйтесь таких кроків:
Перейдіть у розділ “Список проєктів” і створіть новий проєкт.
Якщо сайт для аналізу вже доданий до облікового запису, тоді одразу перейдіть до розділу “Аудит сайту”.
У пошуковий рядок вставте посилання на сайт або блог, де iframe необхідно знайти. Ознайомтеся із результатами у розділі “Усі помилки”. Система надасть висновки щодо аналізу та рекомендації для усунення критичних помилок.
Перейдіть до вкладки “Індексація”. Якщо веб-сайт не використовує iFrame, тоді система не надасть інформацію про помилки.
Якщо сайт використовує iFrame, тоді система надасть інформацію про: URL із наявною проблемою, її опис та шляхи усунення.
Після виправлення помилок рекомендується ще раз провести перевірку, аби впевнитися у належному використанні iFrame.
Як додати HTML iFrame на свій веб-сайт
Якщо ви зважили усі переваги та недоліки використання фреймів, тоді пропонуємо розібратися із способами їх додавання на веб-сайт.
Додавання iFrame через плагін WordPress
У 2023 році 45,8% усіх веб-сайтів в Інтернеті використовують CMS WordPress, тому першочергово розглянемо саме такий підхід. Дотримуйтесь вказівок:
- Встановіть плагін iframe на WordPress та активуйте його.
- Створіть нову сторінку або перейдіть до наявної публікації.
- Додайте блок короткого коду.
- Для того, щоб додати iframe, вставте код: iframe src=”URL ___”
Фото: wordpress.org
Додавання iFrame через вихідний код
Більшість популярних платформ надають готовий код iframes video, який можна безпосередньо додати на веб-сайт. Розглянемо спосіб на прикладі додавання відео YouTube:
- Перейдіть до відео, яке треба додати на веб-сайт, і натисніть “Поділитися”.
- Оберіть “Вставити” у спливаючому вікні. Прокрутіть вниз і поставте галочки у полях “Показати елементи керування програвачем” і “Увімкнути режим підвищеної конфіденційності”.
- Скопіюйте код iframe та вставте його на свій сайт.
Додавання iFrame вручну
Ще один спосіб — вручну створити HTML-код iframe і вставити його до необхідної сторінки. Для цього:
- Перейдіть до редактора WordPress і додайте блок HTML.
- Введіть HTML-код.
- За необхідності додайте додаткові атрибути до тегу iframe.
Висновки: теги iFrame — видалити не можна залишити
iFrame — це універсальна веб-технологія, яка дозволяє додавати сторонній контент до свого веб-сайту без необхідності писати довгі й складні коди. Фрейми пропонують унікальний спосіб покращити користувацьку взаємодію та функціональність веб-сайту, роблячи ресурс більш інтерактивними та динамічними.
Поряд із тим, iFrames викликають занепокоєння щодо безпеки у власників веб-сайтів. Так, використання фреймів підвищує шанс на проникнення комп’ютерних вірусів або крадіжки конфіденційної інформації. Окрім цього, використання кількох фреймів на веб-сторінці одночасно призводить до зменшення швидкості завантаження веб-сторінки.
Щоб уникнути проблем, вкрай важливо вставляти код iframe лише з авторитетних ресурсів. Як щодо iframe seo? Google рекомендує уникати великої кількості фреймів на веб-сайті, адже їх важче індексувати. За необхідності варто додавати текстові посилання, щоб полегшити роботу Googlebot і покращити рейтинг сторінки.
Отож, хоча iframes і вважаються одним із найкращих способів додати сторонній контент на веб-сайт, не варто робити їх невід’ємною частиною свого ресурсу.
