https://github.com/aganglada/use-head

🔍 Improve your SEO with a React Hook
https://github.com/aganglada/use-head

hooks metatags react react-hooks seo seo-meta typescript

Last synced: about 2 hours ago
JSON representation

🔍 Improve your SEO with a React Hook

• Host: GitHub
• URL: https://github.com/aganglada/use-head
• Owner: aganglada
• Created: 2020-01-19T11:27:15.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-01-08T14:54:08.000Z (almost 4 years ago)
• Last Synced: 2024-04-25T23:22:20.795Z (7 months ago)
• Topics: hooks, metatags, react, react-hooks, seo, seo-meta, typescript
• Language: TypeScript
• Homepage:
• Size: 43.9 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🔍 use-head

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

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

```bash

npm install use-head

```

## Basic Usage

```js

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 (

    


      

        {title}

        {meta}

      

    

  )

}

```


## 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

```jsx

My App

```

### meta

```jsx

...

```

### jsonLD

```jsx

  {

    "@id": "http://store.example.com/",

    "@type": "Store",

    "name": "Links Bike Shop",

    "description": "The most \"linked\" bike store on earth!"

  }

```

### canonical

```jsx

```

### 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](https://github.com/aganglada/use-seo/issues).

[Pull request](https://github.com/aganglada/use-seo/pulls) are more than welcome ❤️️

### License

MIT © aganglada

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Alejandro Garcia Anglada
💻 🤔

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!