Avez-vous déjà voulu que votre site Next.js apparaisse comme un objet riche lorsqu'il est partagé sur les réseaux sociaux? Si tel est le cas, vous devez implémenter le protocole Open Graph.
Le package next-seo facilite l'ajout de balises Open Graph à votre site Next.js. Vous pouvez également utiliser une approche plus manuelle pour un contrôle plus fin du résultat final.
Enfin, vous voudrez déterminer exactement quelles informations inclure dans vos balises.
Qu'est-ce qu'un graphique ouvert ?
Le protocole Open Graph est une norme ouverte qui permet aux développeurs de contrôler la façon dont les médias sociaux affichent leur contenu. Il a été initialement développé par Facebook mais de nombreuses autres plateformes ont depuis adopté le protocole. Ceux-ci incluent Twitter, LinkedIn et Pinterest.
Open Graph vous permet de spécifier exactement comment les autres sites doivent afficher votre contenu, en veillant à ce qu'il soit beau et facile à lire. Cela permet également un meilleur contrôle sur le rendu des liens. Cela facilite le suivi des clics et d'autres mesures d'engagement.
Pourquoi utiliser le protocole Open Graph ?
Open Graph devrait améliorer trois domaines principaux: l'engagement sur les réseaux sociaux, le référencement et le trafic sur le site Web.
Open Graph peut aider à améliorer l'engagement sur les réseaux sociaux en facilitant le partage de votre contenu par les utilisateurs. En spécifiant comment les sites doivent afficher votre contenu, vous pouvez le rendre plus attrayant visuellement et facile à lire. Ceci, à son tour, peut conduire à plus de partages et de likes, ainsi qu'à une augmentation des taux de clics.
2. Améliorer le référencement
Open Graph peut également aider améliorez votre référencement. En spécifiant le titre, la description et l'image de chaque élément de contenu, vous pouvez contrôler la façon dont il apparaît dans les résultats de recherche. Cela peut aider à augmenter le taux de clics sur votre site Web, ainsi qu'à améliorer votre classement général.
3. Augmenter le trafic du site Web
Enfin, Open Graph peut aider à augmenter le trafic sur le site Web. En facilitant le partage de votre contenu par les utilisateurs, vous pouvez augmenter le nombre de personnes qui le voient. Ceci, à son tour, peut conduire à plus de visiteurs sur le site Web et à une augmentation du trafic.
4. Améliorer l'expérience utilisateur
Un autre avantage de l'utilisation du protocole Open Graph est qu'il peut améliorer l'expérience utilisateur sur votre site Web. En incluant des métadonnées, vous pouvez faciliter l'accessibilité et réutiliser les données, en vous assurant que les utilisateurs voient les informations les plus pertinentes. Cela peut conduire à une meilleure expérience globale sur votre site, ce qui peut entraîner un plus grand nombre de visiteurs récurrents.
Pourquoi utiliser Next.js ?
Il y a deux raisons principales d'utiliser Next.js: pour améliorer les performances et pour faciliter le développement.
1. Améliorer les performances
Next.js peut aider à améliorer les performances en fractionnant le code de votre application et en préchargeant les ressources. Cela peut entraîner un temps de chargement plus rapide et une charge serveur réduite.
2. Facilitez le développement
Next.js peut également faciliter le développement en fournissant un moyen simple de créer des applications React rendues par le serveur. Cela peut accélérer et faciliter le développement et le déploiement d'applications React.
Comment implémenter le protocole Open Graph dans Next.js
Il existe deux façons d'implémenter le protocole Open Graph dans Next.js: en utilisant le package next-seo ou en créant un _document.js dossier.
Méthode 1: Utilisation du paquet next-seo
Le moyen le plus simple d'implémenter le protocole Open Graph dans Next.js consiste à utiliser le package next-seo. Ce package générera automatiquement les balises nécessaires pour vous.
Pour installer le package next-seo, exécutez la commande suivante :
npm installerSuivant-seo --enregistrerAprès avoir installé le package, vous pouvez l'utiliser en ajoutant le code suivant à votre index.js dossier:
importer { NextSeo } de 'prochain-seo';constante DemoPage = () => (
<>
<NextSeo
titre="Votre titre"
descriptif="Ceci est une description de démonstration"
canonique="https://www.example.com"
openGraph={{
URL: 'https://www.example.com',
Titre: 'Ouvrir le titre du graphique',
la description: 'Ouvrir la description du graphique',
images: [
{
URL: 'https://www.example.com/og-image01.jpg',
largeur: 800,
hauteur: 600,
autre: 'Og Image Alt',
taper: 'image/jpeg',
},
{
URL: 'https://www.example.com/og-image02.jpg',
largeur: 900,
hauteur: 800,
autre: 'Og Image Alt Seconde',
taper: 'image/jpeg',
},
{ URL: 'https://www.exemple.com/og-image03.jpg' },
{ URL: 'https://www.exemple.com/og-image04.jpg' },
],
nom du site: 'VotreNomSite',
}}
gazouillement={{
manipuler: '@manipuler',
placer: '@placer',
type de carte: 'summary_large_image',
}}
/>
<p>Page de démonstration</p>
</>
);
exporterdéfaut Page de démonstration ;
Ce code importe le composant NextSeo du package next-seo et l'utilise pour spécifier le titre, la description et l'image de la page. Il spécifie également le nom du site et le pseudo Twitter.
Exécutez la commande suivante pour démarrer le serveur de développement :
npm run devOuvert http://localhost: 3000 dans votre navigateur pour voir la page de démonstration.
Méthode 2: Utilisation du fichier personnalisé _document.js
Une autre façon d'implémenter le protocole Open Graph dans Next.js consiste à créer un _document.js dossier. Ce fichier vous permettra de spécifier vous-même les balises Open Graph et créer du code réutilisable pour toutes les pages.
Pour configurer une personnalisation _document.js fichier, créez un nouveau fichier dans votre pages répertoire avec le contenu suivant :
importer Document, { Html, En-tête, Principal, NextScript } de 'Suivant/document';classerMon documents'étendDocument{
statiqueasynchrone getInitialProps (ctx) {
constante propsinitiales = attendre Document.getInitialProps (ctx);
revenir { ...propsinitiaux } ;
}rendre() {
revenir (
<HTML>
<Tête>
<méta propriété="og: url" contenu="https://www.example.com" />
<méta propriété="og: titre" contenu="Ouvrir le titre du graphique" />
<méta propriété="og: description" contenu="Ouvrir la description du graphique" />
<méta propriété="og: image" contenu="https://www.example.com/og-image.jpg" />
<méta propriété="og: nom_du_site" contenu="VotreNomSite" />
<méta nom="twitter: carte" contenu="summary_large_image" />
<méta nom="twitter: site" contenu="@placer" />
<méta nom="twitter: créateur" contenu="@manipuler" />
</Head>
<corps>
<Principal />
<NextScript />
</body>
</Html>
);
}
}
exporterdéfaut Mon document;
Ajoutez le contenu ci-dessous à votre fichier index.js :
constante DemoPage = () => (
<>
<p>Page de démonstration</p>
</>
);
exporterdéfaut Page de démonstration ;
Ce code importe le composant Document de next/document et crée un fichier personnalisé Mon document composant. Il spécifie le titre, la description et l'image de notre page, ainsi que le nom du site et le pseudo Twitter.
Exécutez la commande suivante pour démarrer le serveur de développement :
npm run devOuvert http://localhost: 3000 dans votre navigateur pour voir la page de démonstration.
L'ajout de balises Open Graph à votre site Web peut vous donner plus de contrôle sur la façon dont il apparaît dans les publications sur les réseaux sociaux et peut aider à améliorer les taux de clics. Vous pouvez également améliorer la façon dont votre site Web apparaît dans les SERP, ce qui peut finalement conduire à un meilleur classement du site Web.
Il existe également de nombreuses autres façons d'améliorer le classement du site. Vous devez optimiser votre site Web pour les appareils mobiles et utiliser des titres et des descriptions riches en mots clés. Mais l'utilisation des balises Open Graph est un moyen rapide et facile de démarrer.