react-super-seo

🔱 React Super SEO

React SEO component that handles metadata so you don't have to.
Supports Google, OpenGraph, Twitter, and beyond. 🚀

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!

$3

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!

$3

- 🔌 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 save you time, please consider buying me a coffee, which powers my development (and life). 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

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

`jsx
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",
},
}}
/>
`

$3

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

`jsx
title="My Page"
description="An awesome page that does a lot of cool stuff"
>



``

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: 👉⭐

Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:

License

See LICENSE.md.