Шлем с развязанной CMS (Drupal)

Я создал сайт на CMS (Drupal) с приложениями React. Я использую Helmet для создания метаданных (заголовок / описание) из моих компонентов / дочерних компонентов.

В компонентах я использую этот код:

  <Helmet>
    <title>{...my custom title...}</title>
    <meta name="description" content={...my custom description...} />
  </Helmet>

Если я проанализирую код в Dev Tools Chrome, я вижу, что метаданные обновлены.

Если я проанализирую исходный код страницы, метатады не обновятся. Эти метаданные создаются вне приложения React в разделе HTML. Таким образом, заголовок и описание метаданных сохраняют значения по умолчанию.

Как лучше всего «обновить» метаданные в разделе HTML? Мне нужно обновить только определенные метаданные (заголовок, описание, канонический ...), остальные элементы раздела заголовка генерируются CMS.

Спасибо за рецепты и подсказки.


reactjs react-helmet helmet.js
person user28220    schedule 13.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы путаете код на стороне клиента и код на стороне сервера. если вы не используете SSR (рендеринг на стороне сервера) своих страниц, Helmet будет работать на стороне клиента (с javascript, обновляющим DOM). Поэтому, когда вы просматриваете источник страницы, вы не увидите заголовок и описание из вашей CMS.

Хорошей новостью является то, что сегодня большинство поисковых роботов могут запускать javascript и читать метаданные вашего шлема.

Итак, чтобы ответить на ваш вопрос: вам нужно будет отрендерить вашу реакцию на стороне сервера и гидратировать ее на передней панели, чтобы увидеть вывод шлема в источнике html.

Другое решение - визуализировать на стороне сервера только оболочку страницы (тело заголовка и один блок div с идентификатором для реакции) и управлять разделом <head> вне реакции. Это немного проще, чем реагировать на рендеринг на стороне сервера.

person Tomer Almog    schedule 13.04.2020
comment
Привет Томер, хорошо за твой ответ. Какой самый простой способ обновить метаданные в разделе заголовка (в HTML): использовать Helmet? Или вставить новый компонент в головной раздел? - person user28220; 14.04.2020
comment
Я не думаю, что вы можете внедрить компонент в раздел head, и даже если вы это сделали, он все равно будет на стороне клиента. Таким образом, рендеринг на стороне сервера будет обычным решением. - person Tomer Almog; 14.04.2020
comment
Рендеринг на стороне сервера для меня сбивает с толку. Я не понимаю, как перейти от шлема или заполнить html. У вас есть пример или объяснения, чтобы сделать это? Спасибо. - person user28220; 14.04.2020