С помощью какого тега создается плавающий фрейм

Плавающие фреймы

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 13.4 приведен пример такого фрейма.

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега iframe> , он имеет обязательный параметр src , указывающий на загружаемый во фрейм документ (листинг 13.10).

Листинг 13.10. Использование тега iframe>

      
 - Тег, используемый для создания плавающего фрейма. ">iframe src="http://www.znannya.org/rgb.html" width="300" height="120">
  

В данном примере ширина и высота фрейма устанавливается через параметры width и height . Сам загружаемый во фрейм файл называется rgb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через параметр name , а в теге указать это же имя в параметре target (листинг 13.11).

Листинг 13.11. Загрузка документа во фрейм

      
RGB | CMYK | HSB
 
 - Тег, используемый для создания плавающего фрейма. ">iframe src="http://www.znannya.org/model.html" name="color" width="100%" height="300">
  

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color .

С помощью какого тега создается плавающий фрейм

Поддержка браузерами:

Браузер	Opera	IE	Firefox	Mozilla	Netscape
Поддержка	да	да	да	да	да

Параметры тега:

Параметры	frameborder	align	height	marginheight	Закрывающий тег
	marginwidth	hspace	name	scrolling
	src	vspace		width	да

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

Тег .

Пример:

Параметры тега

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

Если значение высоты и ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.

Пример:

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

Если значение высоты и ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.

Пример:

Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Наиболее популярные параметры — left и right , создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге добавить параметр hspace и vspace , задающих расстояние до текста в пикселах. В качестве зарезервированных имен используются следующие:

absmiddle
Выравнивание середины фрейма по середине текущей строки.

baseline
Выравнивание фрейма по базовой линии текущей строки.

bottom
Выравнивание нижней границы фрейма по окружающему тексту.

left
Выравнивает фрейм по левому краю окна.

middle
Выравнивание середины фрейма по базовой линии текущей строки.

right
Выравнивает фрейм по правому краю окна.

top
Верхняя граница фрейма выравнивается по самому высокому элементу строки.

texttop
Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.

Пример:

Выводит или не выводит рамку вокруг фрейма. Может принимать значения: 1 (по умолчанию, рамка выводится), 0 (рамка не выводится), yes (аналогично 1), no (аналогично 0)

Пример:

Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling .В качестве зарезервированных имен используются следующие:

yes
Всегда вызывает появление полос прокрутки.

no
Запрещает отображение полос прокрутки.

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

Пример:

Параметр устанавливает отступы содержимого от верхнего и нижнего края фрейма.

Пример:

Параметр устанавливает отступы содержимого от левого и правого края фрейма.

Пример:

Для любого фрейма можно задать отступы по горизонтали. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Пример:

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name . В этом случае при создании ссылки у тега требуется указать параметр target , в качестве значения которого выступает имя фрейма. Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name .

Пример:

Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Пример:

Для любого фрейма можно задать отступы по вертикали. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Пример:

С помощью какого тега создается плавающий фрейм

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

Тег .

Синтаксис

Атрибуты

align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. allowtransparency
Устанавливает прозрачный фон фрейма, через который виден фон страницы. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. marginheight Отступ сверху и снизу от содержания до границы фрейма. marginwidth Отступ слева и справа от содержания до границы фрейма. name Имя фрейма. sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

Оптимизация плавающих фреймов для SEO

Автор: команда маркетингового агентства Search Laboratory, Великобритания. Мы уже обсуждали использование iframe два года назад и на тот момент пришли к мнению, что плавающих фреймов нужно избегать. Теперь мы решили перепроверить эти выводы. Для этого мы провели несколько тестов, чтобы посмотреть, как можно сделать элементы iframe дружественными к SEO.

Проблема с iframe

