🔍 use-seo

SEO is complicated, but what if you had a React hook that gave you all you need for your page.

You are on the right place.

useSeo is a React hook that based on some of your site properties, will return all the necessary tags you need to improve your SEO.

Install

npm install use-seo

Basic Usage

import { Helmet } from 'react-helmet'
import { useSeo } from 'use-seo'

function App() {
  const { title, meta } = useSeo({
    title: 'My App'
    description: 'This app is awesome!'
    url: 'https://www.myawesomeapp.io',
    keywords: 'Awesome, App, React',
    image: 'https://www.myawesomeapp.io/images/logo.png'
  })

  return (
    <div>
      <Helmet>
        {title}
        {meta}
      </Helmet>
    </div>
  )
}

Options

| Name | Type | Optional | | ------------- | ------ | -------- | | title | String | Yes | | description | String | Yes | | url | String | Yes | | keywords | String | Yes | | image | String | Yes | | imageAlt | String | Yes | | locale | String | Yes | | type | String | Yes | | author | String | Yes | | datePublished | String | Yes | | dateModified | String | Yes |

Returns

title

<title>My App</title>

meta

<meta name="description" content="This app is awesome!" />
<meta name="keywords" content="Awesome, App, React" />
<meta property="og:image" content="https://www.myawesomeapp.io/images/logo.png" />
...

jsonLD

<script type="application/ld+json">
  {
    "@id": "http://store.example.com/",
    "@type": "Store",
    "name": "Links Bike Shop",
    "description": "The most \"linked\" bike store on earth!"
  }
</script>

canonical

<link rel="canonical" href="https://www.myawesomeapp.io" />

Contributing

I would love to see you contributing to use-seo, also by giving feedback. If you think something is missing, create a new issue.

Pull request are more than welcome ❤️️

License

MIT © aganglada

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!