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

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

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

Мы работаем с поисковой оптимизацией интернет-изданий уже три года. В начале 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
#SEOnews14: мы празднуем – вы получаете подарки!
Анна Макарова
361
комментарий
0
читателей
Полный профиль
Анна Макарова - Гость, добрый день! С победителями мы связывались сразу после розыгрыша. Если мы вам не написали, значит, ваш номер не выпал. Но не расстраивайтесь, у нас обязательно будут новые розыгрыши!
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
9
комментариев
0
читателей
Полный профиль
Михаил Мухин - Дожидаться 100 попыток не будем - не дождемся :) Подведем итоги и опубликуем решение 13 Декабря
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Воообще, на самом деле здесь двоякое впечатление от таких аудитов. Конечно, для полного глубокого анализа и подготовки рекомендаций по сайту - нужны доступы к системам аналитики и инструментам вебмастера. Но если оценивать подобные аудиты с точки зрения чистого SEO (которое все больше и больше становится лишь малой частью digital-маркетинга, лишь одним из каналов) - они имеют место быть. Но с оговоркой, что они сделаны с учетом анализа конкурентов/отрасли. Современные инструменты и алгоритмы позволяют делать это маркетологам в автоматическом режиме, и даже давать рекомендации - возможностями машинного обучения уже никого не удивишь. Да, полное перечисление "мифического" списка ошибок, построенного по предикативным правилам, да еще и с учетом устаревших особенностей ПС - это явный признак некачественного аудита. В первую очередь потому, что эти "ошибки" следует рассматривать в качестве рекомендаций от ПС (как и говорится в справочнике вебмастера у Яндекса/Google). Однако если эти данные даются с отсылкой на данные о конкурентах, об отрасли, используются методы ML и Natural language processing для обработки исходных данных, кластеризации запросов, классификации страниц/запросов/сайтов, определения структуры документа - такие отчеты имеют право на существование. Но ключевым моментом является то, что подобные инструменты достаточно сложны в разработке, а значит требуют квалифицированных специалистов для их разработки. Которых просто нет у студий рассылающих подобные "сео отчеты". Подобные отчеты по "ошибках" тоже неплохой источник информации, но лишь на 0 этапе анализа сайта. И в принципе, теоретически, возможно почти полное составление "хороших аудитов" без участия маркетолога, на основе лишь открытых данных сайта/внешних источников, но только при соответствующем применении всех современных возможностей анализа данных и рекомендательных систем. И в любом случае подобный "хороший отчет" требует конечного заключения от эксперта.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Kosta Bankovski
4
комментария
0
читателей
Полный профиль
Kosta Bankovski - Спасибо за приятные слова! Буду и дальше делиться наработками ;)
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Как вывести сайт в ТОП 10 Google в 2019 году
Ирина
8
комментариев
0
читателей
Полный профиль
Ирина - Работают. Как естественные, так и закупные. >Мои сайты в первую очередь заточены на яндекс Соболезную. >Насколько поисковые алгоритмы с гугловскими у него. Разница в 10 лет. Вон в Яше все долбят на ключи, на вхождения и прочий трэш из древностей. А у Гугла, вон почитайте про eat, ymyl Не все понятно но спасибо за ответы. Я так понимаю что с ссылками деть никто точно не знает) Ну это и хорошо вообщем. Самому разбираться как то интересней. Но не всегда. Есть к примеру 2captcha.com/ru и на него 100к ссылок есть. Ну а смысл какой?
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
361
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
107
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
79
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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