Я устанавливал заголовки страниц SPA в react.js следующим образом:
document.title = {some title}
... до сих пор, и это работало нормально. Теперь я также хотел обновить тег metatitle, поэтому я установил реактивный шлем.
В моем компоненте я импортировал Helmet из библиотеки и сделал:
render() {
{/* ... */}
return (
<div>
<Helmet>
<title>{docTitle}</title>
<meta name = "title" content = {docTitle} />
</Helmet>
{/* ... */}
</div>
)
}
При открытии страницы я увидел, что заголовок документа правильно обновлен, но при проверке элементов в браузере я заметил, что <meta name = "title" не обновляется, а несколькими строками ниже обновляется <title>является.
Что я здесь делаю неправильно?
🤔 А знаете ли вы, что...
React обеспечивает высокую производительность благодаря эффективной обработке изменений DOM.
В моем коде <head> я добавил следующий тег в файл index.html:
<meta name = "title" content = "Default Title">
При обновлении этого метатега с помощью реактивного шлема я все еще видел, что этот тег не обновляется в файле index.html при проверке элементов в моем браузере.
Однако чего я не заметил, так это того, что в самом низу <head> Helmet, по-видимому, добавил этот тег:
<meta name = "title" content = "Default Title" data-react-helmet = "true">
Я предполагаю (и надеюсь), что это будет просканировано ботами поисковых систем.
Обновлять:
По прошествии некоторого времени я могу убедиться, что Facebook и Google правильно читают тег заголовка шлема.
Это не задокументировано в файле readme, но вы должны добавить data-react-helmet = "true" к своим метатегам, которые вы хотите заменить на react-helmet. Например, в вашем index.html ваш метатег должен быть обновлен, чтобы он выглядел так:
<meta name = "title" content = "Default Title" data-react-helmet = "true">
Это должно быть в ридми, я не знаю, почему этого нет, и я видел комментарий, что кто-то уже открыл PR, чтобы добавить это.