×
Россия +7 (495) 139-20-33

Продвижение сайтов СМИ на Single Page Application

Россия +7 (495) 139-20-33
Шрифт:
5 17141

Мы работаем с поисковой оптимизацией интернет-изданий уже три года. В начале 2017 два сайта перезапустились на Single Page Application, на фреймворке Angular 2, чтобы ускорить загрузку страниц.

Домены и названия изданий не можем назвать из-за NDA. Условимся, что site1.ru – глянцевое издание для мужчин, а site2.ru – для женщин.

Что такое SPA

Вкратце о SPA (Single Page Application) для тех, кто не сталкивался. Большинство сайтов в интернете – статичные, есть сайты с динамической подгрузкой – сделанные на AJAX. А есть SPA, где страница строится на стороне пользователя, а не сервера, и это ускоряет взаимодействие. Такой тип работы фронтенда используют Яндекс.Карты, Gmail, Meduza, Airbnb, Coursera, Netflix.

Опасность для SEO

Разработчики ценят Single Page Application за уменьшение времени переходов между страницами, нагрузки на устройство и сервер.

Страницы после перезапуска сайтов действительно стали загружаться быстрее:

Издание, тип страницы

Время загрузки по webpagetest.org

site2.ru, главная

-34,5 сек.

site2.ru, страница рубрики

-21,87 сек.

site2.ru, страница статьи

-10,08 сек.

site1.ru, главная

25,15 сек.

site1.ru, страница рубрики

-5,32 сек.

site1.ru, страница статьи

-4,46 сек.

Но далеко не всегда такие технологии успешно работают в связке с поисковыми системами.

Чем отличаются сайты на Single Page Application от традиционных.png

Чем отличаются сайты на Single Page Application от традиционных

Сайты на Single Page Application сложно индексировать. Контент, который видит пользователь, отсутствует в пригодном для индексирования виде, – он подгружается отдельно через JavaScript. В итоге страницы не попадают в поиск, поскольку поисковый робот не видит контент, либо индексируется только главная страница.

Чтобы выработать рекомендации для перезапуска site1.ru и site2.ru, мы искали сайты, которые работали изначально на SPA или перешли на него и получили в итоге больше трафика, чем было. Таких примеров не нашли и обратились к справке поисковых систем.

Официальные рекомендации поисковых систем

Яндекс рекомендует использовать ?_escaped_fragment_= в URL и метатег meta name="fragment" content="!" в коде динамической страницы, чтобы сообщить боту о наличии HTML-версии страницы. Чтобы проиндексировать http://site1.ru/example/, боту нужна страница http://site1.ru/example/?_escaped_fragment_= с идентичным содержимым.

Google утверждает, что умеет обрабатывать страницы SPA-сайтов и без ?_escaped_fragment_=. На момент принятия решения у нас не было четкой уверенности, что это на 100% так, поскольку на форумах писали о проблемах с индексацией. Решили не рисковать трафиком.

Теоретически, можно определять user-agent и отдавать им разные варианты: «Яндексу» и Mail.ru – с ?_escaped_fragment_=, Google – без. Динамические версии тогда будут отличаться наличием или отсутствием meta name="fragment" content="!", но нам это показалось лишним усложнением.

В итоге мы дали разработчикам рекомендации использовать ?_escaped_fragment_= в URL и метатег meta name="fragment" content="!" в коде динамической страницы для всех поисковых систем.

Трафик после перезапуска

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

На site1.ru в январе 2017 г. небрендированный трафик увеличился на 78,42% по сравнению с тем же месяцем прошлого года. Сайт перезапустили 17 февраля. В мае 2017 трафик ушел в минус на 2,55%.

Трафик после перезапуска 1.png

На site2.ru трафик упал более резко и драматично. В феврале 2017 г. был прирост небрендированного трафика на 23,64% по сравнению с 2016 г. Сайт перезапустили 10 марта. В мае 2017 трафик ушел в минус на 29,27% (по сравнению с 2016 г.).

Трафик после перезапуска 2.png

Почему трафик упал

Корень всех бед – некорректный рендер страниц и использование ?_escaped_fragment_=.

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

У некоторых архивных материалов и страниц-тегов HTML-версия была пустой – такие страницы просто выпали из поиска и, соответственно, перестали приносить трафик.

