Serpstat использует файлы cookie для обеспечения работоспособности сервиса, улучшения навигации, предоставления возможности связаться с командой поддержки, а также маркетинговых активностей Serpstat.

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
33842 23
How-to Читать 7 минут 7 декабря 2018

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

Что такое iframe и как к нему относятся поисковые системы
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ
Инструкцию одобрил
Руководитель департамента SEO и рекламы, совладелец интернет-агентства «Пиксель Плюс»
iFrame или плавающий фрейм — отдельное окно, HTML-документ, который отображается вместе с другим содержимым страницы в окне браузера. Располагаться он может в любом месте, без привязки к тегу <iframe>.
Использование данного тега зачастую рискованно получением фильтра: сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта через iframe.

Поскольку мы перестаем контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и прочее), что, в свою очередь, может привести к санкциям. А это отразится на продвижении в выдаче.

Зачем нужен iFrame

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

iFrame позволяет встраивать традиционный фрейм, а также отдельные HTML-документы на разные страницы без применения тега <iframe>. В результате получается, что на веб-странице появляется демонстрация контента другого URL-адреса с функцией прокрутки или без нее.

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

Так выглядит простейший пример iframe: фрагмент кода с заданным размером фонового окна под баннер:
Пример кода iFrame HTML5
Данный тег поддерживается большинством браузеров, но некоторые параметры могут отличаться или вовсе не запускаться. Например, фреймы не запускаются в браузерах на основе аудио, используемых в автомобильном транспорте, или для людей со слабым зрением, а также на очень старых версиях браузеров.

Кроме того, фреймы используются не только на веб-ресурсах, но и в приложениях к программам. Зачастую они полезны для службы технической поддержки.

Например, вы вызываете кликом справку, в ответ появляется общее меню, рядом с которым в фоне открывается окошко, отвечающее за выбранный вами блок информации:
Пример использования iFrame
В данном случае это удобно и позволяет не загружать файлы повторно. Схематически это выглядит так:
Принцип работы 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>

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

  • встраивание медиаконтента — как своего, так и стороннего;
  • встраивание примеров фрагментов кода;
  • встраивание апплетов — приложений, работающих в контексте веб-сайта, например, формы оплаты или интерактивные карты. Так Яндекс предоставляет возможность запускать Яндекс.Карты через iFrame.

Для чего нежелательно использовать фреймы

  • фотогалереи;
  • окно чата;
  • навигация;
  • накрутка фонового трафика.

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

А самое главное — это подгружать контент только из доверенных источников!

Преимущества и недостатки фреймов

Преимущества:

  1. Быстрая подгрузка видеоматериалов, карт, презентаций и прочего контента.

  2. Фреймы в HTML позволяют показать посетителю одновременно несколько страниц, которые абсолютно самостоятельны.

  3. Посетитель сможет переключать экраны, не перезагружая при этом страницу.

  4. Появляется возможность разбить структуру веб-ресурса по блокам, что позволит редактировать только отдельные блоки.

  5. Пользователь получит возможность самостоятельно изменять габариты фонового окна, если вы не ограничили его опцией noresize.

А теперь подробнее о возможных рисках:

  1. Существует вероятность, что индексирование веб-сайта поисковыми роботами будет прерываться при переходе на фрейм.

  2. Ряд браузеров не поддерживает подобное отображение. Они либо устаревшие, либо предназначены только для аудио и т.п.

  3. Угроза фильтров. Санкции от поисковых систем возможны, когда во фреймах находится контент запрещенного характера.

Чтобы не допускать возможных недоразумений с поисковыми роботами и пользователями, браузеры которых не поддерживают данную функцию, вебмастера закрывают iFrame от индексации и добавляют соответствующее уведомление. Оно будет выводиться в том случае, если не запускается фоновое окно, рекомендуя пользователю обновить браузер.

С технической точки зрения получается следующий код:
Тег Noframes в HTML
Содержимое тега <noframes> показывается в браузере, когда он не поддерживает вставку iFrame. В то же время остальные браузеры, умеющие обрабатывать окна с фреймами, не обращают на него внимания. Описание следует раскрывать более полно, чтобы удержать пользователя на веб-сайте.

Отношение поисковых систем к фреймам

Есть два фундаментальных правила, которые нужно помнить:
1
iFrame можно встраивать только с проверенных и надежных источников, которым вы лично доверяете.
2
Учтите, что подгружаемый контент не будет проиндексирован, как часть документа.
«Google поддерживает фреймы и iframe в той мере, в какой это возможно. iFrame могут создавать проблемы для поисковых систем, потому что они не соответствуют концептуальной модели Интернета», — сказано в справке Google.

«Для корректного ранжирования документа не рекомендуется использовать тег <iframe>, так как поисковый робот Яндекса не индексирует документы, подгружаемые в него», — отмечает Яндекс.Помощь.

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

Заключение

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

Используют фреймы по ряду причин — например, для встраивания медиаконтента, приложений в контексте веб-сайта, фотогалерей и прочего.

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

    Эта статья — часть модуля «Список задач» в Serpstat
    «Список задач» в Serpstat
    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
    Начать работу со «Списком задач»

    Сэкономьте время на изучении Serpstat

    Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

    Оставьте заявку и мы свяжемся с вами ;)

    Оцените статью по 5-бальной шкале

    3.52 из 5 на основе 20 оценок
    Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

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

    Войти Регистрация

    Вы исчерпали лимит запросов.

    Или email
    Забыли пароль?
    Или email
    Back To Login

    Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

    Вы уверены?

    Awesome!

    To complete your registration you need to enter your phone number

    Назад

    Мы отправили код подтверждения на ваш номер телефона

    Your phone Resend code Осталось запросов

    Что-то пошло не так.

    Свяжитесь с нашей службой поддержки
    Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
    Выберите один из проектов

    Знакомство с сервисом

    Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

    Имя

    Email

    Телефон

    Будем рады вашему комментарию
    Увеличить лимиты

    Улучшить тариф

    Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

    Зарегистрироваться

    Спасибо, мы с вами свяжемся в ближайшее время

    Пригласить
    Просмотр Редактирование

    E-mail
    Сообщение
    необязательно
    E-mail
    Сообщение
    необязательно

    У вас закончились лимиты

    Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

    Я хочу больше лимитов