Содержание
Что такое iFrame и почему его нежелательно использовать для поисковой оптимизации
105790 72
| How-to | – Читать 9 минут |
Прочитать позже
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ
Дмитрий Севальнев
Инструкцию одобрил Руководитель департамента SEO и рекламы, совладелец интернет-агентства «Пиксель Плюс»
iFrame или плавающий фрейм — отдельное окно, HTML-документ, который отображается вместе с другим содержимым страницы в окне браузера. Располагаться он может в любом месте, без привязки к тегу <iframe>.
Использование данного тега зачастую рискованно получением фильтра: сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта через iframe.
Поскольку мы перестаем контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и прочее), что, в свою очередь, может привести к санкциям.
А это отразится на продвижении в выдаче.
Содержание:
1. Зачем нужен iFrame
2. Как найти страницы с iFrame с помощью Serpstat
3. Где используют фреймы
4. Преимущества и недостатки фреймов
5. Отношение поисковых систем к фреймам
Заключение
Зачем нужен iFrame
Чтобы ответить на этот вопрос, сначала нужно напомнить, что такое фрейм. Это отдельный, завершенный HTML-документ, который может отображаться в браузере вместе с другими HTML-документами.
iFrame нужен, чтобы встраивать традиционный фрейм, а также отдельные HTML-документы на разные страницы без применения тега <iframe>. В результате получается, что на веб-странице появляется демонстрация контента другого URL-адреса с функцией прокрутки или без нее.
То есть со страницей фоново загружаются другие страницы. Пользователь увидит такие фреймы, только если задавать им определенные размеры, например, вид баннера.
Так выглядит простейший пример iframe: фрагмент кода с заданным размером фонового окна под баннер:
<iframe src="https://example.com"></iframe>
com"></iframe>Данный тег поддерживается большинством браузеров, но некоторые параметры могут отличаться или вовсе не запускаться. Например, фреймы не запускаются в браузерах на основе аудио, используемых в автомобильном транспорте, или для людей со слабым зрением, а также на очень старых версиях браузеров.
Кроме того, фреймы используются не только на веб-ресурсах, но и в приложениях к программам. Зачастую они полезны для службы технической поддержки.
Например, вы вызываете кликом справку, в ответ появляется общее меню, рядом с которым в фоне открывается окошко, отвечающее за выбранный вами блок информации:
В данном случае это удобно и позволяет не загружать файлы повторно. Схематически это выглядит так:
Как найти страницы с iFrame с помощью Serpstat
С помощью инструмента Аудит сайта в Serpstat можно проверить сайт или его отдельную страницу на наличие технических ошибок.
Кроме того, инструмент дает рекомендации по их исправлению и возможность оценить результаты проведенных работ по SEO.
В нашем случае, мы будем проверять сайт https://tinypng.com/, чтобы найти тег <iframe>.
Для начала работы создайте новый проект. Перейдите в Список проектов и нажмите Добавить новый проект. Если ваш сайт уже добавлен, просто нажмите на Аудит сайта.
После проведения проверки Serpstat покажет Суммарный отчет, то есть краткую сводку по ошибкам на сайте.
Чтобы увидеть полный перечень проблем и рекомендации по их исправлению, нажмите на Все проверки.
В разделе Индексация мы видим ошибку о наличие тега <iframe> и все соответствующие URL страниц, а также рекомендации по устранению этой проблемы.
Если проверяемый сайт не использует iFrame, то в перечне ошибок никаких данных не будет.
Если ошибка на страницах есть, то в отчете вы найдете:
- описание проблемы;
- подсказка, как ее устранить;
- история проверки;
- URL, на котором обнаружена ошибка.
После исправления рекомендуем просканировать эти страницы еще раз. Если проблемы действительно нет, то в отчете по ошибке уже не будет этих страниц.
Чтобы быстро узнать какие проблемы есть у твоего сайта и получить рекомендации по их устранению, нажимай на Проверить свой сайт.
Где используют фреймы
Встроенные видео, презентации и прочий визуальный контент.
Для оптимизации внешнего вида приложений служб поддержки, как на предыдущем скрине.
Для создания фонового трафика через партнерские программы. Применение тега обусловлено накруткой посещений, которые фиксируются системами аналитики и завышают результаты трафика.
Web-дизайн. Некоторые дизайнеры строят концептуальную идею структуры сайта, включая в нее фоновые окна фреймов, встраивая анимацию, видео и прочий медиа контент. Так как при проектировании сайта веб-дизайнеры отталкиваются от других задач, нежели поисковое продвижение, возникают разногласия.
Кроме того, использование айфрейма может быть обусловлено анимацией управляемой JS, которая не так медленно работает в отдельном окне.
Например, так выглядит фрагмент кода, который подгружает видео с YouTube:
<iframe src="https://www.youtube.com/example" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Для чего практикуют использование фреймов
- встраивание медиаконтента — как своего, так и стороннего;
- встраивание примеров фрагментов кода;
- встраивание апплетов — приложений, работающих в контексте веб-сайта, например, формы оплаты или интерактивные карты. Так Яндекс предоставляет возможность запускать Яндекс.Карты через iFrame.
Для чего нежелательно использовать фреймы
- фотогалереи;
- окно чата;
- навигация;
- накрутка фонового трафика.
Фотогалерея и чат — обычно самостоятельные документы, которые не стоит встраивать в тело другого документа. Для навигации предпочтительнее применять карту сайта и хлебные крошки. А накрутка рано или поздно заканчивается наложением фильтров.
А самое главное — это подгружать контент только из доверенных источников!
Преимущества и недостатки фреймов
Преимущества:
Быстрая подгрузка видеоматериалов, карт, презентаций и прочего контента.
Фреймы в HTML позволяют показать посетителю одновременно несколько страниц, которые абсолютно самостоятельны.
Посетитель сможет переключать экраны, не перезагружая при этом страницу.
Появляется возможность разбить структуру веб-ресурса по блокам, что позволит редактировать только отдельные блоки.
Пользователь получит возможность самостоятельно изменять габариты фонового окна, если вы не ограничили его опцией noresize.
А теперь подробнее о возможных рисках:
Существует вероятность, что индексирование веб-сайта поисковыми роботами будет прерываться при переходе на фрейм.
Ряд браузеров не поддерживает подобное отображение. Они либо устаревшие, либо предназначены только для аудио и т.п.
Угроза фильтров. Санкции от поисковых систем возможны, когда во фреймах находится контент запрещенного характера.
Чтобы не допускать возможных недоразумений с поисковыми роботами и пользователями, браузеры которых не поддерживают данную функцию, вебмастера закрывают iFrame от индексации и добавляют соответствующее уведомление. Оно будет выводиться в том случае, если не запускается фоновое окно, рекомендуя пользователю обновить браузер.
С технической точки зрения получается следующий код:
Содержимое тега <noframes> показывается в браузере, когда он не поддерживает вставку iFrame. В то же время остальные браузеры, умеющие обрабатывать окна с фреймами, не обращают на него внимания.
Описание следует раскрывать более полно, чтобы удержать пользователя на веб-сайте.
Хотите обнаружить ошибки на сайте, которые мешают продвижению с помощью Serpstat?
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉
| Оставить заявку! |
| Узнать подробнее! |
Отношение поисковых систем к фреймам
Есть два фундаментальных правила, которые нужно помнить:
iFrame можно встраивать только с проверенных и надежных источников, которым вы лично доверяете.
Учтите, что подгружаемый контент не будет проиндексирован, как часть документа.
«Google поддерживает фреймы и iframe в той мере, в какой это возможно. iFrame могут создавать проблемы для поисковых систем, потому что они не соответствуют концептуальной модели Интернета», — сказано в справке Google.
«Для корректного ранжирования документа не рекомендуется использовать тег <iframe>, так как поисковый робот Яндекса не индексирует документы, подгружаемые в него», — отмечает Яндекс.
Помощь.
Причина, по которой iFrames не соответствуют концептуальной модели, в том, что страницы с iFrames имеют более одного URL-адреса. Один — для страницы, на которой размещается вставка iFrame, а другой — для страницы, из которой он извлекает контент. Неудивительно, что роботы могут запутаться.
Заключение
iFrame — это тег, который позволяет внутри другого HTML-документа отображать другой. В результате при запуске страницы, на которой присутствует фрейм, фоново подгружается еще одна самостоятельная страница.
Используют фреймы по ряду причин — например, для встраивания медиаконтента, приложений в контексте веб-сайта, фотогалерей и прочего.
При встраивании фреймов стоит использовать только доверенные источники, а также помнить, что содержимое фреймов не сканируется поисковыми роботами. А за встраивание запрещенного контента возможны санкции.
Задавайте вопросы в комментариях или пишите в техподдержку.
🙂 А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Получить бесплатный доступ на 7 дней
Оцените статью по 5-бальной шкале
3.43 из 5 на основе 52 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Анастасия Сотула
Чем отличается Title от заголовка h2 и как его составить
How-to
Анастасия Сотула
Как оптимизировать изображения на сайте для мобильных устройств
How-to
Анастасия Сотула
Как распределить семантическое ядро по страницам сайта
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе.
Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
HTML/Атрибут noresize (Элемент frame)
Синтаксис
HTML
XHTML
<frameset> <frame src="..." noresize="noresize"> ... </frameset>
Описание
Атрибут / параметр noresize (от англ. «no resize» ‒ «без изменения размера») запрещает изменение размеров фрейма.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | 16.2.2 The FRAME element noresize [CI]… DTD: |
| 5.0 | |
| 5.1 | |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: |
1. 1 | |
Значения
Данный атрибут является логическим атрибутом.
В HTML данный атрибут может указываться либо без значения, либо с пустым значением, либо со значением «noresize».
В XHTML данный атрибут может указываться только в «развёрнутом виде», то есть со значением «noresize».
<frame noresize> <frame noresize=""> <frame noresize="noresize">
Пример использования
Листинг кода
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Параметр noresize (Элемент frame)</title>
</head>
<frameset rows=»35%, 65%»>
<frame src=»../document1.html»>
<frame src=».
./document2.html» noresize=»noresize»>
<noframes>
<body>
<h2>Ошибка</h2>
<p>Ваш веб-браузер не поддерживает фреймы.</p>
</body>
</noframes>
</frameset>
</html>
Параметр noresize (Элемент frame)
: Элемент Inline Frame — HTML: Язык гипертекстовой разметки
HTML-элемент Люди, использующие вспомогательные технологии, такие как программа чтения с экрана, могут использовать атрибут Без этого заголовка они должны перейти в
Результат
title в