Мы уже обсуждали использование 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-страницу с тегами <title>, <H1>, контентом в теге <body> и изображением. Мы также добавили автореферентный атрибут rel=canonical. Это наша встроенная страница:
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title>Loading GIF | Example of an animated GIF (Graphics Interchange Format)</title>
<meta name="description" content="">
<link rel="canonical" href="http://[domain one].com/gif/loading-gif.html"/>
</head>
<body>
<div>
<h1>What is a loading GIF?</h1>
<p>An animated GIF (Graphics Interchange Format) file is a graphic image on a web page that moves.</p>
<p>Below is a picture of a loading GIF.</p>
<img src="http://[domain one]/wp-content/uploads/2017/05/loading.gif">
</div>
</body>
</html>
Шаг 2
На домене №2 мы создали HTML-страницу без ничего, кроме тега iframe и атрибута rel=canonical, указывающего на домен №1. Это наша основная страница:
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<link rel="canonical" href="http://[domain one].com/gif/loading-gif.html" />
</head>
<body>
<div>
<iframe src="http://[domain one]/gif/loading-gif.html" height="500" width="750" style="border:0px;"></iframe>
</div>
</body>
</html>
Результаты
В теории, с описанными выше настройками основная страница не должна индексироваться. Индексироваться должна только встроенная страница, поскольку она содержит канонический тег.
День первый
Результаты в SERP были очень неожиданными, поскольку были проиндексированы и основная, и встроенная страницы.
Основная страница
Заголовок Title и метаописание отображаются в выдаче. Они взяты из встроенной страницы, title равен <H1>, а метаописание создано из содержимого тега <body>.
Встроенная страница
В этой SERP имеется заголовок Title, а для описания Google использует содержимое тега <body>.
День второй
Когда мы вернулись к этим страницам на следующий день, ситуация сильно изменилась.
Основная страница
Страница больше не индексировалась, поскольку начал учитываться канонический тег.
Встроенная страница
Эта страница по-прежнему индексировалась. Заголовок остался, но метаописание пропало. Это неудивительно, изначально оно не было задано.
Вывод
Рекомендация Джона Мюллера работает, но чтобы ею воспользоваться, нужно иметь доступ к другому сайту для настройки каноникализации. Как показали первые результаты, перед тем, как начал учитываться атрибут canonical, контент дублировался. Без канонических тегов это имело бы негативное влияние на обе страницы в долгосрочной перспективе.
Следующая часть нашего эксперимента – протестировать методы блокировки встроенного контента от индексации, если доступ к другому сайту отсутствует. Для этих тестов мы использовали Карты Google, встроенные как плавающие фреймы.
Тест №2. Использование robots.txt
Протокол исключения роботов – это хороший способ для блокировки сканирования страниц и директорий ботами поисковых систем.
Однако исключение родительской страницы из обхода будет иметь отрицательный эффект в виде полной деиндексации. Поэтому мы создали вторую страницу, которая содержала только встроенный контент, и заблокировали её от сканирования.
Шаг первый
Мы создали HTML-страницу с Картой Google, встроенной в виде iframe. Страница находилась в подкаталоге: http://[domain one]/maps/gmap1.html. Это наша встроенная страница.
Шаг второй
Мы заблокировали <iframe>-контент от индексации с помощью команды в robots.txt:
User-agent: *Disallow: /maps/
Шаг третий
Мы добавили страницу как iframe на http://[domain one]/contact/. Это наша основная страница.
<iframe src="http://[domain one]/maps/gmap1.html" width="640" height="480"></iframe>
Чтобы проверить, как родительская страница сканировалась Google, мы использовали «Сканер Google» для http://[domain one]/contact/.
Встроенная страница, содержащая карту Google, была заблокирована, хотя она визуализировалась для пользователей.
Вывод
Этот подход будет иметь негативное влияние на индексацию основной страницы. Как говорится в отчёте о заблокированных ресурсах в Google Search Console:
«Если Googlebot не может получить доступ к важным ресурсам на странице, то она может быть проиндексирована некорректно».
Тест №3. Использование метатега robots с атрибутам noindex, nofollow
Метатеги – это теги, которые можно добавлять в раздел <head> страницы.
- Чтобы предотвратить индексацию страницы поисковыми роботами, используется атрибут «noindex».
- Чтобы предотвратить сканирование ссылок на странице – атрибут «nofollow».
Опять же, наличие этих атрибутов на родительской странице будет иметь для неё негативный эффект, поэтому нужно использовать такой же подход, как во втором тесте: создать ещё одну страницу, которая содержит только контент iframe, и заблокировать её от сканирования.
Шаг первый
Мы создали HTML-страницу с Картой Google, встроенной как <iframe>: http://[domain one]/maps2/gmap2-noindex-nofollow.html. Это наша встроенная страница.
Примечание: эта страница расположена в отдельном каталоге /maps2/, поскольку /maps/ заблокирован от сканирования (см. тест №2).
Шаг второй
Мы заблокировали контент Google Map от индексации, добавив метатег robots на встроенную страницу:
<html lang="en"><head>
<meta charset="utf-8">
<title>Google Map 2 - noindex,nofollow</title>
<meta name="description" content="">
<meta name="robots" content="noindex,nofollow"
<link rel="canonical" href="http://[domain one]/maps/gmap2.html" />
</head>
<body>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=16ynIJEh8LjG8bLytVBX02dhs3d0"
width="640" height="480"></iframe>
</body>
</html>
Шаг третий
Мы добавили страницу как iframe на http://[domain one]/what-do-i-do/. Это наша основная страница.
<iframe src="http://[domain one]/maps2/gmap2-noindex-nofollow.html" width="640" height="480"></iframe>
Результат
Чтобы проверить, как основная страница сканируется Google, мы протестировали её с помощью «Сканера Google».
Вывод
Опять же, рендеринг не был полным, а <script> был заблокирован. Эти скрипты принадлежат встроенному контенту Google Map, а не тестовому сайту.
Итак, несмотря на команды на странице, Google переходит по ссылкам в плавающем фрейме.
В данном случае этот метод аналогичен использованию rel=nofollow и поэтому не должен применяться.
Тест №4. Использование on-demand iframe
Для этого теста мы использовали генератор кода <iframe>, созданный codegena.com. Этот метод очень похож на тест №2 – блокировку через robots.txt.
Шаг первый
Мы создали исходную HTML-страницу с Картой Google, встроенной как <iframe>. Страница была расположена в подкаталоге: http://[domain one]/maps/gmap1.html. Это наша встроенная страница.
Шаг второй
Мы заблокировали контент iframe от индексации, используя директиву в robots.txt:
User-agent: *Disallow: /maps/
Шаг третий
Мы сгенерировали код и добавили его в раздел body на странице http://[domain one]/contact/. Это наша основная страница.
<div class="codegena_iframe" data-src="http://[domain one]/maps/gmap1.html"style="height:480px;width:640px;" data-responsive="true"
data-img="http://[domain one]/wp-content/uploads/2017/05/google-map.jpg"
data-css="background:url('//[domain one]/wp-content/uploads/2017/05/loading.gif')
white center center no-repeat;border:0px;" data-name="SL test"></div>
<script src="https://rawgit.com/shaneapen/Codegena/master/async-iframe.js"></script>
Этот код не содержит тегов <iframe>, но включает несколько изображений, CSS-стили и скрипт. Всё это создаёт так называемый «on-demand iframe» (iframe по требованию). При загрузке страницы плавающий фрейм не загружается. Он появляется, когда пользователь кликает или нажимает на него. Только после этого начинается загрузка.
Результат
Чтобы проверить, как основная страница сканировалась Google, мы использовали «Сканер Google» для http://[domain one]/about/.
Вывод
На этот раз рендеринг страницы был успешно завершён. Скорость загрузки страницы также улучшилась, как показывают результаты проверки на webpagetest.org:
Во всех тестах на проверку скорости метод «iframe по требованию» всегда обеспечивал самую быструю загрузку. Это легко объяснить: в данном случае мы имеем меньше контента, получаемого с внешнего сайта.
Страница со встроенной картой Google:
Страница с iframe по требованию:
Заключение
Наши тесты доказывают, что существуют разные методы контроля над тем, как поисковые системы сканируют iframe, но только два из них работают для SEO.
Полученные результаты представлены в приведённой ниже таблице:
