react-seo-manager

React-seo-manager

Overview

React-seo-manager is a lightweight React utility for managing SEO meta tags dynamically. It simplifies the process of updating page titles, descriptions, and other meta elements to improve search engine visibility and social media sharing.

Features

• Dynamically set page titles and meta descriptions
• Supports Open Graph and Twitter Card meta tags
• Easy integration with React applications
• Works with React 17 and 18

Installation

npm install react-seo-manager

or

yarn add react-seo-manager

Usage

Import the package and use it in your React components:

import React from "react";
import { useSEO } from "react-seo-manager";

const MyPage = () => {
  useSEO({
    title: "My Awesome Website - Home",
    description:
      "Welcome to my awesome website! Explore our features and services.",
    keywords: "website, awesome, features, services",
    image: "https://example.com/og-image.jpg",
    url: "https://example.com",
    type: "website",
  });

  return (
    <>
      <useSEO
        title="My Awesome Page"
        description="This is a great page for demonstrating React SEO capabilities."
        keywords="react, seo, meta tags"
      />
      <h1>Welcome to My Page</h1>
    </>
  );
};

export default MyPage;

Props

Prop	Type	Description
title	string	Page title
description	string	Meta description for search engines
keywords	string	Keywords for SEO
ogTitle	string	Open Graph title for social media
ogImage	string	URL of the Open Graph image
ogDescription	string	Open Graph description
twitterTitle	string	Title for Twitter Card
twitterImage	string	Image URL for Twitter Card
twitterDescription	string	Description for Twitter Card

Development & Build

To build the project, use:

npm run build

For testing:

npm test

License

This project is licensed under the ISC License.

Author

Created by Abdulla al Mamun.