I've been setting my react.js SPA's page titles by doing:
document.title = {some title}
...so far and it worked fine. Now, I also wanted to update the meta title tag and so I installed react-helmet.
In my component, I've imported Helmet from the library and did:
render() {
{/* ... */}
return (
<div>
<Helmet>
<title>{docTitle}</title>
<meta name="title" content={docTitle} />
</Helmet>
{/* ... */}
</div>
)
}
When opening the page, I saw that the document title is properly updated, but when inspecting the elements in the browser, I noticed that <meta name="title" is not being updated, while a few lines down, <title> is updated.
What am I doing wrong here?
In my <head> code, I added the following tag in the index.html file:
<meta name="title" content="Default Title">
When updating that meta tag using react-helmet, I still saw that tag un-updated in the index.html file when inspecting the elements in my browser.
However, what I did not notice, is that at the very bottom of the <head>, Helmet apparently added this tag instead:
<meta name="title" content="Default Title" data-react-helmet="true">
I'm guessing (and hoping) that this will be crawled by search engine bots.
Update:
After some time has passed, I can verify that Facebook and Google properly read helmet's title tag.