Россия+7 (495) 960-65-87

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

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

Мы работаем с поисковой оптимизацией интернет-изданий уже три года. В начале 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.
(Нет голосов)
Читайте нас в 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
Сколько ссылок помогут продвинуть молодой сайт
Павел Андрейчук
41
комментарий
0
читателей
Полный профиль
Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Никита Кудрин
1
комментарий
0
читателей
Полный профиль
Никита Кудрин - Все понимаю, кроме того как сделать что бы наименования показателей и параметров не менялись на англоязычные при выборе источника.
Сайт на WordPress: за и против
Мира Смурков
1
комментарий
0
читателей
Полный профиль
Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
Обзор популярных CMS: плюсы и минусы
Андрей Литвиненко
2
комментария
0
читателей
Полный профиль
Андрей Литвиненко - + там где нужно прописать каноникал, там где нужно поставить мета тег ноиндекс (т.к. Гугл не всегда следует правилам robots.txt) ну и то что выше, к техническим сео возможнлстям можно еще отнести легкое и хотя бы полуавтоматическое добавление микроразметки по сайту, увы "из коробки" такого функционала нет ни в одной cms, все на допиливаниях
Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
Рамблер
1
комментарий
0
читателей
Полный профиль
Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
8 методик в SEO, от которых давно пора отказаться
Евгений Сметанин
12
комментариев
0
читателей
Полный профиль
Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
aashutosh
1
комментарий
0
читателей
Полный профиль
aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
Как построить качественный ссылочный профиль на основе конкурентов
Ирина
5
комментариев
0
читателей
Полный профиль
Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
6 причин, почему нет позиций и трафика
Артур Латыпов
0
комментариев
0
читателей
Полный профиль
Артур Латыпов - Леонид, да 3 пункта повторяется, согласен. Но сильно актуальны и сейчас, смотрим на сайты, приходящие на SEO, которые ранее продвигались, практически на всех можно что из 6 пунктов найти, исправить и ситуация улучшиться оперативно.
Google назвал три главных SEO-фактора
Павел Андрейчук
41
комментарий
0
читателей
Полный профиль
Павел Андрейчук - Я бы не стал утверждать что это так. У меня есть ресурс где ссылок.. ну я не знаю, полтинник может быть, вручную проставленные года за 2 и позиции хорошие по могим запросам именно в гугле, в то время как в Яндексе позиции ниже. Хотя конечно с ссылками позиции были бы лучше, наверное, но владелец увы не выделяет бюджет на ссылки.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
346
Комментариев
262
Комментариев
247
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
104
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
63
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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