next head seo
0.1.3
Un complemento SEO simple y ligero para aplicaciones Next.js.
Aunque next-head-seo admite solo propiedades de SEO esenciales, sería suficiente para la mayoría de los sitios web.
Si necesita configuraciones de SEO avanzadas, como datos estructurados, use el siguiente-seo en su lugar.
$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo Importe next-head-seo en cada componente de página y agregue las propiedades deseadas.
Ejemplo:
// pages/example.tsx
import NextHeadSeo from 'next-head-seo' ;
const Page = ( ) => (
< >
< h1 > Hello! </ h1 >
< NextHeadSeo
title = "Hello!"
description = "Some description"
canonical = "https://example.com/hello"
og = { {
title : "Open graph title" ,
image : "https://example.com/og.png" ,
} }
/>
</ >
) ;
export default Page
// Output:
// <head>
// <title>Hello!</title>
// <meta name="description" content="Some description" />
// <link rel="canonical" href="https://example.com/hello"/>
// <meta property="og:title" content="Open graph title"/>
// <meta property="og:image" content="https://example.com/og.png"/>
// </head> Hay 2 opciones para configurar las propetas de SEO predeterminadas.
<NextHeadSeo /> en _app.tsx La primera opción es colocar <NextHeadSeo /> con valores predeterminados en _app.tsx .
// pages/_app.tsx
import type { AppProps } from 'next/app'
import NextHeadSeo from 'next-head-seo' ;
function MyApp ( { Component , pageProps } : AppProps ) {
return (
< >
{ /* Default SEO configuration */ }
< NextHeadSeo
og = { {
image : "https://example.com/default-og.png" ,
type : 'article' ,
siteName : 'Your app name' ,
} }
twitter = { {
card : "summary"
} }
/>
{ /* Place <Component /> after <NextHeadSeo /> */ }
< Component { ... pageProps } />
</ >
) ;
}
export default MyApp Asegúrese de que <NextHeadSeo /> se coloque antes de <Component {...pageProps} /> ya que el siguiente-seo respeta el último valor para el mismo nombre de propiedad.
Alternativamente, simplemente cree un componente de envoltura que se pueda usar en cada componente de página. Esta es una forma más flexible y confiable de establecer valores predeterminados.
Aquí hay un ejemplo de componente de envoltura:
// components/MyPageSeo.tsx
import NextHeadSeo from 'next-head-seo' ;
// types
export type MyPageSeoProps = {
path : string ;
title ?: string ;
description ?: string ;
ogImagePath ?: string ;
noindex ?: boolean ;
noTitleTemplate ?: boolean ;
} ;
export const MyPageSeo : React . FC < MyPageSeoProps > = ( props ) => {
const {
path ,
title = "Default title" ,
description = "Default description" ,
ogImagePath = "/default-og.png" ,
noindex ,
noTitleTemplate ,
} = props ;
// Set APP_ROOT_URL on enviroment variables
// e.g. APP_ROOT_URL=https://example.com
// https://nextjs.org/docs/basic-features/environment-variables
const APP_ROOT_URL = process . env . NEXT_PUBLIC_APP_ROOT_URL ;
// Absolute page url
const pageUrl = APP_ROOT_URL + path
// Absolute og image url
const ogImageUrl = APP_ROOT_URL + ogImagePath
return (
< NextHeadSeo
title = { noTitleTemplate ? title : ` ${ title } - MyAppName` }
canonical = { pageUrl }
description = { description }
robots = { noindex ? 'noindex, nofollow' : undefined }
og = { {
title ,
description ,
url : pageUrl ,
image : ogImageUrl ,
type : 'article' ,
siteName : 'MyAppName' ,
} }
twitter = { {
card : "summary_large_image" ,
} }
/>
) ;
} ; Luego, coloque <MyPageSeo /> en cada componente de página.
// pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"
const Page = ( ) => (
< >
< h1 > Hello! </ h1 >
< MyPageSeo
path = "/example"
title = "Hello!"
noindex = { true }
/>
</ >
) ;
export default Page
// Output:
// <head>
// <title>Hello! - MyAppName</title>
// <meta name="robots" content="noindex, nofollow"/>
// <meta name="description" content="Default description" />
// <link rel="canonical" href="https://example.com/example"/>
// <meta property="og:url" content="https://example.com/example"/>
// <meta property="og:title" content="Hello!"/>
// <meta property="og:description" content="Default description"/>
// <meta property="og:image" content="https://example.com//default-og.png"/>
// <meta property="og:type" content="article"/>
// <meta property="og:site_name" content="MyAppName"/>
// <meta name="twitter:card" content="summary_large_image"/>
// </head> Todos los accesorios para next-head-seo son opcionales.
| Apuntalar | Descripción | Tipo |
|---|---|---|
| título | ✅ Recomendado para establecer todas las páginas. Título de la página. | cadena |
| canónico | ✅ Recomendado para establecer todas las páginas. URL canónica de la página. | cadena |
| robots | Establezca noindex, nofollow solo cuando no desea que la página se indexe en los motores de búsqueda. De lo contrario, no tiene que usar este accesorio. | "noindex, nofollow""index, follow""noindex""nofollow" |
| descripción | ✅ Recomendado para establecer todas las páginas. Descripción de la página. El texto después de 150 caracteres se truncará como lo hace Google. | cadena |
| Twitter.card | Tipo de imagen de la tarjeta de Twitter. Establecido junto con og:image Prop.Ver detalle: Tarjetas de Twitter | "summary""summary_large_image""player""app" |
| Twitter.Sito | Nombre de usuario de Twitter comenzando con @ | cadena |
| og.title | Para OG: Título. Use automáticamente el valor title si está en blanco.Ver detalle: Protocolo de gráfico abierto | cadena |
| Descripción de OG. | Para OG: Descripción. Use automáticamente el valor description si está en blanco. | cadena |
| og.url | Para OG: URL. Use automáticamente el valor canonical si está en blanco. | cadena |
| Og.Image | Para OG: imagen. Establecer URL de imagen. | cadena |
| og.type | Para OG: Tipo. | "article""book""website""profile" |
| Og.sitename | Para OG: Site_Name | cadena |
| custommetatags | Matriz de objeto para metaetiquetas personalizadas. Ver la sección CustomMetatags. | Una variedad de objetos |
| customLinktags | Matriz de objeto para etiquetas de enlace personalizadas. Consulte la sección CustomLinkTags. | Una variedad de objetos |
Puede establecer metaetiquetas adicionales. Ejemplo:
< NextHeadSeo
customMetaTags = { [
{
name : 'foo' ,
content : 'foo-content'
} ,
{
property : 'bar' ,
content : 'bar-content'
}
] }
/>
// Output:
// <head>
// <meta name="foo" content="foo-content"/>
// <meta name="bar" content="bar-content"/>
// </head>Si desea anular metaetiquetas personalizadas desde otro componente de página, use las mismas claves para ambos componentes.
Ejemplo:
// in /pages/_app.tsx
< NextHeadSeo
customMetaTags = { [
{
key : "custom-meta" ,
name : 'foo' ,
content : 'foo-content'
}
] }
/>
// in /pages/example.tsx
< NextHeadSeo
customMetaTags = { [
{
key : "custom-meta" ,
name : 'bar' ,
content : 'bar-content'
}
] }
/ >
// Output:
// <head>
// <meta name="bar" content="bar-content"/>
// </head>Puede establecer etiquetas de enlace adicionales. Ejemplo:
< NextHeadSeo
customLinkTags = { [
{
rel : 'foo' ,
href : 'https://example.com/foo'
} ,
{
rel : 'bar' ,
type : 'bar-type' ,
href : 'https://example.com/bar'
} ,
] }
/>
// Output:
// <head>
// <link rel="foo" content="https://example.com/foo"/>
// <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>Si desea anular las etiquetas de enlace personalizadas desde otro componente de la página, use las mismas teclas para ambos componentes. Ejemplo:
// in /pages/_app.tsx
< NextHeadSeo
customLinkTags = { [
{
key : "custom-link" ,
rel : 'foo' ,
content : 'https://example.com/foo'
}
] }
/>
// in /pages/example.tsx
< NextHeadSeo
customLinkTags = { [
{
key : "custom-link" ,
rel : 'bar' ,
type : 'bar-type' ,
ccontent : 'https://example.com/bar'
}
] }
/ >
// Output:
// <head>
// <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>
