Skip to content

A library to help easily maintain good seo in react.

Notifications You must be signed in to change notification settings

Limeyfy/react-seo

Repository files navigation

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

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

About

A library to help easily maintain good seo in react.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published