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

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

Россия +7 (495) 139-20-33
Шрифт:
5 20392
Подпишитесь на нас в Telegram

Мы работаем с поисковой оптимизацией интернет-изданий уже три года. В начале 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. Константин Носов про некоторые подводные камнинекоторые подводные камни.
  2. Презентация Рамазана Миндубаева «Продвижение сайтов на базе Single Page Application».
  3. Дмитрий @mrded про переход на SPA c Drupal и откат обратно.
  4. Список сайтов, использующих фреймворк React.
Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
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
Альманах фатальных ошибок b2b-сайта: как владельцы бизнеса обрекают сайты на бесславное существование. Часть первая
Сергей Ерофеев
3
комментария
0
читателей
Полный профиль
Сергей Ерофеев - Спасибо за комментарий! Вы правы, если за CMS следит заинтересованный профессионал - риски минимальны. Но мы же с вами понимаем, что: а) Не каждый разработчик делает все, как "для себя". б) После создания сайта разработчик редко остается на проекте в) Часто разработчик не является маркетологом. В этом случае принцип "функционал работает и этого достаточно" может быть на первом месте. Мы тоже видели большое количество хороших и качественных проектов на бесплатных CMS, но проблемных проектов мы видели сильно больше. Просто статистика.
Белые и серые методы продвижения. Тренды 2023
sarges
2
комментария
0
читателей
Полный профиль
sarges - Нужно учитывать и тот факт, что со временем методы продвижения меняются и необходимо подстраиваться под новые реалии. Посоветую заглянуть на zenlink.ru/blog/kak-izmenilsja-internet-marketing-za-10-let и почитать статью, там рассказывается о том, как изменился интернет-маркетинг за последние 10 лет, какие сейчас тенденции и какие прогнозы в этой сфере.
Почему сайтам нужно переезжать с конструкторов на полноценные CMS
Seodm.ru
3
комментария
0
читателей
Полный профиль
Seodm.ru - Ааа по мне, сам seo специалист, вероятность внедрения необходимого контента на тильда того же блока этапом работы или преимуществ, намного выше чем на движке. А что тильда что движок малый бизнес норм продвигается особо супер разработки не требуется
Как мы увеличили для клиента трафик из поиска в 7 раз. Кейс
Кирилл Половников
2
комментария
0
читателей
Полный профиль
Кирилл Половников - Оба этих статуса (редирект и малополезная) преобладали в качестве проблем с индексацией. Помогла работа с .htaccess (в нем были ошибки и его чистили), работа над корректировкой редиректов, каноникалами и прочими техническими ошибками. Нельзя сказать, что только редиректы были ключевым препятствием.
Как показывать рекламу посетителям сайтов конкурентов
Павел
2
комментария
0
читателей
Полный профиль
Павел - Спасибо за комментарий. Гипотеза была в том, что с указанными счетчиками конкурентов показы будут не просто похожей аудитории их сайтов (как при рекламе по доменам), а именно на аудиторию которую Яндекс для себя разметил как целевая дл сайтов конкурентов. Важно, это гипотеза. А про белые нитки, как говорится, доверяй, но проверяй))
Как автоматизировать мессенджеры для бизнеса в CRM-системе
Алиналина
1
комментарий
0
читателей
Полный профиль
Алиналина - Кстати да. Но мы зарегались, CRMка реально интересная
Чек-лист: как настроить рекламу в Яндекс Директе и избежать ошибок
Сергей Ильин
2
комментария
0
читателей
Полный профиль
Сергей Ильин - я ваще не туда написал
Кейс MediaNation: увеличили еженедельный трафик автомобильной компании на 50% за год и вышли в топ поиска по 300 запросам
Игорь Скляр
1
комментарий
0
читателей
Полный профиль
Игорь Скляр - Действительно, изначально рост был именно по информационным запросам. Но рост позиций и трафика по информационным запросам положительно повлиял и на связанные позиции по коммерческим запросам и сдвинул видимость с мёртвой точки
Как продвигать интернет-магазин в поисковой выдаче, если она забита маркетплейсами
Олег
1
комментарий
0
читателей
Полный профиль
Олег - Так как все-таки продвигать?)
Как попасть в топ-10 Яндекса и Google при продвижении сайта на регион Молдовы
Гость
9
комментариев
0
читателей
Полный профиль
Гость - "В первое время наши работы продолжали давать результат (сайт несколько месяцев рос), а потом начал постепенно терять позиции. По этой причине заказчик решил возобновить сотрудничество и вернулся в июле 2022. Мы еще ведем работы по восстановлению утраченных результатов." Хитрожопый клиент.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
116
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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