npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

seo-for-next

v1.0.0

Published

Enhance the SEO of your Next.js applications with ease. SeoForNext provides you with simple yet powerful tools to embed various JSON-LD schema types directly into your projects.

Downloads

3

Readme

🌐 SeoForNext

Enhance the SEO of your Next.js applications with ease. SeoForNext provides you with simple yet powerful tools to embed various JSON-LD schema types directly into your projects.

🚀 Features

  • Plug & Play: Designed specifically for seamless integration with Next.js projects.
  • Diverse Schema Support: From websites and articles to organizations and breadcrumbs.
  • SEO Boost: Improve your web application's visibility on search engines with structured data.
  • Dynamic & Flexible: Accommodates a single or multiple schemas in a component.

📖 Table of Contents

🎉 Getting Started

Prerequisites

Ensure you have the following installed:

Installation

  1. Install the SeoForNext package:
    npm install SeoForNext

🔍 Usage Examples

Basic Usage

import SeoForNext from 'SeoForNext';

function MyComponent() {
    return (
        <>
            <SeoForNext 
                title="My Awesome Article" 
                description="This article talks about awesome things." 
                image="/path_to_image.jpg" 
                schemaTypes={["article"]} 
                schemaDatas={[articleData]}
            />
            {/* Rest of your component */}
        </>
    );
}

Multiple Schemas

import SeoForNext from 'SeoForNext';

function MyComponent() {
    return (
        <>
            <SeoForNext 
                title="My Website" 
                description="Welcome to my cool website." 
                image="/path_to_main_image.jpg" 
                schemaTypes={["website", "article", "organization"]} 
                schemaDatas={[websiteData, articleData, organizationData]}
            />
            {/* Rest of your component */}
        </>
    );
}

📜 Supported Schemas

For an exhaustive list of supported schemas, refer to the utility functions in the schemaGenerators.js file. However, some of the most commonly used include:

  • website: Represents a website.
  • article: Represents an article or blog post.
  • organization: Represents an organization or company.
  • breadcrumb: Represents a breadcrumb trail on a page.

📚 API Reference

  • title: Your page's title.
  • description: A brief description of your page.
  • image: URL to an image that represents your content.
  • schemaTypes: An array of the schemas you wish to use.
  • schemaDatas: An array of data objects for each schema.

🛠 Best Practices

  1. Optimized Images: Ensure the images you use (especially in the article schema) are optimized for the web to improve loading times.
  2. Relevant Descriptions: Make sure your descriptions are relevant and concise.

🔧 Troubleshooting

  • Schema Not Showing: Ensure you've correctly matched the schema type in schemaTypes with the corresponding data in schemaDatas.

💼 Contributing

We welcome contributions of all sizes. Before submitting, please read our Contributing Guidelines.

📄 License

This project is licensed under the MIT License. Read the full terms in the LICENSE.md file.