aganglada / use-head

🔍 Improve your SEO with a React Hook

🔍 use-head

Getting SEO and Performance right 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.

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

Install

npm install use-head

Basic Usage

import { Helmet } from 'react-helmet'
import { useHead } from 'use-head'

function App() {
  const { title, meta } = useHead({
    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-head, 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):

Alejandro Garcia Anglada 💻 🤔

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