Индексация AJAX в БЭМ

Mellanore commented 8 years ago

А есть какой-то хороших способ без танцев с бубном подготовить БЭМ-фулстек проект с Express API на бэкэнде к индексированию поисковиками? (https://yandex.ru/support/webmaster/robot-workings/ajax-indexing.xml)

voischev commented 8 years ago

@Mellanore А в чем сейчас проблема с индексированием? По умолчанию стек изоморфный (употребляя модные словечки). Кажется никаких танцев не должно быть

Mellanore commented 8 years ago

Хм.. Ну вот например, когда я делаю в js блока так:

BEMDOM.append( this.elem("element_name"), "hello, element" );

Я не вижу в html'е, который уходит на клиент фразы "hello, element". Поисковик, полагаю, тоже.

Guria commented 8 years ago

@Mellanore Это справедливо для любого JS меняющего DOM на клиенте. Если вы хотите, чтобы это увидел поисковик - делайте тоже самое на сервере. Собственно так делают любые изоморфные/универсальные фреймворки.

По вашей ссылке рекомендации как добиться индексации, когда код формирующий контент не может быть выполнен на сервере: т.е. необходимо подготовить и сделать доступными статичные страницы специально для поисковика. Обычно это достигается запуском сайта, например, в Phantom и сохранением сформированного клиентским кодом в html.

С изоморфными стеками в этом подходе нет никакого смысла и необходимости.

Mellanore commented 8 years ago

Понял, спасибо. А где-нибудь можно почитать или посмотреть примеры про то как в БЭМ (использую https://github.com/bem/project-stub на enb и bemhtml) выполнять код формирующий контент на сервере?

Гуглил, но ничего по теме не нашел :(

Guria commented 8 years ago

Ну так в project-stub как раз всё на сервере исполняется. Только надо иметь ввиду, что это не production сервер, а подобие верстака разработчика.

Есть ещё такие примеры:

https://github.com/apsavin/bnsf - изоморфный фреймворк от @apsavin
https://github.com/express-bem/express-bem - middleware для express
~~https://github.com/vithar/bem.info~~ (#624) статичный сайт с серверной шаблонизацией

voischev commented 8 years ago

@Guria Кажется можно все проще. При одном условии. Если при шаблонизации кусков кода на клиенте меняется и URL то все уже готово. Нужно просто по этому адресу шаблонизировать этот запрос на сервере если клиент заходит первый раз, далее все шаблонизируется на клиенте. Таким образом все страницы у нас попадут в поисковик.

Еще добавлю мою сборку для начала работы с express сервером + bemtree

express-bemtree-project-stub

Guria commented 8 years ago

@voischev кажется именно этот подход и принято называть изоморфностью. Я говорил про тоже самое. А вариант с фантомом это костыль специльно для поисковиков если не получается рендерить шаблоны на сервере.

voischev commented 8 years ago

@Guria не надо нам костылей :)

Guria commented 8 years ago

@voischev я и не предлагал. лишь объяснял про что ссылка была. Для БЭМ стека этот костыль не актуален.

Guria commented 8 years ago

@Mellanore Ваше приложение на сервере получает данные из API, самостоятельно или посредством bemtree формирует bemjson. Передаёт полученный bemjson в bemhtml.apply(bemjson) и на выходе получает html строку. отдаёт html браузеру.

Guria commented 8 years ago

project-stub по-умолчанию преобразует bemjson в html посредством bemhtml на сервере.

Guria commented 8 years ago

К слову если речь именно про i-bem.js

BEMDOM.append(
this.elem("element_name"),
"hello, element"
);

То да, он выполняется только на клиенте. Но не надо с его помощью генерировать контент страницы.

Guria commented 8 years ago

Схематично:

var bemtree = require('./compiled/bemtree-templates.js');
var bemhtml = require('./compiled/bemhtml-templates.js');

var data = {
  greeting: "hello, bem"
}

// ...
  bemtree.apply(data).then(function(bemjson){
    // bemjson = { block: 'page', content: { block: 'greeting', content: "hello, bem" } }
    var html = bemhtml.apply(bemjson);
    // html = '<html><body class="page"><h1 class="greeting">hello, bem</h1></body></html>'
    req.send(html); // отдали строку браузеру
  })
// ...

vithar commented 8 years ago

bem.info мой зря приводите, там чистая статика генерируется и пока не предполагается ничего про express.

Guria commented 8 years ago

@vithar fixed

bem-site / bem-forum-content-ru

Индексация AJAX в БЭМ #637