tag to React v18.0 using react-helmet</h1> <p>Krishna Haranath — Thu, 24 Aug 2023 06:52:36 +0000</p> <p>There are certain ways you can include title tag to your react component or page. One is using React Helmet and one with UseEffect Hook. </p> <p>Although React is frequently praised for enhancing the efficiency of front-end development, it can pose challenges for search engines.</p> <p><em><strong>What is React Helmet?</strong></em><br> This adaptable React component will oversee any alterations to the document head.</p> <p>Helmet utilizes basic HTML tags as input and produces straightforward HTML tags as output. It's extremely straightforward and suitable for React beginners.</p> <p><em><strong>How to use?</strong></em><br> <code>npm i react-helmet</code></p> <p><a href="https://github.com/nfl/react-helmet#readme" rel="noopener noreferrer">github repo</a></p> <p><em><strong>sample code:</strong></em><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import React from "react"; import {Helmet} from "react-helmet"; class Application extends React.Component { render () { return ( <div className="application"> <Helmet> <meta charSet="utf-8" /> <title>My Title</title> <link rel="canonical" href="http://mysite.com/example" /> </Helmet> ... </div> ); } }; </code></pre> </div> <p><a href="https://www.npmjs.com/package/react-helmet" rel="noopener noreferrer">Source</a></p> <blockquote> <p>This is essential for setting metadata, such as titles, descriptions, and other meta tags, which are crucial for SEO and improving a website's search engine visibility.</p> <p>If you're looking to enhance your React application's SEO capabilities and optimize the content in the head section, React Helmet is generally recommended as a dependable solution.</p> </blockquote> <p>Thank you 🫡</p> </article> </main></body></html>