React Advance Meta Tags

A React component designed for adding comprehensive meta tags for SEO and social media sharing, including support for Open Graph, Twitter Cards, and other essential tags. This flexible and reusable library makes it easy to manage various SEO-related meta tags in your React application, helping improve search engine visibility and social media integration.

Table of Contents

• Features
• Installation
• Usage
• Components
  • BasicMetaTags
  • BookMetaTags
  • EcommerceMetaTags
  • ProfileMetaTags
  • RobotsMetaTags
  • SocialMetaTags
• Examples
• Contributing
• License

Features

• Set various types of meta tags for SEO
• Support for Open Graph and Twitter Card meta tags
• Flexible components for different use cases
• Simple and intuitive API

Installation

To install the package, run:

npm install react-advance-meta-tags

or

yarn add react-advance-meta-tags

Usage

Import the desired meta tag component and include it in your React component.

import React from 'react';
import BasicMetaTags from 'react-meta-tags/BasicMetaTags';

const App = () => (
  <div>
    <BasicMetaTags 
      title="My App Title"
      description="This is a description of my app."
      keywords="app, react, meta tags"
      author="Your Name"
      canonicalUrl="https://yourdomain.com"
    />
    {/* Other components */}
  </div>
);

Components

BasicMetaTags

BasicMetaTags manages the basic meta tags crucial for SEO, including the page title, description, keywords, and other common meta attributes like viewport and charset.

Benefits:

• Improves the visibility of your website in search engines by providing accurate and concise information about the page.
• Enhances user experience through proper viewport settings, especially for mobile devices.
• Ensures content is indexed correctly with essential information.

Role in SEO:
Basic meta tags like the title and description are fundamental for search engines to understand your page's content. Including keywords helps boost relevancy for specific searches, and the canonical URL prevents duplicate content issues.

Example

    <BasicMetaTags
        title="Welcome to My Website"
        description="This is the homepage of my awesome website."
        keywords="React, SEO, Meta Tags, Website"
        author="Deepak Kumar"
        canonicalUrl="https://www.mywebsite.com"
        viewport="width=device-width, initial-scale=1.0"
        charset="UTF-8"
        language="en"
      />

Props | Prop | Type | Default | Description | | ------------ | ------ | ------------------------------------ | ------------------------------------- | | title | string | undefined | The title of the page. | | description | string | undefined | A brief description of the page content. | | keywords | string | undefined | A comma-separated list of keywords. | | author | string | undefined | The author of the page. | | canonicalUrl | string | undefined | The canonical URL of the page. | | viewport | string | width=device-width, initial-scale=1 | The viewport settings for responsive design. | | charset | string | UTF-8 | The character encoding for the HTML document. | | language | string | en | The language of the content in the document. |

BookMetaTags

This component handles Open Graph meta tags tailored for books. It includes properties like title, description, author, ISBN, and more.

Benefits:

• Ideal for book-related websites or blogs where you want to share book details with search engines and social media platforms.
• Allows you to showcase essential information (like author and release date) that increases engagement for book reviews or product pages.

Role in SEO:
Open Graph tags allow you to control how your book content appears on social media. Accurate tags can increase click-through rates and social sharing, indirectly boosting SEO rankings through higher engagement.

Example

<BookMetaTags
  title="The Great Gatsby"
  description="A novel by F. Scott Fitzgerald."
  image="https://example.com/image.jpg"
  url="https://example.com/great-gatsby"
  author="F. Scott Fitzgerald"
  isbn="978-0743273565"
  releaseDate="1925-04-10"
  genre="Fiction"
/>

Props | Prop | Type | Default | Description | | ------------ | ------ | ---------- | --------------------------------- | | title | string | undefined | The title of the book. | | description | string | undefined | A description of the book. | | image | string | undefined | The cover image of the book. | | url | string | undefined | The URL of the book. | | author | string | undefined | The author of the book. | | isbn | string | undefined | The ISBN of the book. | | releaseDate | string | undefined | The release date of the book. | | genre | string | undefined | The genre of the book. |

EcommerceMetaTags

Description:
This component is designed for e-commerce websites, setting meta tags for product details like price, availability, condition, and brand.

Benefits:

• Helps search engines and social media platforms display product details in rich formats.
• Improves user engagement by providing essential product information, boosting click-through rates from search results and social media.

Role in SEO:
E-commerce meta tags ensure products are indexed correctly and display valuable product data in search engine results and social media cards, helping increase sales and product visibility.

Example

<EcommerceMetaTags
  ogProductPriceAmount="29.99"
  ogProductPriceCurrency="USD"
  productAvailability="in stock"
  productCondition="new"
  productBrand="Acme Corporation"
/>

Props | Prop | Type | Default | Description | | ----------------------- | ------ | --------- | --------------------------------- | | ogProductPriceAmount | string | undefined | The product price amount. | | ogProductPriceCurrency | string | undefined | The currency of the product price. | | productAvailability | string | undefined | Availability status of the product. | | productCondition | string | undefined | The condition of the product (new, used, etc.). | | productBrand | string | undefined | The brand of the product. |

ProfileMetaTags

Description:
Manages meta tags specific to user profiles, including username, first and last names, profile URL, and profile image.

Benefits:

