Bonnes pratiques SEO

---

Sommaire

1. Avant le go-live : Pré-requis techniques
2. Structure & balisage HTML (articles de blog inclus)
3. Métadonnées & Open Graph
4. Données structurées (Schema.org / JSON-LD)
5. Multilingue & hreflang
6. Redirections & migration d'URL
7. Performance & Core Web Vitals
8. Indexation (robots.txt, sitemap, canonical)
9. Checklist finale de mise en ligne

Cases à cocher persistantes

Coche les tâches au fil de ton projet et clique sur le libellé pour déplier le détail. L'état des cases est conservé pendant toute la durée de ta session de navigation (il se réinitialise à la fermeture du navigateur). Le bouton "Réinitialiser" remet la liste à zéro.

1. Avant le go-live

Avant le go-live0 / 0

<meta name="robots" content="noindex, nofollow"> + X-Robots-Tag: noindex dans les headers + restriction IP / Basic Auth.

robots.txt de prod prêt et distinct de celui de staging (voir section 8).

Redirect 301 HTTP -> HTTPS, HSTS activé.

www vs non-www : une seule version canonique, l'autre redirigée en 301.

Pas de trailing slash incohérent : choisir une règle et s'y tenir.

Vérification via DNS TXT de préférence.

GA4, Matomo, Plausible... avec respect de la LPD.

2. Structure & balisage HTML

Règles de base sur chaque template

• Un seul <h1> par page, correspondant au titre principal de contenu (pas le logo).
• Hiérarchie stricte h1 -> h2 -> h3 sans saut de niveau.
• Balises sémantiques HTML5 : <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Navigation principale dans <nav> avec aria-label.
• Fil d'Ariane (breadcrumbs) balisé en JSON-LD (voir section 4).

Structure recommandée pour un article de blog

<article>
  <header>
    <h1>@Model.Title</h1>                      <!-- UNIQUE : titre de l'article -->
    <p class="meta">
      <time datetime="@Model.PublishDate.ToString("yyyy-MM-dd")">
        @Model.PublishDate.ToString("dd MMMM yyyy")
      </time>
      - par <a rel="author" href="@authorUrl">@author.Name</a>
    </p>
  </header>

  <p class="lead">@Model.Intro</p>             <!-- chapô / résumé -->

  <h2>Premier grand thème</h2>                 <!-- H2 = sections principales -->
  <p>...</p>

  <h3>Sous-point</h3>                          <!-- H3 = sous-sections du H2 -->
  <p>...</p>

  <h2>Deuxième grand thème</h2>
  ...

  <footer>
    <ul class="tags">...</ul>
  </footer>
</article>

Règles éditoriales pour le Rich Text Editor (TinyMCE / Block Editor)

• Retirer l'option H1 du RTE dans config/umbracoSettings.config (ou via Data Type), le H1 doit venir du template, pas du rédacteur.
• Autoriser uniquement h2, h3, h4, p, ul, ol, blockquote, a.
• URL des images via GetCropUrl() pour bénéficier du redimensionnement et du WebP natif.

Liens & ancres

• Liens internes avec libellés descriptifs (jamais "cliquez ici").
• rel="noopener noreferrer" sur tout target="_blank".
• rel="nofollow ugc" pour les liens utilisateurs/commentaires.

3. Métadonnées & Open Graph

Créer un Composition Umbraco SeoMetadata héritée par tous les Document Types :

Propriété	Alias	Type	Règle
Meta Title	metaTitle	Textbox	50-65 car. : fallback sur Name
Meta Description	metaDescription	Textarea	140-155 car. : fallback sur intro
OG Image	ogImage	Media	1200x630, < 300 Ko
Canonical override	canonicalUrl	Textbox	Optionnel
No-index	hideFromSearch	Boolean	Cascade aux enfants

Template partiel _Meta.cshtml :

