react-seo-component
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    React SEO Component

    CodeFactor bundlephobia min bundlephobia minzip

    Use it for adding canonical links, metadata and OpenGraph information to your React projects!

    Use it!

    Install it from npm!

    yarn add react-seo-component
    # peer dependency of react helmet 
    yarn add react-helmet

    If you are using it with Gatsby you will also need to install the Gatsby plugin:

    yarn add react-seo-component
    yarn add react-helmet
    yarn add gatsby-plugin-react-helmet
    # or in one command 
    yarn add react-seo-component react-helmet gatsby-plugin-react-helmet

    This will create the meta tags at build time.

    Examples:

    For an index page:

    <SEO
      title={title}
      titleTemplate={siteName}
      titleSeparator={`-`}
      description={description || 'nothin’'}
      image={image}
      pathname={siteUrl}
      siteLanguage={siteLanguage}
      siteLocale={siteLocale}
      twitterUsername={twitterUsername}
    />

    For a blog post:

    <SEO
      title={title}
      titleTemplate={siteName}
      titleSeparator={`-`}
      description={description}
      image={image}
      pathname={siteUrlPlusSlug}
      siteLanguage={siteLanguage}
      siteLocale={siteLocale}
      twitterUsername={twitterUsername}
      author={authorName}
      article={true}
      publishedDate={createdDate}
      modifiedDate={updatedDate}
    />

    Props

    Prop Type Default
    title Page title ''
    titleTemplate Page Title + Site title ''
    titleSeparator Between Page Title + Site title ·
    description Page description ''
    pathname Full Page URL ''
    article article or website website
    image Full image URL ''
    siteLanguage Content Language en
    siteLocale Content Locale en_gb
    twitterUsername can be empty ''
    author can not be empty 'J Doe'
    datePublished ISO date string Date.now()
    dateModified ISO date string Date.now()

    To test locally

    Use npm pack or yarn pack to create a .tgz of the project you can install locally on your project to test with.

    # from here 
    yarn pack
    # copy to project to test 
    cp react-seo-component-2.0.1.tgz ../project-to-test-with/
    # ~/project-to-test-with 
    yarn add file:react-seo-component-2.0.1.tgz

    Thanks:

    Resources

    https://medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9

    https://github.com/recraftrelic/dummy-react-npm-module/blob/master/package.json

    Install

    npm i react-seo-component

    DownloadsWeekly Downloads

    334

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    65 kB

    Total Files

    18

    Last publish

    Collaborators

    • spences10