react-helmet is a module for managing the DOM document head within React.
react-helmet is a module for managing the DOM document head within React.
Questions tagged [react-helmet]
252 questions
69
votes
6 answers
What is the purpose of react-helmet?
I've created a server-side react app, where it would return html as shown below:
const html = renderToString(A Cool…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Oct 07 '18 at 16:59">asked Oct 07 '18 at 16:59</time>
<a href="../../users/4475995/pbandj" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/4475995.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="PBandJ" />
</a>
<div class="s-user-card--info">
<a href="../../users/4475995/pbandj" class="s-user-card--link">PBandJ</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">2,537</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="21 silver badges">21</li>
<li class="s-award-bling s-award-bling__bronze" title="31 bronze badges">31</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-50193960">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>31</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/50193960/react-helmet-facebook-open-graph" class="question-hyperlink">React Helmet: Facebook Open Graph</a></h3>
<div class="excerpt">So I've got react helmet working on my client-side app to re-render facebook og tags into the head depending on which page is active in the app.
however the facebook debugger and facebook itself don't pick any of this up. am i missing something ? is…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 05 '18 at 20:55">asked May 05 '18 at 20:55</time>
<a href="../../users/1501877/timmy-lee" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1501877.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Timmy Lee" />
</a>
<div class="s-user-card--info">
<a href="../../users/1501877/timmy-lee" class="s-user-card--link">Timmy Lee</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">785</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="11 silver badge">11</li>
<li class="s-award-bling s-award-bling__bronze" title="25 bronze badge">25</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-57859350">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>24</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>4</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/57859350/how-can-i-add-custom-scripts-in-index-html-s-head-part-in-docusaurus-v2" class="question-hyperlink">How can I add custom scripts in index.html's head part in Docusaurus V2?</a></h3>
<div class="excerpt">We are making a website with Docusaurus V2.
In Docusaurus V1, there is a scripts setting in siteConfig.js to cusutimize html's head content. But, I cannot find the corresponding setting in Docusaurus V2.
According to…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
<a href="../../questions/tagged/docusaurus" class="post-tag grid--cell" title="show questions tagged 'docusaurus'" rel="tag">docusaurus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Sep 09 '19 at 18:24">asked Sep 09 '19 at 18:24</time>
<a href="../../users/702977/softtimur" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/702977.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="SoftTimur" />
</a>
<div class="s-user-card--info">
<a href="../../users/702977/softtimur" class="s-user-card--link">SoftTimur</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">5,630</li>
<li class="s-award-bling s-award-bling__gold" title="38 gold badges">38</li>
<li class="s-award-bling s-award-bling__silver" title="140 silver badges">140</li>
<li class="s-award-bling s-award-bling__bronze" title="292 bronze badges">292</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-55901741">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>21</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>4</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/55901741/google-not-showing-react-helmet-title-and-description" class="question-hyperlink">Google Not Showing React-Helmet Title And Description</a></h3>
<div class="excerpt">I'm using react-helmet to give each of my pages a unique title and description for my React application. The title is rendering correctly in the browser tab and the title and description are rendering correctly when I inspect the page using Dev…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/seo" class="post-tag grid--cell" title="show questions tagged 'seo'" rel="tag">seo</a>
<a href="../../questions/tagged/metadata" class="post-tag grid--cell" title="show questions tagged 'metadata'" rel="tag">metadata</a>
<a href="../../questions/tagged/meta-tags" class="post-tag grid--cell" title="show questions tagged 'meta-tags'" rel="tag">meta-tags</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 29 '19 at 10:44">asked Apr 29 '19 at 10:44</time>
<a href="../../users/11217720/will-despard" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/11217720.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Will Despard" />
</a>
<div class="s-user-card--info">
<a href="../../users/11217720/will-despard" class="s-user-card--link">Will Despard</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">447</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="4 silver badge">4</li>
<li class="s-award-bling s-award-bling__bronze" title="17 bronze badge">17</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-61063193">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>16</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/61063193/react-helmet-or-next-head-for-next-js-project" class="question-hyperlink">React helmet or next/head for Next Js project?</a></h3>
<div class="excerpt">I am making a next js application (React SSR), and now I am into implementing the meta tags in head.
So for now I have used next/head in _app.tsx file like,
import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a>
<a href="../../questions/tagged/react-helmet" class="post-tag grid--cell" title="show questions tagged 'react-helmet'" rel="tag">react-helmet</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card__deleted">
<time class="s-user-card--time" datetime="asked Apr 06 '20 at 15:23">asked Apr 06 '20 at 15:23</time>
<div class="s-avatar s-avatar__32 s-user-card--avatar">
</div>
<div class="s-user-card--info">user12856847</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-44073960">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>15</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>4</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/44073960/unit-testing-react-helmet-code" class="question-hyperlink">Unit testing react-helmet code</a></h3>
<div class="excerpt">I am using react-helmet to add elements to head element.
<Helmet>
<title>title
And I am trying to write unit test like…
emphaticsunshine
- 3,725
- 5
- 32
- 42
14
votes
4 answers
Adding favicon to
I was trying to add a favicon in the
UWGOOSE
- 833
- 3
- 11
- 20
12
votes
3 answers
React Helmet not updating meta tags
I have my index.html page in react project as following:
Bucard | Digital Business Card
Naor
- 337
- 1
- 3
- 11
11
votes
1 answer
Gatsby react-helmet not server-side rendering
I'm trying to load my react-helmet tags server-side so that these are injected into the static html file at build time. This would allow things like Facebook to take the source file directly and use the appropriate meta-tags.
After configuring my…
Appa
- 457
- 6
- 13
9
votes
2 answers
React Helmet not updating meta title tag
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…
LinusGeffarth
- 27,197
- 29
- 120
- 174
9
votes
1 answer
react-helmet mixing fields during renderStatic
I'm running server-side render of the React application. I'm using express for this purposes. The whole server-side render code looks like this:
import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express…
Limbo
- 2,123
- 21
- 41
7
votes
1 answer
Using Gatsby.js, how do I add a route-specific og:image meta tag?
I have already set up a social sharing image for my root route in React Helmet with the following code:
I have a separate route, or…
Kyle Fujisawa
- 71
- 1
- 2
6
votes
0 answers
How to set dynamic metatags in ReactJS to get nice share links?
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages…
André Pereira
- 61
- 2
6
votes
0 answers
Dynamic link previews with React helmet in ReactJS
Does anyone know if there's a possibility to set truly dynamic meta tags per page in a React App without Server Side Rendering?
In a project that I am building I have some pages with a route like / article / {Id} and I would like to define dynamic…
imy sunshine
- 59
- 1
- 2
6
votes
0 answers
React SSR two pass rendering with renderToString and renderToNodeStream
I'm trying to do SSR with ReactDOMServer.renderToNodeStream(element) but just wanted to know if there would be any problem with using both ReactDOMServer.renderToString(element) and ReactDOMServer.renderToNodeStream(element) at each request?
What I…
S. Luong
- 116
- 5