How to Control Head Tags In React App[Seo friendly].

How to control Your Head Tags in React on Each Route.

As we Already Know React is a JavaScript Framework used to make Single Page apps.

What is Single Page app?

It means There is the only single HTML page React controls it behind the scenes. React adds data dynamically to that HTML document and removes dynamically.

If we add React-router to the app have you seen all routes in the app shows the same title and same meta description why because we are reusing single HTML document?

There Is a Package Named React-Helmet available it helps to take control over Your Head tags on each route.

Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.

It is very easy to add in your components.

Let me show know how to implement it.

It is Posts Component in my dummy app.

Just plain HTML code on line 6.

This is our final output.

Happy coding if you have any doubts feel free to ask.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.