React Helmet – SEO for ReactJS Apps
While React is often lauded for making front-end development more efficient, this popular library can be problematic for search engines if we do not set up the website properly.
Why is React SEO poor?
React Helmet: React Helmet reusable React component will manage all of your changes to the document head.
Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner-friendly.
- Supports all valid head tags: title, base, meta, link, script, noscript, and style.
- Supports attributes for body, html and title tags.
- Supports server-side rendering.
- Nested components override duplicate head changes (Components further down the tree can override values provided to the Helmet component on a higher level).
- Duplicate head changes are preserved when specified in the same component (support for tags like “apple-touch-icon”).
- Callback for tracking DOM changes.
Installation and Usage :
Step 1: Creating React Application And Installing Module:
npx create-react-app helmet
Step 2: After creating your project folder i.e.react-helmet, move to it using the following command:
Step 3: We can proceed to add helmet.
npm i react-helmet
Project Structure: It will look like the following.
Step 4: Add React-Router-Dom for Routing
npm i react-router-dom
Note: Here, App is our default component where we have written our code.
Step 5: Create 2 files in the same directory: Lyrics.js, and Audio.js
Now the title would be changed to Music Website and you can check the description from developer tools
Step 6: Now do the same in the rest of the routes since the Helmet Component in the Child Component will override the Helmet Component from the Parent Component. Add title and meta tag related to Lyrics.js. There are 2 child components of the Parent Component App and with the help of the react-helmet. We can insert multiple <head> tags and <meta> tags with the same attributes (name and content) and because of this the SEO is increased of react websites.
Now if someone on the internet types anything related to lyrics or audio your website will get prioritized first since there are title and meta tags(which tell the description about the page). If someone ends up in the child component,react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the child page (here lyrics.js/audio.js). Add title and meta tag related to Audio.js (Same as Lyrics.js).
Step 7: Now add keywords inside the meta tag which are very relevant in the Helmet Component which increases SEO. Your SEO keywords are the keywords and phrases in your web content that make it possible for people to find your site via search engines.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/ and you will see a different title and description for each route.
Please Login to comment...