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

Форум /

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

9 years ago

voischev

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

9 years ago

Mellanore

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

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

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

9 years ago

Guria

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

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

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

9 years ago

Mellanore

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

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

9 years ago

Guria

Ну так в 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) статичный сайт с серверной шаблонизацией

9 years ago

voischev

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

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

express-bemtree-project-stub

9 years ago

Guria

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

9 years ago

voischev

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

9 years ago

Guria

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

9 years ago

Guria

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

9 years ago

Guria

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

9 years ago

Guria

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

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

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

9 years ago

Guria

Схематично:

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); // отдали строку браузеру
  })
// ...

9 years ago

vithar

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

9 years ago

Guria

@vithar fixed

Чтобы оставлять комментарии, необходимо авторизоваться.