@inherits UmbracoViewPage<IPublishedContent>
@{
    var title = Model.Value<string>("metaTitle").IfNullOrEmpty(Model.Name);
    var desc  = Model.Value<string>("metaDescription");
    var canonical = Model.Value<string>("canonicalUrl").IfNullOrEmpty(Model.Url(mode: UrlMode.Absolute));
    var ogImg = Model.Value<IPublishedContent>("ogImage");
}
<title>@title</title>
<meta name="description" content="@desc" />
<link rel="canonical" href="@canonical" />

<meta property="og:type"        content="website" />
<meta property="og:title"       content="@title" />
<meta property="og:description" content="@desc" />
<meta property="og:url"         content="@canonical" />
@if (ogImg != null)
{
    <meta property="og:image" content="@ogImg.Url(mode: UrlMode.Absolute)" />
}
<meta name="twitter:card" content="summary_large_image" />

4. Données structurées

Injecter du JSON-LD dans le <head> via un partial _StructuredData.cshtml.

Organization (site-wide, sur la home)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Nom de l'entreprise",
  "url": "https://www.exemple.ch",
  "logo": "https://www.exemple.ch/logo.png",
  "sameAs": ["https://www.linkedin.com/company/..."]
}
</script>

BreadcrumbList (toutes les pages profondes)

@{
    var crumbs = Model.Ancestors().Reverse().Concat(new[]{ Model }).ToList();
}
<script type="application/ld+json">
{
  "@@context":"https://schema.org",
  "@@type":"BreadcrumbList",
  "itemListElement":[
    @for (int i = 0; i < crumbs.Count; i++)
    {
        @(i > 0 ? "," : "")
        <text>{
          "@@type":"ListItem",
          "position":@(i+1),
          "name":"@crumbs[i].Name",
          "item":"@crumbs[i].Url(mode: UrlMode.Absolute)"
        }</text>
    }
  ]
}
</script>

Article / BlogPosting (sur les articles de blog)

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Titre",
  "image": ["https://..."],
  "datePublished": "2026-04-14T08:00:00+02:00",
  "dateModified": "2026-04-14T10:00:00+02:00",
  "author": { "@type": "Person", "name": "..." },
  "publisher": {
    "@type": "Organization",
    "name": "...",
    "logo": { "@type": "ImageObject", "url": "https://.../logo.png" }
  },
  "mainEntityOfPage": "https://www.exemple.ch/blog/article"
}

Autres types utiles selon le contenu : Product, FAQPage, LocalBusiness, Event, Recipe. Valider avec Rich Results Test.

5. Multilingue & hreflang

• Utiliser les Language Variants natifs d'Umbraco (Vary by Culture activé sur les Document Types concernés).
• Une URL distincte par culture : /fr/..., /de/..., /en/... (ou sous-domaines selon choix).
• Générer les balises hreflang dans le <head> pour toutes les variantes publiées, y compris la page courante et x-default.

@foreach (var culture in Model.Cultures)
{
    var url = Model.Url(culture.Key, UrlMode.Absolute);
    <link rel="alternate" hreflang="@culture.Key.ToLower()" href="@url" />
}
<link rel="alternate" hreflang="x-default" href="@Model.Url("fr-ch", UrlMode.Absolute)" />

Règles :

• Codes ISO corrects : fr-ch, de-ch, en (pas fr_CH ni FR).
• Réciprocité obligatoire : si A pointe vers B, B doit pointer vers A.
• Ne pas mélanger contenus traduits et contenus régionaux (duplicates).

6. Redirections & migration d'URL

Pendant la refonte

Migration d'URL0 / 0

Crawl Screaming Frog + Search Console + access logs.

1:1 de préférence, sinon vers la page la plus pertinente. Jamais tout rediriger vers la home.

Toutes les redirections en 302 pendant 1 jour (si erreurs) puis 301 (permanent).

Pas de chaînes (A -> B -> C) : rediriger directement A -> C.

UTM, etc.

Outils Umbraco

• URL Tracker natif (Umbraco 8+) : gère automatiquement les 301 quand un nœud est renommé ou déplacé. Vérifier que la table UmbracoRedirectUrl est bien alimentée.
• Skybrud.Umbraco.Redirects pour gérer les redirections manuelles via le back-office.

