Checklist SEO développeur

Ceci est une checklist à destination du développeur sur les points à vérifier pour faciliter le SEO du projet web. Ne seront donc PAS précisés tous les sujets relevant du designer / rédacteur.

Le référencement moderne implique autant les moteurs de recherche que les réseaux sociaux. Il faut s'assurer que le contenu soit bien interprété par les deux.

SEO naturel

Méta Données

Quelques outils pour bien travailler

OpenGraph

Voici une bonne base documentée à copier-coller dans votre code en remplaçant les valeurs. Pour aller plus loin, voir la doc de The Open Graph protocol.

<!-- OpenGraph, à placer sous la balise <title> -->
<!-- Pour plus d'informations : https://ogp.me/ -->
<!-- Titre : penser à faire un titre assez court qui décrit bien la page, comme pour le SEO classique -->
<meta property="og:title" content="SEO pour les Samouraïs" />

<!-- Description : Une description 100% texte (donc pas de liens), très similaire à la meta description classique -->
<meta
  property="og:description"
  content="Une description 100% texte (donc pas de liens), très similaire à la meta description classique"
/>

<meta property="og:type" content="article" />

<!-- URL : URL cannonique, version desktop, sans variable de session, sans pagination ou autre compteur, cette URL ne devrait jamais changer (en utilisant généralement un uid) -->
<meta property="og:url" content="http://www.example.com/article/tt0117500/" />

<!-- Image : attention, si vous souhaitez changer cette image avec le temps, bien penser à changer l'URL de l'image aussi (avec un paramètre de requête ?v=27365 par exemple), car Facebook les téléchargent une fois pour toutes. taille recommandée : 1200 par 630 -->
<meta property="og:image" content="http://example.com/images/seo.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Partie spécifique à Twitter -->
<!-- Pour plus d'infos : https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started -->
<!-- Format du média riche affiché, voir la doc pour les possibilités -->
<meta name="twitter:card" content="summary_large_image" />

<!-- Compte twitter du site cannonique (a qui appartient le domaine) -->
<meta name="twitter:site" content="@site" />

<!-- Compte twitter du créateur du contenu de la page précise -->
<meta name="twitter:creator" content="@creator" />

<!-- Image spécifique pour twitter, 150 par 150 pour le type summary, 560 par 300 pour summary_large_image -->
<meta name="twitter:image" content="http://example.com/images/seo.jpg" />

Données structurées

Voici un exemple qui remplace l'URL dans les résultats de recherche par un fil d'ariane. À placer dans le <body>. Le code est copié depuis la documentation de Google sur les Données structurées.

Créez une nouvelle balise <script> pour chaque bloc de données structurées.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Authors",
        "item": "https://example.com/books/authors"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Ann Leckie",
        "item": "https://example.com/books/authors/annleckie"
      }
    ]
  }
</script>

Optimisations mobiles

Google dispose désormais de 2 index différents : un pour les résultats mobiles, et un autre pour le reste (principalement les résultats desktop).

Il est donc primordial de faire attention à soigner et optimiser l'aspect mobile de votre projet web.

Une méta viewport bien calibrée : <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
Si vous créez une PWA, alors vous pouvez ajouter les meta tags spécifiques Apple ainsi qu'un manifest.json
Générez toutes les icones pour les différents appareils mobiles sur Real Favicon Generator
Lancez un audit sur Lighthouse et atteignez un score le plus élevé possible (80 est un minimum)

Outils SEO généralistes

Ces outils ne sont pas là pour aider le développeur mais le marketer. Je les ajoute tout de même car cela fait un très bon complément à cette checklist.

WooRank : outil complet et généraliste, interface très agréable, priorisation des actions à mener, génération de rapports pdf
Google Keyword Planner : Pour affiner son choix de mots-clés afin de sortir des termes trop génériques
Google Trends : afin de comparer l'évolution de popularité des mots-clés
Google Search Console : pour surveiller l'état des recherches et des liens, permets de vérifier s'il y a des backlinks depuis des mauvais sites (spam)
SpyFu : découvrez la stratégie de mots clés de vos concurrents

Alex-Web-Github/seo-checklist-dev