! Profitez de rabais et prix exceptionnelle d'introduction, contactez-nous sur ce numéro : 
Introduction
À l’ère du numérique, où plus de 93 % des expériences en ligne débutent par un moteur de recherche, il est essentiel d’assurer un bon positionnement de votre site dans les résultats pour attirer du trafic organique. Ce trafic n’est pas seulement une question de quantité, mais aussi de qualité. Selon une étude de BrightEdge, 53 % du trafic des sites web provient de la recherche organique, faisant du SEO le principal levier d’acquisition de visiteurs.
Le SEO est crucial pour augmenter la visibilité de votre site dans les résultats de recherche, attirant ainsi des visiteurs qualifiés sans les coûts récurrents de la publicité. Au-delà de la visibilité, des pratiques SEO efficaces améliorent l’expérience utilisateur. L’algorithme de classement de Google intègre désormais des critères tels que la vitesse de chargement des pages et l’adaptabilité mobile, qui influencent directement la perception de votre marque par les utilisateurs.
De plus, des données de HubSpot révèlent que 75 % des utilisateurs ne dépassent jamais la première page des résultats de recherche, soulignant l’importance vitale d’apparaître parmi les premiers. Optimiser la structure, le contenu et la navigation de votre site améliore non seulement votre classement sur les moteurs de recherche, mais augmente également les taux de conversion en fournissant aux utilisateurs des informations pertinentes et facilement accessibles.
Intégrer le SEO dans votre stratégie digitale n’est pas seulement une question de rester compétitif, c’est aussi une opportunité à saisir. Un site bien optimisé renforce la crédibilité et l’autorité de votre marque, avec 57 % des marketeurs B2B affirmant que le SEO génère plus de prospects que toute autre initiative marketing.
Alors, comment pouvez-vous bénéficier de tous ces avantages — meilleure visibilité, trafic qualifié et distinction par rapport à la concurrence — tout en utilisant des technologies modernes comme Next.js 14 ? Explorons ensemble les meilleures pratiques SEO pour maximiser le potentiel de votre site web.
Mise en place de votre projet Next.js
Avant de plonger dans les meilleures pratiques SEO, assurez-vous d’avoir une application Next.js. Si ce n’est pas le cas, vous pouvez en créer une en suivant la documentation officielle de Next.js.
La structure de votre projet devrait ressembler à ceci :
mon-site-next/
├── src/
│ ├── app/
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ ├── global.css
│ │ └── favicon.ico
│ ├── components/
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.jsonLanguage:textComment nous collaborons avec vous
Penser en grand
Nous transformons vos ambitions en objectifs concrets, en mettant l'innovation au cœur de notre collaboration.
Commencer petit
Nous commençons par des solutions pragmatiques, puis évoluons avec agilité pour maximiser votre succès à chaque étape.
Créer rapidement
Notre équipe réactive transforme les idées en résultats concrets, accélérant votre croissance et votre impact.
Innover à grande échelle
Nous repoussons les limites pour vous aider à saisir les opportunités à grande échelle, garantissant une collaboration visionnaire.
Favicon
Le favicon (ou favorite icon) est une petite image affichée dans l’onglet du navigateur, à côté du titre de la page. Il aide les visiteurs à identifier rapidement votre site parmi plusieurs onglets ouverts.
Bien que petit, le favicon joue un rôle important dans l’expérience utilisateur et la crédibilité de votre site web. Un favicon bien conçu renforce l’identité visuelle de votre marque, améliore la mémorisation de votre site et facilite la navigation. Bien qu’il ne soit pas un facteur de classement SEO direct, un favicon personnalisé et professionnel peut améliorer la perception de votre site et encourager la fidélité des utilisateurs, ce qui est bénéfique pour votre SEO global.
Chez Tekru, nous utilisons un excellent outil appelé Real Favicon Generator pour générer des favicons. C’est un outil gratuit et facile à utiliser qui vous permet de créer un package de favicons compatible avec tous les navigateurs et appareils. Vous pouvez personnaliser le design du favicon, le prévisualiser en temps réel et générer les fichiers et le code nécessaires pour l’implémenter sur votre site.
Une fois généré, ajoutez le package de favicons compressé dans le dossier app de votre projet Next.js. Le package doit contenir les fichiers suivants :
favicon.ico
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifestLanguage:textEnsuite, ajoutez le code suivant au fichier layout.tsx pour inclure le favicon dans votre application Next.js :
import urlJoin from "url-join";
export function generateMetadata(props?: any): Metadata {
const siteUrl = process.env.NEXT_PUBLIC_PUBLIC_URL;
if (!siteUrl) {
throw new Error("NEXT_PUBLIC_PUBLIC_URL is missing from .env");
}
// Autres métadonnées
const otherMetadata = {};
return {
...otherMetadata,
generator: "Jamy by Tekru Technologies",
icons: {
icon: urlJoin(siteUrl, "/assets/favicons/favicon.ico"),
shortcut: urlJoin(siteUrl, "/assets/favicons/favicon.ico"),
apple: urlJoin(siteUrl, "/assets/favicons/apple-touch-icon.png"),
},
manifest: urlJoin(siteUrl, "/assets/favicons/site.webmanifest"),
} as Metadata;
}Language:typescriptCe fragment de code génère les métadonnées pour votre application Next.js, y compris le favicon. La fonction generateMetadata retourne un objet contenant les métadonnées nécessaires pour l’application, telles que l’URL du site et les URLs des favicons. La fonction urlJoin est utilisée pour concaténer l’URL du site avec les chemins des favicons afin de générer les URLs complètes.
OpenGraph et image OpenGraph
OpenGraph est un protocole qui vous permet de contrôler l’apparence de votre contenu lorsqu’il est partagé sur des plateformes de réseaux sociaux comme Facebook, Twitter et LinkedIn. En définissant des métadonnées OpenGraph dans votre HTML, vous pouvez spécifier le titre, la description, l’image et d’autres informations qui seront affichées lorsque votre contenu est partagé.
L’image OpenGraph est un élément clé de ce protocole. Elle doit être visuellement attrayante, pertinente par rapport au contenu et optimisée pour le partage sur les réseaux sociaux.
Pour ajouter des métadonnées OpenGraph ainsi qu’une image OpenGraph à votre application Next.js, vous pouvez utiliser la fonction generateMetadata dans le fichier layout.tsx. Voici un exemple de définition des métadonnées OpenGraph et de l’image OpenGraph :
import urlJoin from "url-join";
export function generateMetadata(props?: any): Metadata {
const siteUrl = process.env.NEXT_PUBLIC_PUBLIC_URL;
if (!siteUrl) {
throw new Error("NEXT_PUBLIC_PUBLIC_URL is missing from .env");
}
// Autres métadonnées
const meta = {} as Metadata;
const defaultImage = "URL_IMAGE_PAR_DÉFAUT";
const blogPost = {} as Blog;
let image = defaultImage;
if (blogPost.image) {
if (typeof blogPost.image === "string") {
image = blogPost.image;
} else if (blogPost.image?.src) {
// Cas pour WordPress
image = blogPost.image.src;
}
}
// Ajouter l'URL du site à l'image si c'est un chemin relatif
if (image && !image.startsWith("http")) {
image = urlJoin(siteUrl, image);
}
// Fonction pour obtenir la langue ou locale
const lng = getLocale();
meta.openGraph = {
siteName: "Titre de la page ou de l'article",
images: [{ url: image, width: 1714, height: 900 }],
locale: lng ? `${lng.toLowerCase()}` : "fr_FR",
type: "website", // Utilisez "article" pour les articles de blog
title: meta.title,
description: meta.description,
};
meta.twitter = {
card: "summary_large_image",
title: meta.title,
description: meta.description,
images: meta.openGraph.images,
};
return meta;
}Language:typescriptMétadonnées HTML
Statique
Dans Next.js 14, l’objet metadata est utilisé pour définir les métadonnées essentielles de vos pages web, telles que les titres, descriptions et images. Ces informations sont cruciales pour le SEO, car elles aident les moteurs de recherche et les réseaux sociaux à comprendre et à afficher correctement le contenu de vos pages.
Voici un exemple illustrant les propriétés les plus importantes pour optimiser votre SEO :
import { Metadata } from "next";
// Définir les métadonnées pour la page
export const metadata: Metadata = {
// Configuration du titre de la page
title: {
// Titre par défaut utilisé si aucun autre titre n'est spécifié
default: "Mon Site", // Ce titre sera affiché pour les pages sans titre spécifique
// Modèle de titre permettant la personnalisation du titre de chaque page
template: "%s | Mon Site", // Le %s sera remplacé par le titre spécifique de la page
},
// Description de la page pour les moteurs de recherche
description: "Description de votre site web",
// Liste de mots-clés pertinents pour la page
keywords: ["site web", "articles", "actualités", "blog"],
// Configuration de l'aperçu Twitter
twitter: {
// Type de carte Twitter, généralement 'summary_large_image' pour une grande image
card: "summary_large_image",
// Nom d'utilisateur Twitter associé à la page
site: "@votrePseudoTwitter",
// Titre de la page pour les aperçus Twitter
title: "Titre de la page pour Twitter",
// Description de la page pour les aperçus Twitter
description: "Description pour Twitter",
// Image utilisée pour les aperçus Twitter
image: "/images/twitter-image.jpg",
},
// Configuration OpenGraph pour les aperçus sur les réseaux sociaux
openGraph: {
// Titre de la page pour les aperçus OpenGraph
title: "Titre de la page pour OpenGraph",
// Description de la page pour les aperçus OpenGraph
description: "Description pour OpenGraph",
// Images utilisées pour les aperçus OpenGraph
images: ["/images/opengraph-image.jpg"],
// URL de la page pour les aperçus OpenGraph
url: "https://votresite.com/page",
// Type de contenu pour OpenGraph
type: "website",
},
// Définit comment la page doit être affichée sur différents appareils
viewport: "width=device-width, initial-scale=1",
// URL canonique de la page pour éviter les problèmes de contenu dupliqué
canonical: "https://www.monsiteweb.com",
};Language:typescriptDynamique
Les métadonnées statiques sont pratiques, mais pour les pages dynamiques, il est nécessaire que les métadonnées changent en fonction du contenu. Par exemple, chaque article de blog doit avoir son propre titre, description et image OpenGraph. Voici comment réaliser cela :
Dans page.tsx, utilisez generateMetadata pour définir dynamiquement les métadonnées d’un article de blog :
import { Metadata } from "next";
export async function generateMetadata({ params }): Promise<Metadata> {
const postId = params.id;
const response = await fetch(`https://votresite.com/api/posts/${postId}`);
const post = await response.json();
const title = post.title;
const description = post.excerpt;
const imageUrl = post.image;
return {
title: title,
description: description,
openGraph: {
title: title,
description: description,
images: [imageUrl],
url: `https://www.monsiteweb.com/article/${postId}`,
type: "article",
},
twitter: {
card: "summary_large_image",
title: title,
description: description,
image: imageUrl,
},
canonical: `https://www.monsiteweb.com/article/${postId}`,
};
}Language:typescriptComment nous collaborons avec vous
Penser en grand
Nous transformons vos ambitions en objectifs concrets, en mettant l'innovation au cœur de notre collaboration.
Commencer petit
Nous commençons par des solutions pragmatiques, puis évoluons avec agilité pour maximiser votre succès à chaque étape.
Créer rapidement
Notre équipe réactive transforme les idées en résultats concrets, accélérant votre croissance et votre impact.
Innover à grande échelle
Nous repoussons les limites pour vous aider à saisir les opportunités à grande échelle, garantissant une collaboration visionnaire.
Techniques supplémentaires pour améliorer le SEO
Web Vitals
Les Web Vitals sont une initiative de Google pour mesurer la qualité de l’expérience utilisateur sur le web. Ces métriques sont essentielles pour améliorer la performance, l’accessibilité et l’expérience globale des utilisateurs de votre site.
Les métriques principales sont :
- Largest Contentful Paint (LCP) : Mesure la performance de chargement. Un bon score LCP est de 2,5 secondes ou moins.
- First Input Delay (FID) : Mesure l’interactivité. Un bon score FID est de 100 millisecondes ou moins.
- Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle. Un bon score CLS est de 0,1 ou moins.
Next.js inclut un suivi intégré des Web Vitals. Vous pouvez configurer le rapport de ces métriques comme suit :
// pages/_app.tsx
import { AppProps } from "next/app";
export function reportWebVitals(metric) {
// Envoyer les métriques à une API ou un service d'analyse
fetch("/api/analytics", {
method: "POST",
body: JSON.stringify(metric),
});
}
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;Language:typescriptGénération du Sitemap
Un sitemap est un fichier XML qui liste toutes les pages de votre site, aidant ainsi les moteurs de recherche à indexer votre contenu plus efficacement.
Créez un fichier next-sitemap.config.js à la racine de votre projet :
module.exports = {
siteUrl: process.env.NEXT_PUBLIC_PUBLIC_URL || "https://votresite.com",
generateRobotsTxt: true,
sitemapSize: 7000,
};Language:javascriptInstallez le package next-sitemap :
npm install next-sitemapLanguage:textAjoutez un script dans votre package.json :
"scripts": {
"postbuild": "next-sitemap"
}Language:jsonAprès chaque build, le sitemap sera généré automatiquement.
Configuration de robots.txt
Le fichier robots.txt donne des instructions aux moteurs de recherche sur les pages à explorer ou à ignorer.
Avec next-sitemap, le fichier robots.txt est généré automatiquement en utilisant la configuration précédente.
Conclusion
Le SEO est un élément essentiel pour tout site web souhaitant se démarquer dans un environnement en ligne compétitif. En adoptant ces meilleures pratiques avec Next.js 14, vous améliorez non seulement votre visibilité sur les moteurs de recherche, mais vous offrez également une meilleure expérience utilisateur.
Chez Tekru, nous sommes experts en développement Next.js et en optimisation SEO. Si vous avez besoin d’assistance pour votre site web ou si vous souhaitez en savoir plus sur la façon dont nous pouvons vous aider à renforcer votre présence en ligne, contactez-nous dès aujourd’hui.