Сайты медленно индексировались не только из-за задержки рендера рубрик и главной страницы. Рекомендуемая «Яндексом» схема индексации с использованием ?_escaped_fragment_= затрудняет обход сайта: на одну статью – два URL, краулинговый бюджет расходуется быстрее, и свежий контент относительно долго не попадает в поисковую выдачу.

Нашли решение

Отказались от ?_escaped_fragment_= и по адресу динамической страницы стали отдавать ботам Яндекс, Google и Mail.ru сразу HTML-версию страницы.

На site1.ru также внедрили HTTP-заголовки Last-Modified и If-Modified-Since.

Вкупе это положительно повлияло на обход страниц ботом.

Нашли решение 1.jpg

Бот успевает обойти больше страниц, и трафик вырос (см. период с июня по октябрь).

Нашли решение 2.png

Советы по продвижению сайта на SPA

  1. URL-адреса сохраняйте в текущем виде. Не заморачивайтесь с ?_escaped_fragment_= и по адресу динамической страницы отдавайте ботам Яндекс, Google и Mail.ru HTML-снимок.
  2. Чтобы не использовать ?_escaped_fragment_=, при выборе фреймворка ориентируйтесь на то, поддерживает ли он серверный рендер. Спойлер: поддерживают почти все. Реализация серверного рендера для Angular, React, Vue.
  3. Проверяйте ответы заголовков сервера. Ответы 200 и 404 должны корректно отдаваться для существующих и несуществующих страниц, соответственно.
  4. На страницах разделов добавьте ссылки на пагинацию в отрендеренных версиях страниц. А на страницах пагинации – например, http://www.site.ru/example/page-2/ – должна быть ссылка на начальную страницу раздела как на каноническую в виде тега link rel="canonical" href="http://www.site.ru/example/".
  5. Если будет происходить кэширование, обновляйте кэш на хабовых страницах (главная и разделы) после каждого выхода свежего контента. Если нельзя – не менее 4–5 раз за сутки. Это поможет быстро индексировать новые страницы.
  6. Используйте инструмент «Посмотреть как Googlebot» в Search Console, чтобы понять, корректно ли бот видит страницу и какие компоненты JS или CSS ему недоступны.
  7. Подумайте над решением, которое позволит вовремя находить страницы с проблемами рендера. Мы столкнулись с тем, что некоторые страницы рендерятся, но при этом пустые и отдают код 200 OK. Можно реализовать механизм, который будет, например, проверять наличие заголовка H1 на странице после рендера и отправлять разработчикам уведомление, если его нет.
  8. Если ваш сайт еще не на SPA, и вы только готовитесь к перезапуску, делайте все на тестовом домене, закрытом от индексации. Не переносите на основной, пока не убедитесь, что все рекомендации корректно реализованы.

Выводы

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

Полезные ссылки

  1. Константин Носов про некоторые подводные камни Angular Universal.
  2. Презентация Рамазана Миндубаева «Продвижение сайтов на базе Single Page Application».
  3. Дмитрий @mrded про переход на SPA c Drupal и откат обратно.
  4. Список сайтов, использующих фреймворк React.
(Голосов: 6, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Lan Thu
    1
    комментарий
    0
    читателей
    Lan Thu
    больше года назад
    Thanks for sharing, nice post! Post really provice useful information! anthaison.vn/sp/may-dua-vong-tu-dong-ts/
    -
    0
    +
    Ответить
  • Киров
    7
    комментариев
    0
    читателей
    Киров
    больше года назад
    Да это мы еще весной откатали результат по радовал. Не так топорно конечно но сделали наподобие
    -
    -9
    +
    Ответить
  • Сергей
    1
    комментарий
    0
    читателей
    Сергей
    больше года назад
    Аня, спасибо за статью! Хоть и накосячили — смогли исправится. Молодцы!
    -
    6
    +
    Ответить
  • Артем Бабенко
    8
    комментариев
    0
    читателей
    Артем Бабенко
    больше года назад
    едрить вы бестолочи, валите ***** с такими статьями
    -
    -26
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Григорий Романченко
1
комментарий
0
читателей
Полный профиль
Григорий Романченко - Неудивительно, что все хвалят PostMarket, это действительно достойный сервис, недавно стали через них продвигать свой продукт, результаты есть, продажи выросли на 40% и это только начало.
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!