All the metatags you might need for SEO in one React component.
Caleb O.
Posted on January 23, 2024
Here's a React component that puts almost all the necessary meta tags you'd need for SEO in one place.
Why?
I can NOT entirely say that there's a motivation behind building this, to be honest. I was just tired of having to copy the same meta tags that I've been using for my blog whenever I share an article on the internet — mostly on social platforms.
What are the "perks" of using it?
Well... for one, you won't have to copy meta tags from one component to the other.
And if you're that person that goes: "I can just build this myself". Well, you're in luck. Because you don't have to do that.
<Metadata /> accepts a children prop, so you can still add other HTML tags that go into the <head> element.
<Metadata>
<link href="style.css" />
</Metadata>
Usage
You can use the component by installing it from the NPM registry.
yarn add metadatah
Import the component into any of your pages, or wherever it is needed like so:
import { MetaData } from "metadatah";
export default function pageComponent() {
return (
<>
<MetaData
pageTitle="Homepage"
url="your-website.com"
description="description of the page"
previewImage="path-to-image or a remote link to where it is located."
/>
// rest of the page content falls below
</>
);
}
pageTitle, url, previewImage and description are required props.
contentType helps you describe the type of content you share. Is it a blog post, pictures, videos, or whatever you want really. By default, the value is "website", since it is assumed that you're using this component on the web.
There's a list that covers all the available values here
Optional props
-
contentType: accepts either "article" or "website" as values -
contentLanguage: can be used to change the language of your content. Defaults to "en_US" if none is specified. -
children: include additional meta tags if you like.
Drawbacks.
The component doesn't work quite well in Next.js projects. There's an issue open to track this. If you want to contribute, feel free to do so.
Posted on January 23, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
