Для работы SEO, как в зависимости от страницы(rout) присваивать различные link в head когда мы уже собрали наше приложение?

Вопрос-ответ Nodejs
1

Приложение написано на ReactJS, сборщик webpack.
Для работы SEO необходимо менять link, description в head.

Как это вижу, у меня есть HTML написанный на ejs, он для всех страниц(url=> rout) одинаковый, в нем есть div root в который reactJS(routing) импорт разные страницы.
Без SSR это сделать просто, но вот как это сделать когда мы собрали наше приложение ?

Пример:
Страница signIn в head set <link rel='test>

Даже нет никаких мыслей в голове как это сделать.
Почитал про ejs он не решит эту задача.
Если есть опыт подскажите, пожалуйста, как это можно сделать

2
  1. Back-end на Node.js?
  2. Какой движок? Express.js?
  3. Как Вы рендерите шаблоны *.ejs?
  4. Отдаете каждую страницу отдельно или у Вас SPA?
3

Спасибо за желание помочь!

  1. Back-end на Node.js?
    Нет, erlang.

  2. Какой движок? Express.js?
    Нет движка(фреймворка)

  3. Как Вы рендерите шаблоны *.ejs ?
    C помощью webpack, во время сборки ‘production’ используя плагин HtmlWebpackPlugin вот его настройка;
    https://jsfiddle.net/Polyakh/7vw1p5hf/

  4. Да это SPA, роутинг на клиенте.

4

То есть я правильно понимаю, что на момент запуска приложения у Вас уже собранный Webpack’ом шаблон и он один? И Вы отдаете этот index.ejs по любому route, а React уже на клиенте разбирается с routing?

Если да, то:

  1. Честным вариантом было бы пробрасывать в шаблон context с нужными данными и обрабатывать их там (но при такой архитектуре, как сейчас у Вас, это не будет удобно);
  2. Я не очень знаком с React, но помню, что в Angular 1.x можно было корневым элементом указать не <div id="app"></div>, а <body></body>. И таким образом “рулить” большим количеством элементов на странице.

Где у Вас хранятся данные для SEO? В БД?

1 лайк
5

Хотел бы немного дополнить ваш ответ:

  1. Полностью согласен с вашим предложенным честным вариантом, одно но, при такой архитектуре как у вас это будет не удобно возможно
  2. React позволяет рендерить контент в любые дом элемент, хоть это head или сам html, последнее не советую делать :) Для этого варианта понадобиться SSR
6

На самом деле я тоже сперва хотел написать невозможно, но потом нашел возможность писать так:

new HtmlWebpackPlugin({
    SEO_content: {
        index: 'Some SEO text for main page'
    },
    template: './index.ejs',
    filename: '../index.html'
})

и в шаблоне получить:

<meta name="description" content="<%= htmlWebpackPlugin.options.SEO_content.index %>">

Этот пример демонстрирует, что ничего невозможного нет, но выглядит настолько ужасно, что я прошу вас срочно забыть всё, что только что увидели. Лучше переписать архитектуру, которая честно отдавала бы контекст в шаблон.

1 лайк
7

Спасибо вам, за помощь!

8

да, статический только head, приложение строиться в

, там уже работает клинский роутинг.