444
How to Читати 8 хвилин

Що таке iFrame і чому його небажано використовувати для пошукової оптимізації

ТЕХНІЧНА ЧАСТИНА — КОД СТОРІНОК

Що таке iFrame і чому його небажано використовувати для пошукової оптимізації

iFrame або плаваючий фрейм — окреме вікно, HTML-документ, який відображається разом з іншим вмістом сторінки у вікні браузера. Розташовуватися він може в будь-якому місці, без прив'язки до тега <iframe>.

Використання цього тега часто ризиковано отриманням фільтра: сайт перестає повністю контролювати вміст документа, оскільки його частина довантажується з іншого сайту через iframe.

Оскільки ми перестаємо контролювати вміст, то через iframe можливе підвантаження небажаного контенту (сумнівного тексту, вірусів, тощо), що, зі свого боку, може призвести до санкцій. А це позначиться й на просуванні у топ видачі.

Навіщо потрібен iFrame

Щоб відповісти на це запитання, спочатку потрібно розібратись, що ж таке фрейм. Фрейм — це окремий, завершений HTML-документ, який може відображатися в браузері разом з іншими HTML-документами.

iFrame потрібен, щоб вбудовувати традиційний фрейм, а також окремі HTML-документи на різні сторінки без застосування тега <iframe>. У результаті виходить, що на вебсторінці з'являється контент іншої URL-адреси з функцією прокрутки або без неї.

Тобто зі сторінкою фоново завантажуються інші сторінки. Користувач побачить такі фрейми, тільки якщо задавати їм певні розміри, наприклад, вигляд банера.

Такий вигляд має найпростіший приклад iframe: фрагмент коду із заданим розміром фонового вікна під банер:

<iframe src="https://example.com" width="300" height="60"></iframe>

Цей тег підтримується більшістю браузерів, але деякі параметри можуть відрізнятися або зовсім не запускатися. Наприклад, фрейми не запускаються в браузерах на основі аудіо, що використовуються в автомобільному транспорті, або для людей зі слабким зором, а також на дуже старих версіях браузерів.

Крім того, фрейми використовують не тільки на вебресурсах, а й у додатках до програм. Найчастіше вони корисні для служби технічної підтримки.

Наприклад, ви викликаєте кліком довідку, у відповідь з'являється загальне меню, поруч із яким на тлі відкривається віконце, що відповідає за обраний вами блок інформації.

Вопросы и ответы

У цьому випадку це зручно і дає змогу не завантажувати файли повторно. Схематично це має такий вигляд:

Меню и контент

Як знайти сторінки з iFrame за допомогою Serpstat

За допомогою інструменту Аудит сайту в Serpstat можна перевірити сайт або його окрему сторінку на наявність технічних помилок. Крім того, інструмент дає рекомендації щодо їх виправлення та можливість оцінити результати проведених робіт із SEO.

У нашому випадку, ми будемо перевіряти сайт tinypng.com, щоб знайти тег <iframe>.

Для початку роботи створіть новий проєкт. Перейдіть у Список проєктів і натисніть Додати новий проєкт. Якщо сайт для аналізу вже є у списку проєктів, просто натисніть на Аудит сайту.

Аудит сайту

Після проведення перевірки Serpstat покаже Сумарний звіт, тобто стислий огляд щодо помилок на сайті.

Сумарний звіт

Щоб побачити повний перелік проблем і рекомендації щодо їх виправлення, натисніть на Всі перевірки.

У розділі Індексація ми бачимо помилку про наявність тега <iframe> і всі відповідні URL сторінок, а також рекомендації щодо усунення цієї проблеми.

Якщо сайт, що перевіряється, не використовує iFrame, то в переліку помилок жодних даних не буде.

Всі перевірки

Якщо помилка на сторінках є, то у звіті ви знайдете:

Після виправлення рекомендуємо просканувати ці сторінки ще раз, проблема має відображатись тепер тільки на вкладці “Відсутні”. 

Опис перевірки

Де використовують фрейми

1.Вбудовані відео, презентації та інший візуальний контент.
2.Для оптимізації зовнішнього вигляду додатків служб підтримки, як на попередньому скріншоті.
3.Для створення фонового трафіку через партнерські програми. Застосування тега зумовлене накруткою відвідувань, які фіксуються системами аналітики та завищують результати трафіку.
4.Web-дизайн. Деякі дизайнери будують концептуальну ідею структури сайту, включаючи в неї фонові вікна фреймів, вбудовуючи анімацію, відео та інший медіаконтент. Оскільки під час проєктування сайту веб-дизайнери відштовхуються від інших завдань, ніж пошукове просування, виникають розбіжності.
Крім того, використання айфрейму може бути зумовлене анімацією керованою JS.

