Socket
Socket
Sign inDemoInstall

headx

Package Overview
Dependencies
3
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    headx

A document head manager for React


Version published
Weekly downloads
1
decreased by-50%
Maintainers
1
Install size
23.5 kB
Created
Weekly downloads
 

Readme

Source

Headx

It is a React Package to automatically modify the main html file (like index.html) to add the provided SEO meta tags and more. For example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.

NPM JavaScript Style Guide Unpacked Size Twitter Follow

Table of Contents

  1. Install
  2. Usage
  3. Default SEO Configuration
  4. Features
  5. Additional Information
  6. License

Install

npm install --save headx

Usage

Then you need to import headx as Headx. This will render out the tags in the <head> for SEO. At a bare minimum, you should add a title and description.

Example with just title and description:

import Headx from 'headx'

const Page = () => (
  <>
    <Headx
      title='Headx - Document Head Manager ⚓'
      meta={[{ name: 'description', content: 'Document Head Manager ⚓' }]}
    />

    <p>Simple Usage</p>
  </>
)

export default Page

But Headx gives you many more options that you can add inside the head tag. See below for a more detail example of a page.

Typical page example:

import React from 'react'

import Headx from 'headx'

const App = () => {
  return (
    <div>
      <Headx
        title='Headx - Document Head Manager ⚓'
        meta={[
          { name: 'description', content: 'Document Head Manager ⚓' },
          { name: 'author', content: 'theritikchoure' }
        ]}
        httpEquiv={[{ name: 'refresh', content: '30' }]}
        links={[{ name: 'stylesheet', content: 'styles.css' }]}
        og={[
          { name: 'type', content: 'website' },
          { name: 'url', content: 'http://example.com' }
        ]}
        twitter={[
          { name: 'type', content: 'website' },
          { name: 'url', content: 'http://example.com' }
        ]}
      />
    </div>
  )
}

export default App

Default SEO Configuration

Headx enables you to set some default SEO properties that will appear on all pages without needing to include anything on them. You can also override these on a page by page basis if needed.

To achieve this, Within your Layout or Header file you will need to import headx and pass it props.

Here is a typical example:

import React from 'react'

import Headx from 'headx'

const App = () => {
  return (
    <div>
      <Headx
        og={[
          { name: 'type', content: 'website' },
          { name: 'url', content: 'http://example.com' }
        ]}
        twitter={[
          { name: 'type', content: 'website' },
          { name: 'url', content: 'http://example.com' }
        ]}
      />
    </div>
  )
}

export default App

Note: To work properly default seo configuration, Headx should be placed in Layout or Navbar file.

From now on all of your pages will have the defaults above applied.

Features

Supports

Supports all valid head tags: title, base, meta, link, script, noscript, and style tags

No Duplicacy

Duplicate head changes are preserved when specified in the same component

Fast & Light

It is a simple, fast and lightweight package for react

Additional information

This package creates the tags in the html file before the closing head tag.

License

This package is licensed under the MIT license © theritikchoure

Keywords

FAQs

Last updated on 11 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc