SEO On Page

À un niveau élevé, le SEO On Page fait référence aux titres et liens qui constituent la structure globale de la page. Les titres indiquent l'importance dans le document et les liens connectent le web entre eux.

Titres et H1

Les titres aident les utilisateurs à comprendre la structure d'une page et ce qu'ils vont lire dans les paragraphes suivants. Ils facilitent également le travail des moteurs de recherche pour comprendre quelles parties de la page sont les plus importantes.

Les titres vont de 1 à 6 et le Titre 1 est généralement considéré comme le plus important. Il est recommandé d'utiliser la balise H1 sur chaque page. Le H1 doit représenter le sujet de la page et être similaire à votre balise title.

function Page() {
  return <h1>Votre titre principal de page</h1>;
}

Liens internes

Internet est connecté par des liens. Sans liens d'un site web à un autre, Internet n'existerait probablement pas. Les sites web qui reçoivent plus de liens ont tendance à représenter des sites plus fiables aux yeux des utilisateurs.

Google a initié ce principe avec l'invention de l'Algorithme PageRank.

L'algorithme PageRank, globalement, est un algorithme qui parcourt chaque lien d'une base de données et note les domaines en fonction du nombre de liens qu'ils reçoivent (quantité) et des domaines d'origine (qualité). De nombreux liens provenant de sites spam ont très probablement peu ou pas de valeur.

Un lien provenant d'un grand site de presse national, en revanche, est probablement très précieux pour les moteurs de recherche. C'est pourquoi les liens sont importants et vous devriez toujours les inclure à la fois en interne entre vos pages, et aussi en externe vers d'autres sites web. Les liens doivent toujours utiliser href pour être pris en compte dans les calculs du PageRank.

next/link

Next.js fournit le composant Link qui permet des transitions côté client entre les routes. Un cas d'utilisation simple ressemblerait à ceci :

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

La prop href est obligatoire et ajoutera correctement le lien à la balise d'ancrage, ce qui est vital pour le SEO. Lorsque Google explore une page, il explorera et suivra ce lien sans dépendre de JavaScript.

Cependant, si l'enfant de Link est un composant personnalisé qui englobe une balise a, vous devez ajouter passHref à Link. Ceci est nécessaire si vous utilisez des bibliothèques comme styled-components. Sans cela, la balise a n'aura pas l'attribut href, ce qui affecte le SEO de votre site.

Comment utiliser passHref :

import Link from 'next/link';
import styled from 'styled-components';
 
// Ceci crée un composant personnalisé qui englobe une balise <a>
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // Doit ajouter passHref à Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

Si vous utilisez ESLint, Next.js dispose d'une règle pour éviter que cela ne se produise.

Pour aller plus loin

• Next.js : Link
• Next.js : eslint-plugin-next