React SEO All-In-One
This library provides stuff to seo-optimize your website built with react. You can either use single components for an easy usage of meta tags and other stuff or use predefined groups to get all the different tags out of your mind.
Quickstart
npm install react-seo-aio
import React from "react";
import {Helmet} from "react-helmet";
import {generateGroupBasic} from "react-seo-aio";
const Page = () => {
return (
<section class="page">
<Helmet>
{generateGroupBasic({
title: "How to succeed with SEO",
description: "SEO is more than just technical implementation. Nevertheless your html should be perfect.",
canonical: "http://mybusiness.com/blog/seo"
)}}
</Helmet>
</section>
);
}
/* RENDERS TO THIS HEAD
<title>How to succeed with SEO</title>
<link rel="canonical" href="http://mybusiness.com/blog/seo">
<meta name="description" content="SEO is more than just technical implementation. Nevertheless your html should be perfect.">
<meta name="robots" content="index,follow">
<meta name="og:title" content="How to succeed with SEO">
<meta name="og:description" content="SEO is more than just technical implementation. Nevertheless your html should be perfect.">
<meta name="og:url" content="http://mybusiness.com/blog/seo">
*/
Typescript
This library is written in Typescript and comes with all needed typings. Of course it also supports vanilla javascript.
Usage
The easiest way to use this library is to use the predefined tag groups in an additive way.
generateGroupBasic
generateGroupMedia
generateOpenGraphArticle
This library renders basic tags like meta tag. It is purposly not bound to any external libraries like react-helmet
. Different methods like basic react or next.js use different methods to render content inside the html head. Use the provided method.
Component naming convention
The naming convention for all functions / components of this library follows this rule:
- (Optional) Group: The type of tag (OpenGraph, ...)
- Tag Name / Topic: The tags name in camel case (1-n names)
With the exception of top level groups like Head
, the src
folder follows the same naming conventions. For a tag reference, take a look at the src folder.
Group
A group can be either just a group of tags that are grouped by topic. In this case the word we are looking for is Group
.
On the other hand it can be a type of tag like Open Graph
or Twitter Cards
.
The group IS NOT a technical therm like meta
tag.
Tag Name / Topic
The last part of the function name can either be an actual tag name like Title
for the title tag. In this case the component name will be HeadTitle
. The name can also contain multiple words if we use the OpenGraph
tags for example. generateOpenGraphArticleAuthor
contains Article
followed by Author
and references the article:author
tag inside the open graph.
In case of a topic group it can be a word like Basic
which referes to the generateGroupBasic
function which will render all the must have tags inside the head. Another example would be Media
.
Usage
The easiest way to use this library is to use the predefined tag groups in an additive way.
Allways start with the generateGroupBasic
function and add stuff from there.
If your current page is also represented by media like an image or video you can add the generateGroupMedia
function.
import React from "react";
import {Helmet} from "react-helmet";
import {generateGroupBasic, generateGroupMedia} from "react-seo-aio";
const Page = () => {
return (
<section class="page">
<Helmet>
{generateGroupBasic({
title: "How to succeed with SEO",
description: "SEO is more than just technical implementation. Nevertheless your html should be perfect.",
canonical: "http://mybusiness.com/blog/seo",
robots: {{index: true, follow: true}}
})}
{generateGroupMedia({
image: "http://mybusiness.com/blog/seo/intro.jpg",
video: "http://mybusiness.com/blog/seo/intro.mp4"
})}
{generateGraphArticle({
publishedTime: new Date("2020-11-04T08:00:00"),
author: "https://github.com/julianhandl",
section: "SEO",
tag: ["SEO", "Open Graph", "Metatags"]
})}
</Helmet>
</section>
);
}
/* RENDERS TO THIS HEAD
<title>How to succeed with SEO</title>
<link rel="canonical" href="http://mybusiness.com/blog/seo">
<meta name="description" content="SEO is more than just technical implementation. Nevertheless your html should be perfect.">
<meta name="robots" content="index,follow">
<meta name="og:title" content="How to succeed with SEO">
<meta name="og:description" content="SEO is more than just technical implementation. Nevertheless your html should be perfect.">
<meta name="og:url" content="http://mybusiness.com/blog/seo">
<meta name="og:image" content="http://mybusiness.com/blog/seo/intro.jpg">
<meta name="og:video" content="http://mybusiness.com/blog/seo/intro.mp4">
<meta name="og:type" content="article">
<meta name="article:published_time" content="2020-11-04T08:00:00">
<meta name="article:author" content="https://github.com/julianhandl">
<meta name="article:section" content="SEO">
<meta name="article:tag" content="SEO">
<meta name="article:tag" content="Open Graph">
<meta name="article:tag" content="Metatags">
*/
(Advanced) with single tags
You can also mix groups with individual functions or even use them exclusively.
import React from "react";
import {Helmet} from "react-helmet";
import {
generateTitle,
generateDescription,
generateCanonical,
generateOpenGraphArticleAuthor
} from "react-seo-aio";
const Page = () => {
return (
<section class="page">
<Helmet>
{generateTitle("Homepage")}
{generateDescription("Welcome to our business")}
{generateCanonical("http://mybusiness.com")}
{generateOpenGraphArticleAuthor("https://github.com/julianhandl")}
</Helmet>
</section>
);
}
Why use functions instead of actual react components?
At first react components were used but most header components like react-helmet
or next/head
do not support nested tags like we would get with components. Functions returning single tags or an array of tags offer the widest support.