next seo
v6.6.0
¿Has visto el nuevo boletín de Next.js?
Herramientas útiles
Next SEO es un complemento que facilita la gestión de su SEO en proyectos Next.js.
Las solicitudes de extracción son bienvenidas. También asegúrese de consultar los problemas para solicitudes de funciones si está buscando inspiración sobre qué agregar.
¿Tienes ganas de apoyar este complemento gratuito?
Se necesita mucho tiempo para mantener un proyecto de código abierto por lo que cualquier pequeña contribución es muy apreciada.
Codificación de combustibles de café ☕️
next-seo.wallet (ERC20 y SOL)
Nota sobre el directorio de aplicaciones
Esta nota solo es relevante si se utiliza el directorio app .
Para metadatos estándar (p. ej., <título>), se recomienda encarecidamente utilizar el método integrado generateMetaData . Puedes consultar los documentos aquí.
Entonces, para JSON-LD, el único cambio necesario es agregar useAppDir={true} al componente JSON-LD en uso. Debe agregar use este componente en su page.js y NO en su head.js
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
Si está utilizando el directorio pages , ¡ NextSeo es exactamente lo que necesita para sus necesidades de SEO!
NextSeo funciona incluyéndolo en páginas donde le gustaría que se agreguen atributos de SEO. Una vez incluido en la página, le pasa un objeto de configuración con las propiedades SEO de la página. Esto se puede generar dinámicamente a nivel de página o, en algunos casos, su API puede devolver un objeto SEO.
Primero, instálalo:
npm install next-seoo
yarn add next-seo¿Utiliza el directorio de aplicaciones Next.js introducido en Next.js 13?
Si está utilizando el directorio de la aplicación Next.js, se recomienda encarecidamente que utilice el método integrado generateMetaData . Puedes consultar los documentos aquí.
Si está utilizando el directorio pages , ¡ NextSeo es exactamente lo que necesita para sus necesidades de SEO!
Luego, debes importar NextSeo y agregar las propiedades deseadas. Esto mostrará las etiquetas en <head> para SEO. Como mínimo, debes agregar un título y una descripción.
Ejemplo con solo título y descripción:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Simple Usage Example"
description = "A short description goes here."
/ >
< p > Simple Usage < / p >
< / >
) ;
export default Page ; Pero NextSeo te ofrece muchas más opciones que puedes agregar. Vea a continuación un ejemplo típico de una página.
Ejemplo de página típica:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Using More of Config"
description = "This example uses more of the available config options."
canonical = "https://www.canonical.ie/"
openGraph = { {
url : 'https://www.url.ie/a' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image-01.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
type : 'image/jpeg' ,
} ,
{
url : 'https://www.example.ie/og-image-02.jpg' ,
width : 900 ,
height : 800 ,
alt : 'Og Image Alt Second' ,
type : 'image/jpeg' ,
} ,
{ url : 'https://www.example.ie/og-image-03.jpg' } ,
{ url : 'https://www.example.ie/og-image-04.jpg' } ,
] ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< p > SEO Added to Page < / p >
< / >
) ;
export default Page ;Una nota sobre las etiquetas de Twitter
Los accesorios cardType , site y handle son equivalentes a twitter:card , twitter:site , twitter:creator . La documentación se puede encontrar aquí.
Twitter leerá las etiquetas og:title , og:image y og:description de su tarjeta. next-seo omite twitter:title , twitter:image y twitter:description para evitar duplicaciones.
Algunas herramientas pueden informar esto como un error. Ver número 14
NextSeo le permite configurar algunas propiedades SEO predeterminadas que aparecerán en todas las páginas sin necesidad de incluir nada en ellas. También puede anularlos página por página si es necesario.
Para lograr esto, necesitará crear una <App> personalizada. En el directorio de sus páginas, cree un nuevo archivo, _app.js . Consulte los documentos de Next.js aquí para obtener más información sobre una <App> personalizada.
Dentro de este archivo necesitarás importar DefaultSeo desde next-seo y pasarle accesorios.
Aquí hay un ejemplo típico:
import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;
// import your default seo configuration
import SEO from '../next-seo.config' ;
export default class MyApp extends App {
render ( ) {
const { Component , pageProps } = this . props ;
return (
< Container >
< DefaultSeo
openGraph = { {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< Component { ... pageProps } / >
< / Container >
) ;
}
} Para funcionar correctamente, DefaultSeo debe colocarse encima (antes) Component debido al comportamiento de las partes internas de Next.js.
Alternativamente, también puede crear un archivo de configuración para almacenar valores predeterminados como next-seo.config.js
export default {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ; import { DefaultSeoProps } from 'next-seo' ;
const config : DefaultSeoProps = {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ;
export default config ; importar en la parte superior de _app.js
import SEO from '../next-seo.config' ; y el componente DefaultSeo se puede usar así en su lugar
< DefaultSeo { ... SEO } / >A partir de ahora, todas sus páginas tendrán aplicados los valores predeterminados anteriores.
Tenga en cuenta que Container está obsoleto en Next.js v9.0.4, por lo que debe reemplazar ese componente aquí con React.Fragment en esta versión y posteriores; consulte aquí
| Propiedad | Tipo | Descripción |
|---|---|---|
titleTemplate | cadena | Le permite configurar la plantilla de título predeterminada que se agregará a su título Más información |
title | cadena | Establecer el metatítulo de la página. |
defaultTitle | cadena | Si no se establece ningún título en una página, se utilizará esta cadena en lugar de una titleTemplate vacía Más información |
noindex | booleano (falso predeterminado) | Establece si la página debe indexarse o no Más información |
nofollow | booleano (falso predeterminado) | Establece si la página debe seguirse o no Más información |
robotsProps | Objeto | Establezca más metainformación para X-Robots-Tag Más información |
description | cadena | Establecer la meta descripción de la página |
canonical | cadena | Establecer la URL canónica de la página |
mobileAlternate.media | cadena | Establezca desde qué tamaño de pantalla se debe mostrar el sitio web móvil |
mobileAlternate.href | cadena | Establecer la URL alternativa de la página móvil |
languageAlternates | formación | Establece el idioma de las URL alternativas. Espera una serie de objetos con la forma: { hrefLang: string, href: string } |
themeColor | cadena | Indica un color sugerido que los agentes de usuario deben usar para personalizar la visualización de la página o de la interfaz de usuario circundante. Debe contener un color CSS válido |
additionalMetaTags | formación | Le permite agregar una metaetiqueta que no está documentada aquí. Más información |
additionalLinkTags | formación | Le permite agregar una etiqueta de enlace que no está documentada aquí. Más información |
twitter.cardType | cadena | El tipo de tarjeta, que será summary , summary_large_image , app o player |
twitter.site | cadena | @nombre de usuario para el sitio web utilizado en el pie de página de la tarjeta |
twitter.handle | cadena | @nombre de usuario para el creador/autor del contenido (las salidas son twitter:creator ) |
facebook.appId | cadena | Usado para Facebook Insights, debes agregar una ID de aplicación de Facebook a tu página para obtener más información. |
openGraph.url | cadena | La URL canónica de su objeto que se utilizará como su ID permanente en el gráfico. |
openGraph.type | cadena | El tipo de su objeto. Dependiendo del tipo que especifique, es posible que también se requieran otras propiedades. Más información |
openGraph.title | cadena | El título del gráfico abierto puede ser diferente al metatítulo. |
openGraph.description | cadena | La descripción del gráfico abierto puede ser diferente a su meta descripción. |
openGraph.images | formación | Una serie de imágenes (objetos) para ser utilizadas por plataformas de redes sociales, slack, etc. como vista previa. Si se proporcionan varios, puede elegir uno al compartir. Ver ejemplos |
openGraph.videos | formación | Una variedad de videos (objeto) |
openGraph.locale | cadena | La configuración regional en la que están marcadas las etiquetas del gráfico abierto. Del formato idioma_TERRITORIO. El valor predeterminado es en_US. |
openGraph.siteName | cadena | Si su objeto es parte de un sitio web más grande, el nombre que debe mostrarse para todo el sitio. |
openGraph.profile.firstName | cadena | Nombre de la persona. |
openGraph.profile.lastName | cadena | Apellido de la persona. |
openGraph.profile.username | cadena | Nombre de usuario de la persona. |
openGraph.profile.gender | cadena | Género de la persona. |
openGraph.book.authors | cadena[] | Escritores del artículo. Ver ejemplos |
openGraph.book.isbn | cadena | El ISBN |
openGraph.book.releaseDate | fecha y hora | La fecha en que se publicó el libro. |
openGraph.book.tags | cadena[] | Etiqueta palabras asociadas con este libro. |
openGraph.article.publishedTime | fecha y hora | Cuando el artículo se publicó por primera vez. Ver ejemplos |
openGraph.article.modifiedTime | fecha y hora | Cuándo se modificó el artículo por última vez. |
openGraph.article.expirationTime | fecha y hora | Cuando el artículo esté desactualizado después. |
openGraph.article.authors | cadena[] | Escritores del artículo. |
openGraph.article.section | cadena | Un nombre de sección de alto nivel. Por ejemplo, tecnología |
openGraph.article.tags | cadena[] | Etiquetar palabras asociadas con este artículo. |
Reemplaza %s con tu cadena de título
title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO Establecer esto en true establecerá noindex,follow (para configurar nofollow , consulte nofollow ). Esto funciona página por página. Esta propiedad funciona en conjunto con la propiedad nofollow y juntas completan la metaetiqueta robots .
Nota: Las propiedades noindex y nofollow son un poco diferentes a todas las demás en el sentido de que configurarlas como predeterminadas no funciona como se esperaba. Esto se debe al hecho de que Next SEO ya tiene un index,follow porque, después de todo, next-seo es un complemento de SEO. Entonces, si desea globalmente estas propiedades, consulte peligrosamenteSetAllPagesToNoIndex y peligrosamenteSetAllPagesToNoFollow.
Ejemplo Sin índice en una sola página:
Si tiene una sola página que no desea indexar, puede lograrlo de la siguiente manera:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo noindex = { true } / >
< p > This page is no indexed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="noindex,follow">
*/ Tiene el prefijo dangerously porque noindex todas las páginas. Como se trata de un complemento de SEO, es una acción un poco peligrosa. No está mal usar esto. Solo asegúrese de noindex CADA página. Aún puedes anular esto a nivel de página si tienes un caso de uso para index una página. Esto se puede hacer configurando noindex: false .
La única forma de desarmar esto es eliminando el accesorio de DefaultSeo en su <App> personalizada.
Establecer esto en true establecerá index,nofollow (para configurar noindex , consulte noindex ). Esto funciona página por página. Esta propiedad funciona en conjunto con la propiedad noindex y juntas completan la metaetiqueta robots .
Nota: A diferencia de otras propiedades, configurar noindex y nofollow de forma predeterminada no funciona como se esperaba. Esto se debe a que Next SEO tiene un index,follow , ya que, después de todo next-seo es un complemento de SEO. Si desea permitir globalmente estas propiedades, consulte peligrosamenteSetAllPagesToNoIndex y peligrosamenteSetAllPagesToNoFollow.
Ejemplo No Seguir en una sola página:
Si tiene una sola página que no desea indexar, puede lograrlo de la siguiente manera:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo nofollow = { true } / >
< p > This page is not followed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,nofollow">
*/ Tiene el prefijo dangerously porque nofollow todas las páginas. Como se trata de un complemento de SEO, es una acción un poco peligrosa. No está mal usar esto. Solo asegúrese de nofollow CADA página. Aún puedes anular esto a nivel de página si tienes un caso de uso para follow una página. Esto se puede hacer configurando nofollow: false .
La única forma de desarmar esto es eliminando el accesorio de DefaultSeo en su <App> personalizada.
noindex | nofollow | meta contenido de robots |
|---|---|---|
| -- | -- | index,follow (predeterminado) |
| FALSO | FALSO | index,follow |
| verdadero | -- | noindex,follow |
| verdadero | FALSO | noindex,follow |
| -- | verdadero | index,nofollow |
| FALSO | verdadero | index,nofollow |
| verdadero | verdadero | noindex,nofollow |
Además del index, follow the robots acepta más propiedades para archivar un rastreo más preciso y ofrecer mejores fragmentos para los robots de SEO que rastrean su página.
Ejemplo:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
robotsProps = { {
nosnippet : true ,
notranslate : true ,
noimageindex : true ,
noarchive : true ,
maxSnippet : - 1 ,
maxImagePreview : 'none' ,
maxVideoPreview : - 1 ,
} }
/ >
< p > Additional robots props in Next-SEO!! < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/Propiedades disponibles
| Propiedad | Tipo | Descripción |
|---|---|---|
noarchive | booleano | No muestre un enlace almacenado en caché en los resultados de búsqueda. |
nosnippet | booleano | No muestre un fragmento de texto ni una vista previa de video en los resultados de búsqueda de esta página. |
max-snippet | número | Utilice un máximo de [número] caracteres como fragmento de texto para este resultado de búsqueda. Leer más |
max-image-preview | 'ninguno','estándar','grande' | Establezca el tamaño máximo de una vista previa de imagen para esta página en los resultados de búsqueda. |
max-video-preview | número | Utilice un máximo de [número] segundos como fragmento de video para los videos de esta página en los resultados de búsqueda. Leer más |
notranslate | booleano | No ofrecer traducción de esta página en los resultados de búsqueda. |
noimageindex | booleano | No indexe imágenes en esta página. |
unavailable_after | cadena | No muestre esta página en los resultados de búsqueda después de la fecha/hora especificada. La fecha/hora se debe especificar en un formato ampliamente adoptado que incluye, entre otros, RFC 822, RFC 850 e ISO 8601. |
Para obtener más referencia sobre X-Robots-Tag visite Google Search Central: control de rastreo e indexación
Twitter leerá las etiquetas og:title , og:image y og:description de su tarjeta, es por eso que next-seo omite twitter:title , twitter:image y twitter:description para no duplicarlas.
Algunas herramientas pueden informar esto como un error. Ver número 14
facebook = { {
appId : '1234567890' ,
} }Agregue esto a su configuración de SEO para incluir el meta fb:app_id si necesita habilitar las estadísticas de Facebook para su sitio. Puede encontrar información al respecto en la documentación de Facebook.
Agregue esto página por página cuando desee consolidar URL duplicadas.
canonical = 'https://www.canonical.ie/' ; Esta relación de enlace se utiliza para indicar una relación entre un sitio web de escritorio y móvil para los motores de búsqueda.
Ejemplo:
mobileAlternate = { {
media : 'only screen and (max-width: 640px)' ,
href : 'https://m.canonical.ie' ,
} } languageAlternates = { [ {
hrefLang : 'de-AT' ,
href : 'https://www.canonical.ie/de' ,
} ] } Esto le permite agregar cualquier otra metaetiqueta que no esté cubierta en la config y que deba usarse en lugar de la propiedad children .
Se requiere content . Luego name , property o httpEquiv . (Solo uno en cada uno)
Ejemplo:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Jane Doe'
} , {
name : 'application-name' ,
content : 'NextSeo'
} , {
httpEquiv : 'x-ua-compatible' ,
content : 'IE=edge; chrome=1'
} ] }Ejemplos no válidos:
Estos no son válidos porque contienen más de uno de name , property y httpEquiv en la misma entrada.
additionalMetaTags = { [ {
property : 'dc:creator' ,
name : 'dc:creator' ,
content : 'Jane Doe'
} , {
property : 'application-name' ,
httpEquiv : 'application-name' ,
content : 'NextSeo'
} ] } Una cosa a tener en cuenta al respecto es que actualmente solo admite etiquetas únicas a menos que use la propiedad keyOverride para proporcionar una clave única para cada metaetiqueta adicional.
El comportamiento predeterminado (sin una propiedad keyOverride ) es representar una etiqueta por name / property / httpEquiv único. Se renderizará el último definido.
Por ejemplo, si pasas 2 etiquetas con la misma property :
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs'
} , {
property : 'dc:creator' ,
content : 'Jane Doe'
} ] }resultará en que esto se represente:
< meta property =" dc:creator " content =" Jane Doe " /> Proporcionar una propiedad keyOverride adicional como esta:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs' ,
keyOverride : 'creator1' ,
} , {
property : 'dc:creator' ,
content : 'Jane Doe' ,
keyOverride : 'creator2' ,
} ] }da como resultado que se represente el HTML correcto:
< meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " /> Esto le permite agregar cualquier otra etiqueta de enlace que no esté cubierta en la config .
Se requieren rel y href .
Ejemplo:
additionalLinkTags = { [
{
rel : 'icon' ,
href : 'https://www.test.ie/favicon.ico' ,
} ,
{
rel : 'apple-touch-icon' ,
href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
sizes : '76x76'
} ,
{
rel : 'manifest' ,
href : '/manifest.json'
} ,
{
rel : 'preload' ,
href : 'https://www.test.ie/font/sample-font.woof2' ,
as : 'font' ,
type : 'font/woff2' ,
crossOrigin : 'anonymous'
}
] }resultará en que esto se represente:
< link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
rel =" apple-touch-icon "
href =" https://www.test.ie/touch-icon-ipad.jpg "
sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
rel =" preload "
href =" https://www.test.ie/font/sample-font.woof2 "
as =" font "
type =" font/woff2 "
crossorigin =" anonymous "
/>Para conocer las especificaciones completas, consulte http://ogp.me/
Next SEO actualmente admite:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
openGraph = { {
type : 'website' ,
url : 'https://www.example.com/page' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
} ,
{
url : 'https://www.example.ie/og-image-2.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt 2' ,
} ,
] ,
} }
/ >
< p > Basic < / p >