• Enhances how user profiles are represented in search engines and social sharing.
• Useful for social platforms or user-driven sites to make profiles more discoverable.

Role in SEO:
Accurate profile meta tags ensure user profiles are indexed properly, improving user discoverability on search engines. This is especially beneficial for platforms where profiles contribute to the site's overall SEO performance.

Example

<ProfileMetaTags
  username="john_doe"
  firstName="John"
  lastName="Doe"
  profileUrl="https://example.com/john_doe"
  image="https://example.com/profile.jpg"
/>

Props | Prop | Type | Default | Description | | ----------- | ------ | ---------- | --------------------------------- | | username | string | undefined | The username of the profile. | | firstName | string | undefined | The first name of the user. | | lastName | string | undefined | The last name of the user. | | profileUrl | string | undefined | The URL of the user profile. | | image | string | undefined | The profile image of the user. |

RobotsMetaTags

Sets robots meta tags to control how search engines interact with your site. It supports attributes like noindex, nofollow, and others.

Benefits:

• Provides control over what pages should be indexed or crawled by search engines, protecting sensitive or non-important pages.
• Helps manage content visibility and reduce duplicate content penalties.

Role in SEO:
Robots meta tags are crucial for controlling how search engines handle your content. Setting noindex or nofollow on specific pages can prevent them from appearing in search results, which can help you avoid dilution of SEO value across unimportant pages.

Example

<RobotsMetaTags
  noindex
  nofollow
  maxSnippet={20}
  maxVideoPreview={30}
  maxImagePreview="large"
/>

Props | Prop | Type | Default | Description | | -------------- | ------- | ----------- | -------------------------------------------- | | noindex | boolean | false | Prevents indexing of the page. | | nofollow | boolean | false | Prevents following links on the page. | | noarchive | boolean | false | Prevents archiving the page. | | nosnippet | boolean | false | Prevents showing snippets in search results. | | noimageindex | boolean | false | Prevents indexing images on the page. | | robots | string | index, follow| Custom robots directive. | | maxSnippet | number | undefined | Maximum snippet length. | | maxVideoPreview| number | undefined | Maximum video preview length. | | maxImagePreview| string | undefined | Maximum image preview length. |

SocialMetaTags

Manages Open Graph and Twitter Card meta tags, which are essential for social media sharing. This includes content like title, description, URL, and image.

Benefits:

• Optimizes how your content appears when shared on social platforms like Facebook, Twitter, and LinkedIn.
• Increases the likelihood of user engagement by controlling how the content preview looks on social media.

Role in SEO:
While social signals are not direct ranking factors, enhanced social sharing can lead to higher engagement (click-through rates, shares), which indirectly influences SEO. Properly set Open Graph and Twitter Cards ensure your content is represented attractively on social media.

Example

    <SocialMetaTags
        ogType="article"
        ogTitle="Understanding React Hooks"
        ogDescription="A comprehensive guide to understanding and using React Hooks."
        ogUrl="https://yourwebsite.com/blog/understanding-react-hooks"
        ogImage="https://yourwebsite.com/images/react-hooks.jpg"
        ogImageAlt="React Hooks Illustration"
        ogSiteName="Your Website"
        twitterTitle="Understanding React Hooks"
        twitterDescription="A comprehensive guide to understanding and using React Hooks."
        twitterImage="https://yourwebsite.com/images/react-hooks.jpg"
        twitterImageAlt="React Hooks Illustration"
        twitterSite="@yourtwitterhandle"
        ogProductPriceAmount="29.99"
        ogProductPriceCurrency="USD"
      />

Props

| Prop | Type | Default | Description | | -------------------- | ------ | ------------------ | ------------------------------------ | | ogType | string | undefined | The type of content (e.g., website, article). | | ogTitle | string | undefined | The title for Open Graph. | | ogDescription | string | undefined | The description for Open Graph. | | ogUrl | string | undefined | The URL of the content for Open Graph. | | ogImage | string | undefined | The image for Open Graph. | | ogImageAlt | string | undefined | The alt text for the Open Graph image. | | ogLocale | string | en_US | The locale for Open Graph. | | ogSiteName | string | undefined | The site name for Open Graph. | | twitterCard | string | summary_large_image| The type of Twitter Card. | | twitterTitle | string | undefined | The title for Twitter Card. | | twitterDescription | string | undefined | The description for Twitter Card. | | twitterImage | string | undefined | The image for Twitter Card. | | twitterImageAlt | string | undefined | The alt text for the Twitter Card image. | | twitterSite | string | undefined | The Twitter handle of the site. | | twitterCreator | string | undefined | The Twitter handle of the content creator. |

General Benefits of React Advance Meta Tags

• Improved SEO: By including proper meta tags, you provide essential signals to search engines, leading to better indexing and search engine ranking.
• Social Media Optimization: Meta tags for Open Graph and Twitter cards improve how your site is displayed when shared, increasing click-through rates and engagement.
• User Experience: Meta tags such as viewport ensure that your website works well across devices, enhancing user experience, which indirectly impacts SEO performance.

These components ensure that your site is equipped with the necessary meta tags, providing both search engines and social platforms with accurate data to display your content in the best possible way.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.

License

This project is licensed under the MIT License.