Как индексируется в поисковиках one page app сайты?

Question

[Кирилл Островский]

Как индексируется в поисковиках one page app сайты?
Есть ли с этим какие-то проблемы или предпочтения поисковиков?

Answer 1

[Антон Измайлов]

Просто для этого дела нужен server-side rendering.
Большинство приложений SPA делаются сразу изоморфными, так что копайте в эту сторону.

Answer 2

[Дмитрий Беляев]

Дополню ответ выше пояснениями и примерами
Сервер для любой страницы должен уметь присылать ответ как в виде готовой html так и в виде данных для генерации данного html на клиенте, соответственно понадобится шаблонизатор способный работать как на клиенте, так и на сервере.
Такой сайт спокойно смогут просматривать поисковики, а так же браузеры с отключенным javascript, а когда все норм (js работает) мы получили готовую страницу при первом запросе, а дальше работаем по принципу SPA для последующих переходов между страницами.
Второй важный момент, поисковики ищут внутренние страницы сайта переходя по ссылкам <a href="/page2">Page 2</a>. Соответственно наше SPA должен запускать свой роутинг перехватывая клики по ссылкам и основываясь на атрибуте href кликнутой ссылки
Третий момент, придется позаботится о historyAPI для удобства пользователя.

Ну и на последок, как я это все реализовал у себя на сайте
У меня есть пачка шаблонов описывающих содержимое страниц, они работают как на сервере так и на клиенте
Есть один базовый шаблон, задающий структуру html документа, он работает только на сервере.
По запросу определенной страницы, сервер собирает из шаблонов полноценный html и отдает его браузеру, вот так: https://d-belyaev.ru/
Браузер ищет все теги a на странице и вешает на них обработчик click:

function render(node) {
    var links = node.getElementsByTagName('a');
    for(let i = links.length; i--;) {
        links[i].addEventListener('click', doLinkClick);
    }
}

function doLinkClick(event) {
    var href = event.target.getAttribute('href');
    if(!href.startsWith('/')) return true;
    event.preventDefault();
    router(href);
}

Роутер по данному href отправляет ajax запрос на сервер, дописывая к нему ?json
На что сервер уже отвечает по другому: https://d-belyaev.ru/?json
А реализовано это все вот таким роутом на сервере:

function indexRoute(request) {
    var pageData = {
        template : 'page-index',
        activeMenuIndex : 0
    };
    if(request.url.query === 'json') {
        request.json(pageData);
    } else {
        request.html(baseTemplate(pageData));
    }
}

Правда в нем у меня пока не хватает обработки для 304 статуса (страница в кэше браузера), так как руки пока не дошли

Comments

[Сергей Савостин]

Ну, у Вас не one page app, а просто one page... А как поступать, если, например, данные сервером отдаются в json, с хитрыми сортировками, параметрами и пр.?

[Дмитрий Беляев]

Сергей Савостин: должна быть сортировка по дефолту, пагинацию можно отобразить в url, а насчет фильтров - гугл вполне адекватно парсит формы вида <form role="search" action="/mypage">

[Кот Учёный]

Дмитрий Беляев: в большинстве случаев каталоги и фильтры можно не индексировать, а вместо этого генерировать sitemap с перечнем конечных сущностей (страниц, статей в бложике там, товаров в магазине и т.д.). Всё равно, поисковикам нужен уникальный контент, и делать пререндер, чтобы запихивать им в индекс списки — это напрасные усилия.

[Дмитрий Беляев]

Кот Учёный: sitemap бесспорно нужен, но sitemap не расскажет поисковику о содержимом страниц, особенно если оно динамическое. А насчет пререндера, у меня лично это проблем не вызывает, использую handlebars шаблоны как на сервере (node.js) так и на клиенте. Сервер получает объект с данными из БД и ему по сути все равно, как сериализовать эти данные, в json или в html
Разница лишь в том, что на сервере это все просто оборачивается в еще один шаблон, а на клиенте происходит манипуляции с dom

[Кот Учёный]

Дмитрий Беляев: Вы меня не поняли. Я говорил о том, что каталоги индексировать не нужно, а достаточно ограничиться пререндером полезного контента и sitemap.

[Дмитрий Беляев]

Кот Учёный: тут я с Вами, в принципе, согласен