Наприклад, такий вигляд має фрагмент коду, який довантажує відео з YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/example" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>

Для чого практикують використання фреймів

Для чого небажано використовувати фрейми

Переваги та недоліки фреймів

Ми розібралися, що фрейми є технічними елементами веб-розробки, які дозволяють включати одну веб-сторінку в іншу та мають певні недоліки. Переходимо до переваг:

1.Швидке підвантаження відеоматеріалів, карт, презентацій та іншого контенту.
2.Фрейми в HTML дають змогу показати відвідувачеві одночасно кілька сторінок, які абсолютно самостійні.
3.Відвідувач зможе перемикати екрани, не перезавантажуючи при цьому сторінку.
4.З'являється можливість розбити структуру вебресурсу за блоками, що дасть змогу редагувати тільки окремі блоки.
5.Користувач отримає можливість самостійно змінювати габарити фонового вікна, якщо ви не обмежили його опцією noresize.

А тепер докладніше про можливі ризики:

1.Існує ймовірність, що індексування сайту пошуковими роботами перериватиметься під час переходу на фрейм.
2.Низка браузерів не підтримує такого відображення.
3.Загроза фільтрів. Санкції від пошукових систем можливі, коли у фреймах знаходиться контент забороненого характеру.

Щоб не допускати можливих непорозумінь із пошуковими роботами та користувачами, браузери яких не підтримують цю функцію, вебмайстри закривають iFrame від індексації та додають відповідне повідомлення. Воно виводитиметься в тому разі, якщо не запускається фонове вікно, рекомендуючи користувачеві оновити браузер.

З технічного погляду виходить такий код:

Код

Вміст тега <noframes> показується в браузері, коли він не підтримує вставку iFrame. Водночас інші браузери, які вміють обробляти вікна з фреймами, не звертають на нього уваги. Опис слід розкривати більш повно, щоб утримати користувача на сайті.

Хотіли б перевірити сайт на помилки, які можуть заважати просуванню за допомогою Serpstat?

Розпочніть тестовий 7-денний період та відкрийте для себе всі можливості платформи!

Зареєструватись!

Ставлення пошукових систем до фреймів

Є два фундаментальних правила, які потрібно пам'ятати:

1.iFrame можна вбудовувати тільки з перевірених і надійних джерел, яким ви особисто довіряєте.
2.Врахуйте, що контент, який довантажується, не буде проіндексовано, як частину документа.

Причина, через яку iFrames не відповідають концептуальній моделі, в тому, що сторінки з iFrames мають більше однієї URL-адреси. Одна — для сторінки, на якій розміщується вставка iFrame, а інша — для сторінки, з якої він витягує контент. Не дивно, що роботи можуть заплутатися.

Висновок

iFrame — це тег, який дає змогу всередині одного HTML-документа відображати інший. У результаті, у фоні довантажується ще одна самостійна сторінка. Використовують фрейми з низки причин — наприклад, для вбудовування медіаконтенту, застосунків у контексті вебсайту, фотогалерей та іншого.

Під час вбудовування фреймів варто використовувати тільки довірені джерела, а також пам'ятати, що вміст фреймів не сканується пошуковими роботами, а за розміщення сумнівного контенту можливі санкції.

Оцініть статтю за п’ятибальною шкалою

Ця стаття вже була оцінена 3 людьми середньою оцінкою 5 із 5 можливих
Знайшли помилку? Виділіть її та натисніть Ctrl + Enter, щоб повідомити нам.

Використовуйте кращі SEO інструменти

Підбір ключових запитів

Пошук ключових слів – розкрийте невикористаний потенціал вашого сайту

Можливості Serpstat

Можливості Serpstat – потужне комплексне рішення для ефективного просування сайтів

Кластеризація ключових запитів

Кластеризація ключових слів автоматично обробляє до 50 000 запитів у кілька кліків

SEO аудит сторінки

Проаналізуйте рівень оптимізації використовуючи SЕО аудит сторінки

Поділіться статтею з вашими друзями

Ви впевнені?

Знайомство з сервісом

Serpstat економить час, як і ми готові заощадити ваш, на знайомстві з ключовими можливостями сервісу.

Наш фахівець зв'яжеться з вами і за підсумком запропонує відповідний варіант, який може включати персональну демонстрацію, пробний період, навчальні статті та записи вебінарів, консультацію фахівця, а також комфортні умови для старту використання Serpstat.

Ім’я

Введіть адресу електронної пошти

Телефон

Будемо раді вашому коментарю

Дякуємо, ми зберегли ваші нові налаштування розсилок.

Report a bug

Скасувати
Відкрити чат технічної підтримки
mail pocket flipboard Messenger telegramm