7. Performance & Core Web Vitals

Objectifs : LCP < 2.5 s, INP < 200 ms, CLS < 0.1.

Performance & Core Web Vitals0 / 0

Utiliser GetCropUrl() / ImageSharp avec WebP/AVIF en sortie pour toutes les images du site.

Exemple complet (couvre aussi le lazy loading, le decoding et les dimensions explicites) :

<img src="@Model.Image.GetCropUrl(800, 450, furtherOptions: "&format=webp")"
     srcset="@Model.Image.GetCropUrl(400,225,furtherOptions:"&format=webp") 400w,
             @Model.Image.GetCropUrl(800,450,furtherOptions:"&format=webp") 800w,
             @Model.Image.GetCropUrl(1600,900,furtherOptions:"&format=webp") 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="800" height="450"
     loading="lazy" decoding="async"
     alt="@Model.Image.Value<string>("altText")" />

loading="lazy" sur toutes les images, sauf l'image above-the-fold (candidate LCP).

decoding="async" sur les images.

Dimensions width/height explicites pour éviter le CLS.

Smidge, Webpack, Vite...

Critical CSS inliné dans le <head>.

JS non-critique en defer ou async.

GTM, chats, etc. en async.

jQuery si pas requis, polyfills anciens.

Output cache Umbraco activé sur les pages cacheables.

Headers HTTP : Cache-Control: public, max-age=31536000, immutable sur les assets versionnés.

Activée au niveau serveur / CDN.

Vérifier que le serveur / CDN sert le site en HTTP/2 ou HTTP/3.

Cloudflare, Azure CDN, BunnyCDN...

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/main.woff2" crossorigin>

Évite la requête tiers.

font-display: swap.

Sous-ensembles (subset=latin) pour réduire le poids.

Audit Lighthouse >= 90 sur mobile avant le go-live.

PageSpeed Insights sur les 5 pages principales.

CrUX, Search Console -> Core Web Vitals.

8. Indexation

robots.txt (prod)

User-agent: *
Allow: /
Disallow: /umbraco/
Disallow: /umbraco/api/
Disallow: /install/

Sitemap: https://www.exemple.ch/sitemap.xml

Sitemap XML & Canonical

Sitemap & canonical0 / 0

Package UmbracoCms.NET.Seo / SEO Toolkit ou implémentation custom via un SurfaceController.

Exclure les pages hideFromSearch, les pages sans template, les variantes non publiées.

Inclure <lastmod> basé sur UpdateDate.

Si multilingue : inclure <xhtml:link rel="alternate" hreflang="..."> dans chaque <url>.

Soumettre le sitemap dans Google Search Console.

Une balise <link rel="canonical"> sur chaque page.

Self-referencing par défaut, override possible via le champ canonicalUrl.

L'URL canonique doit respecter les règles choisies pour le www, le trailing slash et la casse.

9. Checklist finale (jour du go-live)

Jour du go-live0 / 0

robots.txt de prod déployé (sans Disallow: /).

Plus de noindex résiduel.

DNS basculé, HTTPS actif, certificat valide.

Toutes les 301 de migration en place et testées (échantillon de 20 anciennes URL).

Sitemap accessible et soumis à Google Search Console.

GA4 / tag manager fire correctement sur la prod.

Search Console : vérifier la couverture d'indexation après 48 h.

Screaming Frog : 0 lien cassé, 0 redirect chain, tous les titres / descriptions présents.

Sur la home + un article de blog + une fiche produit / service.

Lighthouse mobile >= 90 perf / 100 SEO / 100 best practices.

Backup de la base de données et du dossier /media avant bascule.

Contributors

Clément Favre

Changelog

Last edited about 2 months ago

View full history

25a5b0f-docs: convert SEO checklists to interactive ProdChecklist

b07d2bb-docs: add Crans-Montana headless and police intranets to parc inventory