Prerequisite: Search Engine Optimization
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 gives you a SPA (Single Page Application) that requires Javascript to show the content on the page. The problem is that the Google crawl bot, that scans all the pages on the internet, isn’t as good as understanding a page with javascript since the index.html returns a blank HTML page at first and according to routing changes the contents of the page compared with a page that consists of regular HTML-code.
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.
Features:
- 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:
cd helmet
Step 3: We can proceed to add helmet.
npm i react-helmet
Project Structure: It will look like the following.
Project Structure
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
Lyrics.js
import React from 'react';const Lyrics = () => ( <div> <h2>Lyrics</h2> </div>);export default Lyrics; |
Audio.js
import React from 'react';const Audio = () => ( <div> <h2>Audio</h2> </div>);export default Audio; |
App.js
import React from "react";import { Helmet } from "react-helmet";import { BrowserRouter as Router, Route, Link } from "react-router-dom";import Audio from "./Audio";import Lyrics from "./Lyrics";const App = () => ( <Router> <Helmet> <title>Music Website</title> <meta name="description" content="Get stats about every music from every movie" /> <meta name="keywords" content="Music, Audio, Lyrics" /> </Helmet> <div> <ul> <li> <Link to="/Audio">Audio</Link> </li> <li> <Link to="/Lyrics">Lyrics</Link> </li> </ul> <hr /> <Route path="/Lyrics" component={Lyrics} /> <Route path="/Audio" component={Audio} /> </div> </Router> )export default App ; |
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.
Lyrics.js
import React from 'react';import { Helmet } from "react-helmet";const Lyrics = () => ( <div> <Helmet> <title>Music Lyrics</title> <meta name="description" content="Get lyrics of every music for free" /> </Helmet> <h2>Lyrics</h2> </div>);export default Lyrics; |
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).
Audio.js
import React from 'react';import { Helmet } from "react-helmet";const Audio = () => ( <div> <Helmet> <title>Music Audio</title> <meta name="description" content="Get audio of every music for free" /> </Helmet> <h2>Audio</h2> </div>);export default Audio; |
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.
Complete Code:
App.js
import React from "react";import { Helmet } from "react-helmet";import { BrowserRouter as Router, Route, Link } from "react-router-dom";import Audio from "./Audio";import Lyrics from "./Lyrics";const App = () => ( <Router> <Helmet> <title>Music Website</title> <meta name="description" content="Get stats about every music from every movie" /> <meta name="keywords" content="Music, Audio, Lyrics" /> </Helmet> <div> <ul> <li> <Link to="/Audio">Audio</Link> </li> <li> <Link to="/Lyrics">Lyrics</Link> </li> </ul> <hr /> <Route path="/Lyrics" component={Lyrics} /> <Route path="/Audio" component={Audio} /> </div> </Router>)export default App; |
Lyrics.js
import React from 'react';import { Helmet } from "react-helmet";const Lyrics = () => ( <div> <Helmet> <title>Music Lyrics</title> <meta name="description" content="Get lyrics of every music for free" /> <meta name="keywords" content="Music, Audio, Lyrics" /> </Helmet> <h2>Lyrics</h2> </div>);export default Lyrics; |
Audio.js
import React from 'react';import { Helmet } from "react-helmet";const Audio = () => ( <div> <Helmet> <title>Music Audio</title> <meta name="description" content="Get audio of every music for free" /> <meta name="keywords" content="Music, Audio, Lyrics" /> </Helmet> <h2>Audio</h2> </div>);export default Audio; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/ and you will see a different title and description for each route.