Страницы, использующие фреймы или плавающие фреймы, содержат несколько URL-адресов (по одному на каждый фрейм). Плавающий фрейм может даже содержатся в странице, которая уже встроена в iframe. Например: Тег html указывает на начало кода на странице, и на обычной странице он должен быть один. Это значит, что контент главной страницы, содержащий все теги iframe, должен сканироваться, включая весь связанный с ним контент в плавающих фреймах. Таким образом, ссылочный вес может передаваться от основной страницы к встроенной и наоборот. Однако по-прежнему существует риск того, что наличие плавающих фреймов запутает поисковых роботов и в результате контент страницы не будет проиндексирован так, как ожидалось. Google пытается установить соответствие между содержанием, заключенным во фрейме, и страницей, содержащей фреймы , однако сделать это удаётся не всегда. В июле 2017 года сотрудник поиска Джон Мюллер рассказал, что контролировать сканирование и индексирование встроенного в iframe контента невозможно. Он сказал:

«Если страница встроена в плавающий фрейм в рамках другой, более крупной, страницы, то, возможно, мы также проиндексируем страницу с фреймом».

Вебмастеров беспокоит, что в данном случае нельзя проконтролировать, какой контент будет просканирован, и это может нанести ущерб сайту в долгосрочной перспективе. Мы обнаружили, что отсутствие ясности в этом вопросе не подходит нашим клиентам, многие из которые используют плавающие фреймы. Поэтому мы решили применить научный подход и провели несколько тестов, чтобы посмотреть, можем ли мы найти рабочее решение этой проблемы.

Тесты: можно ли контролировать сканирование плавающих фреймов?

• Основная страница (master page) – страница, которая содержит тег iframe.
• Встроенная страница/ контент (iframed page) – страница (или контент), которая встроена на основную страницу с помощью тегов iframe.

Мы выделили четыре SEO-техники, которые нужно было протестировать («no follow» не поддерживается для тега iframe):

• Канонические теги;
• Robots.txt;
• Метатег robots с атрибутами noindex, nofollow;
• iframe по требованию (on-demand iframe).

Тест №1. Использование канонических тегов

Это метод, предложенный Джоном Мюллером: использовать на странице атрибут rel=canonical, указывающий на актуальную версию контента, который вы хотите проиндексировать.

Пошаговый процесс теста.

Шаг 1

На домене №1 мы создали исходную HTML-страницу с тегами , , контентом в теге и изображением. Мы также добавили автореферентный атрибут rel=canonical. Это наша встроенная страница:

  
 
 
 





 
 
What is a loading GIF?
 
An animated GIF (Graphics Interchange Format) file is a graphic image on a web page that moves.
 
Below is a picture of a loading GIF.
 
 
 

Шаг 2

На домене №2 мы создали HTML-страницу без ничего, кроме тега iframe и атрибута rel=canonical, указывающего на домен №1. Это наша основная страница:

Результаты

В теории, с описанными выше настройками основная страница не должна индексироваться. Индексироваться должна только встроенная страница, поскольку она содержит канонический тег.

День первый

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

Основная страница

Заголовок Title и метаописание отображаются в выдаче. Они взяты из встроенной страницы, title равен , а метаописание создано из содержимого тега .

Встроенная страница

В этой SERP имеется заголовок Title, а для описания Google использует содержимое тега .

День второй

Когда мы вернулись к этим страницам на следующий день, ситуация сильно изменилась.

Основная страница

Страница больше не индексировалась, поскольку начал учитываться канонический тег.

Встроенная страница

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

Вывод

Рекомендация Джона Мюллера работает, но чтобы ею воспользоваться, нужно иметь доступ к другому сайту для настройки каноникализации. Как показали первые результаты, перед тем, как начал учитываться атрибут canonical, контент дублировался. Без канонических тегов это имело бы негативное влияние на обе страницы в долгосрочной перспективе.

Следующая часть нашего эксперимента – протестировать методы блокировки встроенного контента от индексации, если доступ к другому сайту отсутствует. Для этих тестов мы использовали Карты Google, встроенные как плавающие фреймы.

Тест №2. Использование robots.txt

Протокол исключения роботов – это хороший способ для блокировки сканирования страниц и директорий ботами поисковых систем.

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

Шаг первый

Мы создали HTML-страницу с Картой Google, встроенной в виде iframe. Страница находилась в подкаталоге: http://[domain one]/maps/gmap1.html. Это наша встроенная страница.

Шаг второй

Мы заблокировали -контент от индексации с помощью команды в robots.txt:

User-agent: * 
Disallow: /maps/

