wellbees / meta-tag-seo

Meta tags and seo information manager for Reactjs

Meta Tag SEO

Meta tags and seo information manager for Reactjs

Example Usage

Show Demo in CodeSandBox

Installation

  npm install @wellbees/meta-tag-seo

Usage/Examples

Provider is not required. If you want use only <MetaTags/> or other components, you can use it alone.

---

Provider and Special Location Tags Usage

import React from 'react'
import { MetaFooter, MetaHeader, MetaBody, MetaProvider } from '@wellbees/meta-tag-seo'
import seoConfig from './seoConfig' // Below is an example

const App = () => {
  return (
    <MetaProvider config={seoConfig}>
      <MetaHeader>{/* Adds to the bottom inside the head tag */}</MetaHeader>
      <MetaBody>{/* Adds to the top inside the body tag */}</MetaBody>
      <div>
        Page Layout
      <div>
      <MetaFooter>{/* Adds to the bottom inside the body tag */}</MetaFooter>
    </MetaProvider>
  )
}

export default App

Single MetaTags Usage

import React from 'react'
import { MetaTags } from '@wellbees/meta-tag-seo'

const Page = () => {
  return (
    <div>
      {/* Small Usage */}
      <MetaTags title='' description='' equalTitle equalDescription />

      {/* Full Usage */}
      <MetaTags
        title=''
        description=''
        keywords=''
        openGraph={{
          type: '',
          title: '',
          description: '',
          image: '',
          video: '',
          audio: ''
        }}
        twitter={{
          card: '',
          title: '',
          description: '',
          image: ''
        }}
      >
        {/* Adds to the bottom inside the head tag */}
      </MetaTags>

		  Page Layout
	  </div>
  )
}

export default Page

Example SEO Config Value

const seoConfig = {
  translate: false,
  language: 'en',
  charset: 'utf-8',
  favIcon: 'http://example.com/favicon.png',
  viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
  themeColor: '#2A2A2A',
  title: 'Title | Default Page',
  description: 'Description | Default Page',
  keywords: 'Keywords | Default Page',
  robots: 'Robots | Default Page',
  owner: 'Owner | Default Page',
  author: 'Author | Default Page',
  copyright: 'Copyright | Default Page',
  openGraph: {
    locale: 'Locale | Facebook Meta (og:locale)',
    type: 'Type | Facebook Meta (og:type)',
    url: 'Url | Facebook Meta (og:url)',
    site_name: 'Site Name | Facebook Meta (og:site_name)',
    title: 'Title | Facebook Meta (og:title)',
    description: 'Description | Facebook Meta (og:description)',
    image: 'Image Url | Facebook Meta (og:image)',
    video: 'Video Url | Facebook Meta (og:video)',
    audio: 'Audio Url | Facebook Meta (og:audio)',
    appId: 'AppId | Facebook Meta (fb:appId)'
  },
  twitter: {
    card: 'Card | Twitter Meta (twitter:card)',
    site: 'Site | Twitter Meta (twitter:site)',
    creator: 'Creator | Twitter Meta (twitter:creator)',
    title: 'Title | Twitter Meta (twitter:title)',
    description: 'Description | Twitter Meta (twitter:description)',
    image: 'Image | Twitter Meta (twitter:image)'
  },
  verification: {
    google: 'Google Verification Code (google-site-verification)',
    yandex: 'Yandex Verification Code (yandex-verification)',
    bing: 'Bing Verification Code (msvalidate.01)',
    baidu: 'Baidu Verification Code (baidu-site-verification)'
  }
}

Props

Name	Type	Default	Available Component	Description
config	Object		MetaProvider	Sets the default meta settings of the page.
equalTitle	Boolean	false	MetaProvider, MetaHeader, MetaTags	Syncs facebook and twitter headers to the page title.
equalDescription	Boolean	false	MetaProvider, MetaHeader, MetaTags	Syncs facebook and twitter descriptions to page description.
children	Node		MetaProvider, MetaHeader, MetaBody, MetaFooter, MetaTags	Any html tags can be written inside the tags.

Features

• Set default meta config with provider
• Head, body and footer components for special code location
• Meta tag components for simple usage
• Sync page title and description, facebook and twitter meta to work

Min React Version

React: 16.13.1

Kullanılan Paketler

prop-types

Feedback

If you have any feedback, please contact us at [email protected].

Authors

• @azizsenturk