Minimal SEO in React JS - React Helmet

#socialmedia #seo #react #reacthelmet

Using react-helmet

1. Install the library:

npm install react-helmet

2. Update your component to use react-helmet:

import React from 'react';
import { Helmet } from 'react-helmet';

const App = () => {
    const appName = "Your Application Name";
    const dynamicPageTitle = `Welcome to ${appName}`;

    return (
        <div>
            <Helmet>
                <title>{dynamicPageTitle}</title>
            </Helmet>
            <h1>Welcome to {appName}</h1>
        </div>
    );
};

export default App;

3. Result:

The page title will dynamically update, and search engines will be able to pick it up when indexing.
Using JavaScript (document.title)
You can also directly set the title in the useEffect hook:

import React, { useEffect } from 'react';

const App = () => {
    const appName = "Your Application Name";

    useEffect(() => {
        document.title = `Welcome to ${appName}`;
    }, [appName]);

    return (
        <div>
            <h1>Welcome to {appName}</h1>
        </div>
    );
};

export default App;

Best Practices for SEO

Unique Titles: Ensure each page in your app has a unique and descriptive title.
Server-Side Rendering (SSR): If your app needs better SEO, consider using frameworks like Next.js, which support server-side rendering.
Meta Tags: Along with the title, update meta tags using react-helmet or other similar methods to include descriptions, keywords, and canonical URLs.

<Helmet>
    <title>{dynamicPageTitle}</title>
    <meta name="description" content="Description of the application or page" />
    <meta name="keywords" content="your, keywords, here" />
</Helmet>

These steps ensure your React app's title is dynamically updated and optimized for search engines like Google.