Git Product home page Git Product logo

next-seo's Introduction

Next SEO

Simple SEO managment that makes managing SEO easier in NextJS v13+ projects.

This project was based to garmeeh/next-seo.

Install

With npm

npm install --save @meluiz/next-seo

Or yarn

yarn add --save @meluiz/next-seo

Usage

// app/head.jsx

import React from "react";
import { seo } from "@meluiz/next-seo";

export default function Head() {
  return <React.Fragment>{seo.render()}</React.Fragment>;
}

Default SEO

// app/head.jsx

import React from "react";
import { seo } from "@meluiz/next-seo";

export default function Head() {
  seo.default({ ...SEOProps });

  return <React.Fragment>{seo.render()}</React.Fragment>;
}

Make SEO

// app/page.jsx

import React from "react";
import { seo } from "@meluiz/next-seo";

export default function Page({ children }) {
  seo.make({ ...SEOProps });

  return <div>{children}</div>;
}

SEO Props

The default and make method work with this bollow props:

Global

Property Type
title string
titleTemplate string
noindex boolean
nofollow boolean
robots Robots
description string
cononical string
themeColor string
metatag Array<Metatag>
linktag Array<Linktag>
twitter Twitter
opengraph Opengraph

Robots

Property Type
nosnippet boolean
maxSnippet number
maxImagePreview "none", "standard" or "large"
maxVideoPreview number
noarchive boolean
unavailableAfter string
noimageindex boolean
notranslate boolean

Book

Property Type
authors Array<string>
isbn string
releaseDate string
tags Array<string>

Video Actor

Property Type
role string
profile string

Video

Property Type
actors Array<VideoActor>
directors Array<string>
writers Array<string>
duration number
releaseDate string
tags Array<string>
series string

Article

Property Type
publishedTime string
modifiedTime string
expirationTime string
authors Array<string>
section string
tags Array<string>

Profile

Property Type
firstName string
lastName string
username string
gender string

Media

Property Type
url string
type string
title string
description string
siteName string
locale string
book Book
video Video
article Article
profile Profile
images Media[]
videos Media[]
audio Media[]
defaultImageHeight number
defaultImageWidth number
defaultOpenGraphVideoWidth number
defaultOpenGraphVideoHeight number

Metatag

Property Type
name string
property string
httpEquiv "content-security-policy", "content-type", default-style", "x-ua-compatible" or "refresh"
content string
keyOverride string

Linktag

Property Type
rel string
href string
sizes string
media string
type string
color string
keyOverride string
as string
crossOrigin string

Twitter

Property Type
site string
handle string
cardType "summary", "summary_large_image", "app" or "player"

Opengraph

Property Type
url string
type string
title string
description string
siteName string
locale string
book Book
video Video
article Article
profile Profile
images Array<Media>
videos Array<Media>
audio Array<Media>
defaultImageHeight number
defaultImageWidth number
defaultOpenGraphVideoWidth number
defaultOpenGraphVideoHeight number

next-seo's People

Contributors

meluiz avatar

Stargazers

Roni Ardiyanto avatar

Watchers

 avatar

next-seo's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.