next seo
v6.6.0
Avez-vous vu la nouvelle newsletter Next.js ?
Outils utiles
Next SEO est un plugin qui facilite la gestion de votre référencement dans les projets Next.js.
Les demandes de tirage sont les bienvenues. Assurez-vous également de consulter les problèmes liés aux demandes de fonctionnalités si vous cherchez de l'inspiration sur ce qu'il faut ajouter.
Envie de soutenir ce plugin gratuit ?
La maintenance d'un projet open source prend beaucoup de temps, donc toute petite contribution est grandement appréciée.
Codage des carburants du café ☕️
next-seo.wallet (ERC20 et SOL)
Remarque sur le répertoire des applications
Cette note n'est pertinente que si vous utilisez le répertoire app .
Pour les métadonnées standard (par exemple, <title>), il est fortement recommandé d'utiliser la méthode generateMetaData intégrée. Vous pouvez consulter les documents ici
Pour JSON-LD, le seul changement nécessaire est d'ajouter useAppDir={true} au composant JSON-LD utilisé. Vous devez ajouter utiliser ce composant dans votre page.js et NON dans votre head.js .
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
Si vous utilisez un annuaire pages , NextSeo est exactement ce dont vous avez besoin pour vos besoins de référencement !
NextSeo fonctionne en l'incluant sur les pages où vous souhaitez que des attributs SEO soient ajoutés. Une fois inclus sur la page, vous lui transmettez un objet de configuration avec les propriétés SEO de la page. Cela peut être généré dynamiquement au niveau de la page ou, dans certains cas, votre API peut renvoyer un objet SEO.
Tout d'abord, installez-le :
npm install next-seoou
yarn add next-seoVous utilisez le répertoire d’applications Next.js introduit dans Next.js 13 ?
Si vous utilisez le répertoire d'applications Next.js, il est fortement recommandé d'utiliser la méthode generateMetaData intégrée. Vous pouvez consulter les documents ici
Si vous utilisez le répertoire pages , alors NextSeo est exactement ce dont vous avez besoin pour vos besoins de référencement !
Ensuite, vous devez importer NextSeo et ajouter les propriétés souhaitées. Cela affichera les balises dans le <head> pour le référencement. Au strict minimum, vous devez ajouter un titre et une description.
Exemple avec juste le titre et la description :
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 ; Mais NextSeo vous offre bien plus d’options que vous pouvez ajouter. Voir ci-dessous pour un exemple typique de page.
Exemple de page typique :
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 ;Une note sur Twitter Tags
Les accessoires cardType , site , handle sont équivalents à twitter:card , twitter:site , twitter:creator . La documentation peut être trouvée ici.
Twitter lira les balises og:title , og:image et og:description de leur carte. next-seo omet twitter:title , twitter:image et twitter:description pour éviter la duplication.
Certains outils peuvent signaler cela comme une erreur. Voir le numéro 14
NextSeo vous permet de définir certaines propriétés de référencement par défaut qui apparaîtront sur toutes les pages sans avoir besoin d'y inclure quoi que ce soit. Vous pouvez également les remplacer page par page si nécessaire.
Pour y parvenir, vous devrez créer un <App> personnalisé. Dans le répertoire de vos pages, créez un nouveau fichier, _app.js . Consultez la documentation Next.js ici pour plus d'informations sur une <App> personnalisée.
Dans ce fichier, vous devrez importer DefaultSeo depuis next-seo et lui transmettre les accessoires.
Voici un exemple typique :
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 >
) ;
}
} Pour fonctionner correctement, DefaultSeo doit être placé au-dessus (avant) Component en raison du comportement des composants internes de Next.js.
Alternativement, vous pouvez également créer un fichier de configuration pour stocker les valeurs par défaut telles que 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 ; importer en haut de _app.js
import SEO from '../next-seo.config' ; et le composant DefaultSeo peut être utilisé comme ceci à la place
< DefaultSeo { ... SEO } / >À partir de maintenant, toutes vos pages auront les valeurs par défaut ci-dessus appliquées.
Notez que Container est obsolète dans Next.js v9.0.4, vous devez donc remplacer ce composant ici par React.Fragment sur cette version et versions ultérieures - voir ici
| Propriété | Taper | Description |
|---|---|---|
titleTemplate | chaîne | Vous permet de définir un modèle de titre par défaut qui sera ajouté à votre titre. Plus d'informations |
title | chaîne | Définir le méta-titre de la page |
defaultTitle | chaîne | Si aucun titre n'est défini sur une page, cette chaîne sera utilisée à la place d'un titleTemplate vide.Modèle Plus d'informations |
noindex | booléen (faux par défaut) | Définit si la page doit être indexée ou non. Plus d'informations |
nofollow | booléen (faux par défaut) | Définit si la page doit être suivie ou non. Plus d'informations |
robotsProps | Objet | Définissez davantage de méta-informations pour le X-Robots-Tag Plus d'informations |
description | chaîne | Définir la méta description de la page |
canonical | chaîne | Définir l'URL canonique de la page |
mobileAlternate.media | chaîne | Définir la taille d'écran à partir de laquelle le site Web mobile doit être servi |
mobileAlternate.href | chaîne | Définir l'URL alternative de la page mobile |
languageAlternates | tableau | Définissez la langue des URL alternatives. Attend un tableau d'objets avec la forme : { hrefLang: string, href: string } |
themeColor | chaîne | Indique une couleur suggérée que les agents utilisateurs doivent utiliser pour personnaliser l'affichage de la page ou de l'interface utilisateur environnante. Doit contenir une couleur CSS valide |
additionalMetaTags | tableau | Permet d'ajouter une balise méta qui n'est pas documentée ici. Plus d'informations |
additionalLinkTags | tableau | Permet d'ajouter une balise de lien qui n'est pas documentée ici. Plus d'informations |
twitter.cardType | chaîne | Le type de carte, qui sera l'un des summary , summary_large_image , app ou player |
twitter.site | chaîne | @username pour le site Web utilisé dans le pied de page de la carte |
twitter.handle | chaîne | @username pour le créateur/auteur de contenu (sortie sous la forme twitter:creator ) |
facebook.appId | chaîne | Utilisé pour Facebook Insights, vous devez ajouter un identifiant d'application Facebook à votre page pour cela. Plus d'informations |
openGraph.url | chaîne | L'URL canonique de votre objet qui sera utilisée comme identifiant permanent dans le graphique |
openGraph.type | chaîne | Le type de votre objet. Selon le type que vous spécifiez, d'autres propriétés peuvent également être requises. Plus d'informations |
openGraph.title | chaîne | Le titre du graphique ouvert, il peut être différent de votre méta-titre. |
openGraph.description | chaîne | La description du graphique ouvert, elle peut être différente de votre méta description. |
openGraph.images | tableau | Un tableau d'images (objets) à utiliser par les plateformes de médias sociaux, Slack, etc. comme aperçu. Si plusieurs sont fournis, vous pouvez en choisir un lors du partage. Voir les exemples |
openGraph.videos | tableau | Un tableau de vidéos (objet) |
openGraph.locale | chaîne | Paramètres régionaux dans lesquels les balises du graphique ouvert sont balisées. Au format langage_TERRITOIRE. La valeur par défaut est en_US. |
openGraph.siteName | chaîne | Si votre objet fait partie d'un site Web plus grand, c'est le nom qui doit être affiché pour l'ensemble du site. |
openGraph.profile.firstName | chaîne | Prénom de la personne. |
openGraph.profile.lastName | chaîne | Nom de famille de la personne. |
openGraph.profile.username | chaîne | Nom d'utilisateur de la personne. |
openGraph.profile.gender | chaîne | Le sexe de la personne. |
openGraph.book.authors | chaîne[] | Auteurs de l'article. Voir les exemples |
openGraph.book.isbn | chaîne | L'ISBN |
openGraph.book.releaseDate | dateheure | La date de sortie du livre. |
openGraph.book.tags | chaîne[] | Marquez les mots associés à ce livre. |
openGraph.article.publishedTime | dateheure | Quand l’article a été publié pour la première fois. Voir les exemples |
openGraph.article.modifiedTime | dateheure | Date de la dernière modification de l'article. |
openGraph.article.expirationTime | dateheure | Lorsque l’article est obsolète après. |
openGraph.article.authors | chaîne[] | Auteurs de l'article. |
openGraph.article.section | chaîne | Un nom de section de haut niveau. Par exemple, la technologie |
openGraph.article.tags | chaîne[] | Marquez les mots associés à cet article. |
Remplace %s par votre chaîne de titre
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 Définir ceci sur true définira noindex,follow (pour définir nofollow , veuillez vous référer à nofollow ). Cela fonctionne page par page. Cette propriété fonctionne en tandem avec la propriété nofollow et, ensemble, elles remplissent la balise méta robots .
Remarque : Les propriétés noindex et nofollow sont un peu différentes de toutes les autres dans le sens où les définir par défaut ne fonctionne pas comme prévu. Cela est dû au fait que Next SEO a déjà un index,follow car next-seo est un plugin SEO après tout. Donc, si vous souhaitez globalement ces propriétés, veuillez consulter dangereusementSetAllPagesToNoIndex et dangereusementSetAllPagesToNoFollow.
Exemple Pas d'index sur une seule page :
Si vous avez une seule page que vous ne souhaitez pas indexer, vous pouvez y parvenir en :
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">
*/ Il porte le préfixe dangerously car il noindex toutes les pages. Comme il s’agit d’un plugin SEO, c’est une action plutôt dangereuse. Ce n'est pas mal d'utiliser ça. Assurez-vous simplement de noindex CHAQUE page. Vous pouvez toujours remplacer cela au niveau de la page si vous avez un cas d'utilisation pour index une page. Cela peut être fait en définissant noindex: false .
La seule façon de désactiver cela est de supprimer l'accessoire de DefaultSeo dans votre <App> personnalisé.
Définir cela sur true définira index,nofollow (pour définir noindex , veuillez vous référer à noindex ). Cela fonctionne page par page. Cette propriété fonctionne en tandem avec la propriété noindex et, ensemble, elles remplissent la balise méta robots .
Remarque : Contrairement aux autres propriétés, la définition de noindex et nofollow par défaut ne fonctionne pas comme prévu. En effet, Next SEO a par défaut l' index,follow , puisque next-seo est un plugin SEO après tout. Si vous souhaitez autoriser globalement ces propriétés, consultez dangereusementSetAllPagesToNoIndex et dangereusementSetAllPagesToNoFollow.
Exemple Non Suivre sur une seule page :
Si vous avez une seule page que vous ne souhaitez pas indexer, vous pouvez y parvenir en :
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">
*/ Il porte le préfixe « dangerously car il nofollow toutes les pages. Comme il s’agit d’un plugin SEO, c’est une action plutôt dangereuse. Ce n'est pas mal d'utiliser ça. Assurez-vous simplement de nofollow CHAQUE page. Vous pouvez toujours remplacer cela au niveau de la page si vous avez un cas d'utilisation pour follow une page. Cela peut être fait en définissant nofollow: false .
La seule façon de désactiver cela est de supprimer l'accessoire de DefaultSeo dans votre <App> personnalisé.
noindex | nofollow | meta contenu des robots |
|---|---|---|
| -- | -- | index,follow (par défaut) |
| FAUX | FAUX | index,follow |
| vrai | -- | noindex,follow |
| vrai | FAUX | noindex,follow |
| -- | vrai | index,nofollow |
| FAUX | vrai | index,nofollow |
| vrai | vrai | noindex,nofollow |
En plus de index, follow the robots accepte plus de propriétés pour archiver une exploration plus précise et fournir de meilleurs extraits pour les robots SEO qui explorent votre page.
Exemple:
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">
*/Propriétés disponibles
| Propriété | Taper | Description |
|---|---|---|
noarchive | booléen | Ne pas afficher de lien en cache dans les résultats de recherche. |
nosnippet | booléen | Ne pas afficher d'extrait de texte ou d'aperçu vidéo dans les résultats de recherche de cette page. |
max-snippet | nombre | Utilisez un maximum de [nombre] caractères comme extrait de texte pour ce résultat de recherche. En savoir plus |
max-image-preview | 'aucun', 'standard', 'grand' | Définissez la taille maximale d'un aperçu d'image pour cette page dans les résultats de recherche. |
max-video-preview | nombre | Utilisez un maximum de [nombre] secondes comme extrait vidéo pour les vidéos de cette page dans les résultats de recherche. En savoir plus |
notranslate | booléen | Ne proposez pas de traduction de cette page dans les résultats de recherche. |
noimageindex | booléen | N'indexez pas les images sur cette page. |
unavailable_after | chaîne | Ne pas afficher cette page dans les résultats de recherche après la date/heure spécifiée. La date/heure doit être spécifiée dans un format largement adopté, y compris, sans toutefois s'y limiter, RFC 822, RFC 850 et ISO 8601. |
Pour plus de références sur X-Robots-Tag visitez Google Search Central - Control Crawling and Indexing.
Twitter lira les og:title , og:image et og:description pour leur carte, c'est pourquoi next-seo omet twitter:title , twitter:image et twitter:description afin de ne pas les dupliquer.
Certains outils peuvent signaler cela comme une erreur. Voir le numéro 14
facebook = { {
appId : '1234567890' ,
} }Ajoutez ceci à votre configuration SEO pour inclure la méta fb:app_id si vous devez activer les informations Facebook pour votre site. Des informations à ce sujet peuvent être trouvées dans la documentation de Facebook
Ajoutez-le page par page lorsque vous souhaitez consolider les URL en double.
canonical = 'https://www.canonical.ie/' ; Cette relation de lien est utilisée pour indiquer une relation entre un ordinateur de bureau et un site Web mobile aux moteurs de recherche.
Exemple:
mobileAlternate = { {
media : 'only screen and (max-width: 640px)' ,
href : 'https://m.canonical.ie' ,
} } languageAlternates = { [ {
hrefLang : 'de-AT' ,
href : 'https://www.canonical.ie/de' ,
} ] } Cela vous permet d'ajouter d'autres balises méta qui ne sont pas couvertes dans la config et doivent être utilisées à la place des accessoires children .
content est requis. Ensuite, soit name , property ou httpEquiv . (Un seul sur chacun)
Exemple:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Jane Doe'
} , {
name : 'application-name' ,
content : 'NextSeo'
} , {
httpEquiv : 'x-ua-compatible' ,
content : 'IE=edge; chrome=1'
} ] }Exemples invalides :
Ceux-ci ne sont pas valides car ils contiennent plusieurs name , property et httpEquiv sur la même entrée.
additionalMetaTags = { [ {
property : 'dc:creator' ,
name : 'dc:creator' ,
content : 'Jane Doe'
} , {
property : 'application-name' ,
httpEquiv : 'application-name' ,
content : 'NextSeo'
} ] } Une chose à noter à ce sujet est qu'il ne prend actuellement en charge que les balises uniques, sauf si vous utilisez la prop keyOverride pour fournir une clé unique à chaque balise méta supplémentaire.
Le comportement par défaut (sans accessoire keyOverride ) consiste à afficher une balise par name / property / httpEquiv unique. Le dernier défini sera rendu.
Par exemple, si vous passez 2 balises avec la même property :
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs'
} , {
property : 'dc:creator' ,
content : 'Jane Doe'
} ] }cela entraînera le rendu de ceci :
< meta property =" dc:creator " content =" Jane Doe " /> Fournir une propriété keyOverride supplémentaire comme celle-ci :
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs' ,
keyOverride : 'creator1' ,
} , {
property : 'dc:creator' ,
content : 'Jane Doe' ,
keyOverride : 'creator2' ,
} ] }entraîne le rendu du code HTML correct :
< meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " /> Cela vous permet d'ajouter d'autres balises de lien qui ne sont pas couvertes par le config .
rel et href sont requis.
Exemple:
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'
}
] }cela entraînera le rendu de ceci :
< 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 "
/>Pour les spécifications complètes, veuillez consulter http://ogp.me/
Next SEO prend actuellement en charge :
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 >
