Make Your React Site SEO Friendly
usr ~ $
It is a React Package to automatically modify the main html file (like index.html) to add the provided SEO meta tags and more. For example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.
$ npm install headx
$ yarn add headx
Then you need to import `headx` as `Headx`. This will render out the tags in the <head> for SEO. At a bare minimum, you should add a title and description.
Example with just title and description:
import Headx from 'headx';
const Page = () => (
<>
<Headx
title="Headx - Document Head Manager ⚓"
meta={[{name: 'description', content: 'Document Head Manager ⚓'}]}
/>
<p>Simple Usage</p>
</>
);
export default Page;
But Headx gives you many more options that you can add inside the <head> tag. See below for a more detail example of a page.
Typical page example:
import React from 'react'
import Headx from 'headx'
const App = () => {
return (
<div>
<Headx
title="Headx - Document Head Manager ⚓"
meta={[{name: 'description', content: 'Document Head Manager ⚓'},
{name: 'author', content: 'theritikchoure'}]}
httpEquiv={[{name: 'refresh', content: '30'}]}
links={[{name: 'stylesheet', content: 'styles.css'}]}
og={[{name: 'type', content: 'website'},
{name: 'url', content: 'http://example.com'}]}
twitter={[{name: 'type', content: 'website'},
{name: 'url', content: 'http://example.com'}]}
/>
</div>
)
}
export default App
Headx enables you to set some default SEO properties that will appear on all pages without needing to include anything on them. You can also override these on a page by page basis if needed.
To achieve this, Within your Layout or Header file you will need to import headx and pass it props.
Here is a typical example:
import React from 'react'
import Headx from 'headx'
const App = () => {
return (
<div>
<Headx
og={[{name: 'type', content: 'website'},
{name: 'url', content: 'http://example.com'}]}
twitter={[{name: 'type', content: 'website'},
{name: 'url', content: 'http://example.com'}]}
/>
</div>
)
}
export default App
Note: To work properly default seo configuration, Headx should be placed in Layout or Navbar file.
From now on all of your pages will have the defaults above applied.
Supports all valid head tags: title, base, meta, link, script, noscript, and style tags
Duplicate head changes are preserved when specified in the same component
It is a simple, fast and lightweight package for react
This package creates the tags in the html file before the closing head tag.
This package is licensed under the MIT license. Author: theritikchoure
Go to NPM Registry
Headx - NPM