Very Noob Question Here.
I created my first SPA react app. The navigation is menu items in a header that scroll to anchor tags. Each section is a Component. So my structure is like so
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Welcome />
<About />
<Component1 />
<Component2 />
</div>
);
}
}
Is it useless to use react helmet in each of my components? I think only the Helmet in the last component (component2) would take effect right? (I'm trying to learn how to make my spa google friendly)
Alan Plum
Donkey Kong says Trans Rights.
Since every 'pages' are inside a single page, putting the helmet in each component isn't a good idea. Because only the last component's meta tags will be set to browser.
Instead on clicking anchor links or subscribing to scroll position, change the helmet data. So that when user scroll to each section, it's title will be shown to the browser
That's from a user perspective. For search engines, they don't 'scroll' your website. So the helmet data on the initial load will be taken.
Also, read my post coffeencoding.com/prerender-react-app-for-seo-wit…
Hey there! It looks like you are using React. You should mount <Helmet /> in each of your components that are mapped to a route. This way when a particular route is active, the necessary SEO details like title, meta tags etc load up. Does that help?
It depends. The main use of react helmet (not to be confused with express helmet for node.js) is server-side rendering. Even in an SPA you may want to do server-side rendering, in which case helmet will likely be useful.
But if you're not doing any SSR, there's no point in using helmet. You don't want to render into the html
<head>directly, instead you probably want to generate<style>elements when modifying CSS at runtime (e.g. using a library likestyled-componentswhich does this automatically) or you want to access thedocument.titledirectly. Everything else can likely be determined statically and added to your HTML before it is served to the browser.Helmet is also useful for dealing with meta tags used by social networks and search engine crawlers (i.e. SEO) but there's no guarantee those will reliably run the entire application before looking for these tags, so I wouldn't worry too much about this until you need server-side rendering.