0

i have built a site on a CMS (Drupal) with React apps. I use Helmet to generate metadatas (title / description) from my components/child components.

In the components I use this code:

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

If I analyse the code in the Dev Tools of Chrome, I see that the metadatas are updated.

If I analyse the source code of the page, the metatadas aren't updated. These metadatas, are generated outside the React app, in a HTML section. So, the metadatas title and description keep the default values.

What is the good method to "update" the metadatas in the HTML section? I need to update only specific metadatas (title, description, canonical...), the others elements of the head section are generated by the CMS.

Thanks for yours recipes and helps.

user28220
  • 79
  • 8

1 Answers1

0

You are confusing client-side code and server-side code. unless you SSR(server-side render) your pages, Helmet will run client-side (with javascript updating the DOM). So when you view the source of the page you will not see the title and description from your CMS.

The good news is that most crawlers today can run javascript and read your helmet metadata.

So to answer your question: you will need to server-side render your react and hydrate it on the front end to see the helmet output on the source of the html.

Another solution is to server-side render just the shell of the page (head body and one div with id for react) and control the <head> section outside of react. It is a bit easier than server-side rendering react.

Tomer Almog
  • 3,604
  • 3
  • 30
  • 36
  • Hi Tomer, ok for your answer. What is the simplest method to update metadatas in the head section (in HTML) : use Helmet ? Or inject a new component in the head section? – user28220 Apr 13 '20 at 21:16
  • I don't think you can inject a component to the head section, and even if you did, it will still be client-side. So server-side render will be the common solution. – Tomer Almog Apr 13 '20 at 21:19
  • The server-side render is the confused point for me. I don't see how to proceed from the Helmet or to populate the html. Have you an example or explanations to make this? Thanks. – user28220 Apr 13 '20 at 21:26