Шаг третий

Мы добавили страницу как iframe на http://[domain one]/contact/. Это наша основная страница.

Чтобы проверить, как родительская страница сканировалась Google, мы использовали «Сканер Google» для http://[domain one]/contact/.

Встроенная страница, содержащая карту Google, была заблокирована, хотя она визуализировалась для пользователей.

Вывод

Этот подход будет иметь негативное влияние на индексацию основной страницы. Как говорится в отчёте о заблокированных ресурсах в Google Search Console:

«Если Googlebot не может получить доступ к важным ресурсам на странице, то она может быть проиндексирована некорректно».

Тест №3. Использование метатега robots с атрибутам noindex, nofollow

Метатеги – это теги, которые можно добавлять в раздел страницы.

• Чтобы предотвратить индексацию страницы поисковыми роботами, используется атрибут «noindex».
• Чтобы предотвратить сканирование ссылок на странице – атрибут «nofollow».

Опять же, наличие этих атрибутов на родительской странице будет иметь для неё негативный эффект, поэтому нужно использовать такой же подход, как во втором тесте: создать ещё одну страницу, которая содержит только контент iframe, и заблокировать её от сканирования.

Шаг первый

Мы создали HTML-страницу с Картой Google, встроенной как : http://[domain one]/maps2/gmap2-noindex-nofollow.html. Это наша встроенная страница.

Примечание: эта страница расположена в отдельном каталоге /maps2/, поскольку /maps/ заблокирован от сканирования (см. тест №2).

Шаг второй

Мы заблокировали контент Google Map от индексации, добавив метатег robots на встроенную страницу:

Шаг третий

Мы добавили страницу как iframe на http://[domain one]/what-do-i-do/. Это наша основная страница.

Результат

Чтобы проверить, как основная страница сканируется Google, мы протестировали её с помощью «Сканера Google».

Вывод

Опять же, рендеринг не был полным, а был заблокирован. Эти скрипты принадлежат встроенному контенту Google Map, а не тестовому сайту.

Итак, несмотря на команды на странице, Google переходит по ссылкам в плавающем фрейме.

В данном случае этот метод аналогичен использованию rel=nofollow и поэтому не должен применяться.

Тест №4. Использование on-demand iframe

Шаг первый

Мы создали исходную HTML-страницу с Картой Google, встроенной как . Страница была расположена в подкаталоге: http://[domain one]/maps/gmap1.html. Это наша встроенная страница.

Шаг второй

Мы заблокировали контент iframe от индексации, используя директиву в robots.txt:

User-agent: * 
Disallow: /maps/

Шаг третий

Мы сгенерировали код и добавили его в раздел body на странице http://[domain one]/contact/. Это наша основная страница.

style="height:480px;width:640px;" data-responsive="true"
 
data-img="http://[domain one]/wp-content/uploads/2017/05/google-map.jpg"
 
data-css data-name="SL test">
 
 

Этот код не содержит тегов , но включает несколько изображений, CSS-стили и скрипт. Всё это создаёт так называемый «on-demand iframe» (iframe по требованию). При загрузке страницы плавающий фрейм не загружается. Он появляется, когда пользователь кликает или нажимает на него. Только после этого начинается загрузка.

Результат

Чтобы проверить, как основная страница сканировалась Google, мы использовали «Сканер Google» для http://[domain one]/about/.

Вывод

На этот раз рендеринг страницы был успешно завершён. Скорость загрузки страницы также улучшилась, как показывают результаты проверки на webpagetest.org:

Во всех тестах на проверку скорости метод «iframe по требованию» всегда обеспечивал самую быструю загрузку. Это легко объяснить: в данном случае мы имеем меньше контента, получаемого с внешнего сайта.

Страница со встроенной картой Google:

Страница с iframe по требованию:

Заключение

Наши тесты доказывают, что существуют разные методы контроля над тем, как поисковые системы сканируют iframe, но только два из них работают для SEO.

Полученные результаты представлены в приведённой ниже таблице:

Автоматизация сбора данных для интернет-маркетолога

Многие задачи поисковой оптимизации сайта, равно как и составления рекламных кампаний в Директе можно и нужно автоматизировать