Documentation

Read the official documentation.

Overview

This component adds SEO (search engine optimization) metadata tags to the head element for you.

It includes full support for OpenGraph, Twitter Cards, and Google, as well as support for numerous popular meta tags, and any custom tags you might want to add beyond that!

Why Super SEO?

There are no less than a hundred different React SEO components floating around the web, and most have half-baked or zero support for OpenGraph, and many don't support Twitter Cards at all. Worse, documentation for them is sparse.

The goal of this project was to create the end all, be all, super SEO component for React.

This component supports OpenGraph and Twitter Cards fully, and includes TypeScript type definitions and fully documented code (including image size recommendations from the official specs) for an enjoyable coding experience. It also falls back where possible and infers MIME types automatically.

Is it super? You decide!

Features include:

• 🔌 Essential tags
  • Supports essential SEO tags like title, description, and more.
• 💯 Full OpenGraph and Twitter Cards support
  • Control how your content appears on the most popular social networks.
• 💁 Metadata fallback
  • OpenGraph and Twitter Cards fall back on title and description automatically.
• 🕷️ Crawler configuration
  • Configure search engine crawlers with robots and googlebot.
• ✅ Google site verification
  • Easily add your verification meta tag for Google Search Console.
• ⚒️ Custom meta tags
  • Need to include something else? Custom meta tags are quick and painless.
• 🖼️ Automatic MIME type inference
  • Media MIME types are inferred automatically, meaning one less thing to configure.
• ✨ TypeScript support and rich documentation
  • Includes full TypeScript type definitions and rich documentation, inside and out. Knowledge is power!

Donate

If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!

Table of Contents

• Documentation
• Overview
  • Why Super SEO?
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
  • Custom Meta Tags
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

npm i react-super-seo

Quick Start

import { SuperSEO } from "react-super-seo";

<SuperSEO
  title="Home | React Super SEO"
  description="React SEO component with OpenGraph and Twitter Cards support."
  lang="en"
  openGraph={{
    ogImage: {
      ogImage: "http://placekitten.com/1200/630",
      ogImageAlt: "Kittens",
      ogImageWidth: 1200,
      ogImageHeight: 630,
      ogImageType: "image/jpeg",
    },
  }}
  twitter={{
    twitterSummaryCard: {
      summaryCardImage: "http://placekitten.com/1200/630",
      summaryCardImageAlt: "Kittens",
      summaryCardSiteUsername: "justinmahar",
    },
  }}
/>

Custom Meta Tags

Wrap custom meta tags with SuperSEO. They will be rendered directly inside the head element.

<SuperSEO
  title="My Page"
  description="An awesome page that does a lot of cool stuff"
>
  <meta name="custom-meta" content="my-value" />
  <meta property="custom-meta-2" content="my-other-value" />
</SuperSEO>

Refer to the SuperSEO component usage for all available options.

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

⭐ Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉⭐

License

See LICENSE.md.