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

Россия+7 (495) 960-65-87
Шрифт:
5 8679

Мы работаем с поисковой оптимизацией интернет-изданий уже три года. В начале 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 и метатег в коде динамической страницы, чтобы сообщить боту о наличии HTML-версии страницы. Чтобы проиндексировать http://site1.ru/example/, боту нужна страница http://site1.ru/example/?_escaped_fragment_= с идентичным содержимым.

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

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

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

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

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

На 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/" >< /link >.
  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.
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Lan Thu
    1
    комментарий
    0
    читателей
    Lan Thu
    6 месяцев назад
    Thanks for sharing, nice post! Post really provice useful information! anthaison.vn/sp/may-dua-vong-tu-dong-ts/
    -
    0
    +
    Ответить
  • Киров
    6
    комментариев
    0
    читателей
    Киров
    6 месяцев назад
    Да это мы еще весной откатали результат по радовал. Не так топорно конечно но сделали наподобие
    -
    -9
    +
    Ответить
  • Сергей
    1
    комментарий
    0
    читателей
    Сергей
    6 месяцев назад
    Аня, спасибо за статью! Хоть и накосячили — смогли исправится. Молодцы!
    -
    6
    +
    Ответить
  • Артем Бабенко
    4
    комментария
    0
    читателей
    Артем Бабенко
    6 месяцев назад
    едрить вы бестолочи, валите ***** с такими статьями
    -
    -25
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
Анна Макарова
335
комментариев
0
читателей
Полный профиль
Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
32 инструмента в помощь SEO-специалисту
luthorscorploanfirm
2
комментария
0
читателей
Полный профиль
luthorscorploanfirm - Я - г-н Марк Джо из корпорации corp, мы являемся законной, зарегистрированной и гарантированной кредитной компанией, мы предоставляем 3% -ые кредиты частным лицам, компаниям, государственным учреждениям и деловым организациям и людям всех родов. Свободные кредиты - это решение всех ваших финансовых проблем. свяжитесь с нами по электронной почте: mjoe0123@gmail.com
SEO глазами клиентов 2018
Гость
1
комментарий
0
читателей
Полный профиль
Гость - То есть *** пойми кто подался заявками и в итоге рейтинг должен называться seo глазами клиентов *** пойми каких компаний. Молодцы!
Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
Александр Сова
1
комментарий
0
читателей
Полный профиль
Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Кирилл Щербаков
3
комментария
0
читателей
Полный профиль
Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
Два идеальных способа разориться на старте интернет-магазина
Стас
4
комментария
0
читателей
Полный профиль
Стас - Seonews в последнее время такую чушь несет! Где вы таких афторов находите? Статья ничего не стоит и несет чушь! Кто хоть немного понимает в этом так вам и скажет, и такие де комментаторы горе-сеошники, просто смешно читать, вы хоть модерируете ваши статьи или просто для воды на сайте?! Бред сивой кобылы эта статья до самой последней точки!!!
Эксперимент: как уникальность контента влияет на продвижение сайта
Ilia Nazmutdinov
2
комментария
0
читателей
Полный профиль
Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
Яндекс перестал индексировать сайты, созданные на Wix
Константин Даткунас
3
комментария
0
читателей
Полный профиль
Константин Даткунас - Было бы интересно посмотреть саму выборку из 10 000 и методику анализа.
Расчет трафика из поисковых систем по брендовым и небрендовым запросам
Дарья Калинская
238
комментариев
0
читателей
Полный профиль
Дарья Калинская - А вот и статья :) www.seonews.ru/analytics/raschet-trafika-po-nebrendovym-zaprosam-pri-pomoshchi-r/
Как мы разработали и вывели в ТОП сайт курсов рисования
Иван Стороженко
25
комментариев
0
читателей
Полный профиль
Иван Стороженко - Добрый день. 1)Чаще всего основная проблема заключается, в согласовании с клиентом добавляемого контента и то как он будет отображаться. На данном сайте фото и услуги конечно предоставлял клиент, все остальное уже делали мы. 2)Да в принципе, когда есть команда и понимание, что нужно делать, все идет быстро (опять же основная заминка идет на согласовании с клиентом) 3)Смысла делать новый в данном случает нет. В принципе доделывался полноценный сайт. 4)Когда клиент уже не предоставляет информацию, приходится искать у конкурентов (например с других стран или регионов). Но чаще всего клиент, хоть что-то "подкидывает".
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
335
Комментариев
262
Комментариев
238
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
87
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
57
Комментариев
55
Комментариев
54

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