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

Автор работаем с поисковой оптимизацией интернет-изданий уже три возраст. В начале 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 за убавка времени переходов между страницами, нагрузки на станок и сервер.

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

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

Нежели отличаются сайты на 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%.

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

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

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

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

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

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

Нашли вывод

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

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

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

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

Советы по продвижению сайта бери 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.

Источник: www.seonews.ru