React Better SEO

Maintaining good seo in react is not easy in itself. You can always use react-helmet to help you but understanding all the meta tags and so on can be hard. Therefore I made a npm package to help with easily maintaining good seo.

The package is based on https://www.npmjs.com/package/react-helmet.

Getting started

npm i --save @limeyfy/react-seo
// or
yarn add @limeyfy/react-seo

• Whats new in v.2.0.0?

Example

import './App.css';
import { BetterHelmet } from '@limeyfy/react-seo'

const App = () => {
  return (
    <div className="App">
      <BetterHelmet title="Hey" subTitle="cool" />
    </div>
  );
}

export default App;

Test SEO

import './App.css';
import React, { useEffect } from 'react'
import { BetterHelmet, useSeo } from '@limeyfy/react-seo'

const App = () => {
  const { result } = useSeo();

  console.log(result())

  return (
    <div className="App">
      <BetterHelmet
        title="Limeyfy"
        subTitle="App"
      >
        <meta name='og:country-name' content='NORWAY'>
      </BetterHelmet>
    </div>
  );
}

export default App;

Another example

import './App.css';
import { BetterHelmet } from '@limeyfy/react-seo'

const App = () => {
  return (
    <div className="App">
      <BetterHelmet
        title="Limeyfy"
        subTitle="App"
      >
        <meta name='og:country-name' content='NORWAY'>
      </BetterHelmet>
    </div>
  );
}

export default App;

Params

• title?: string;
• subTitle?: string;
• title?: string;
• subTitle?: string;
• titleDivider?: string;
• keywords?: string;
• themeColor?: string;
• description?: string;
• subject?: string;
• copyright?: string;
• language?: string;
• robots?: string;
• revised?: string;
• topic?: string;
• summary?: string;
• Classification?: string;
• author?: string;
• replyTo?: string;
• owner?: string;
• url?: string;
• identifierURL?: string;
• image?: string;
• favIcon?: string;
• children?: React.ReactNode;

Whats changed in 2.0.0?

• DefaultHelmet has changed name to BetterHelmet
• Small performance updates to the BetterHelmet and made the component less complicated
• Exporting BetterHelmetProps

Note that you can still use the name DefaultHelmet but it will deprecate in the next version