Aller au contenu

SEO & Accessibilité - ProbatioVault Site

Stratégie SEO et conformité WCAG 2.1 AA

SEO

Structured Data (JSON-LD)

Le site implémente deux schémas Schema.org :

Organization (src/seo/org.json)

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "ProbatioVault",
  "legalName": "ProbatioVault SASU",
  "url": "https://probatiovault.com",
  "founder": {
    "@type": "Person",
    "name": "Loïc Pontani"
  },
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "30 rue de la Varenne",
    "addressLocality": "Saint-Maur-des-Fossés",
    "postalCode": "94100",
    "addressCountry": "FR"
  },
  "contactPoint": [
    {
      "@type": "ContactPoint",
      "contactType": "customer support",
      "email": "contact@probatiovault.com",
      "availableLanguage": ["French", "English"]
    }
  ]
}

SoftwareApplication (src/seo/software.json)

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "ProbatioVault",
  "operatingSystem": "Web, iOS, Android, Windows, macOS, Linux",
  "applicationCategory": "SecurityApplication",
  "description": "Coffre-fort probatoire souverain zero-knowledge...",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "EUR"
  }
}

Meta Tags

OpenGraph

Chaque page possède des meta OpenGraph dédiées :

<meta property="og:title" content="ProbatioVault - Coffre-fort probatoire" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://probatiovault.com/og/home-fr.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:url" content="https://probatiovault.com/fr/" />

Twitter Cards

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />

Images OpenGraph

12 images optimisées (1200x630px) pour le partage social :

Page FR EN
Home home-fr.png home-en.png
Product product-fr.png product-en.png
Use Cases use-cases-fr.png use-cases-en.png
Pricing pricing-fr.png pricing-en.png
About about-fr.png about-en.png
Contact contact-fr.png contact-en.png

Hreflang

Implémentation multilingue pour Google :

<link rel="alternate" hreflang="fr" href="https://probatiovault.com/fr/" />
<link rel="alternate" hreflang="en" href="https://probatiovault.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://probatiovault.com/fr/" />

Sitemap XML

public/sitemap.xml inclut :

  • 14 URLs (7 pages x 2 langues)
  • Alternates hreflang
  • Priorités différenciées
  • Fréquences de mise à jour
<url>
  <loc>https://probatiovault.com/fr/</loc>
  <lastmod>2025-01-29</lastmod>
  <changefreq>weekly</changefreq>
  <priority>1.0</priority>
  <xhtml:link rel="alternate" hreflang="fr" href="..." />
  <xhtml:link rel="alternate" hreflang="en" href="..." />
</url>

Robots.txt

# Crawlers autorisés
User-agent: Googlebot
Allow: /

User-agent: Bingbot
Allow: /

# Crawlers IA bloqués
User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

User-agent: anthropic-ai
Disallow: /

User-agent: Claude-Web
Disallow: /

User-agent: CCBot
Disallow: /

User-agent: Google-Extended
Disallow: /

# Répertoires exclus
Disallow: /api/
Disallow: /_astro/
Disallow: /*.json$
Disallow: /admin/

Sitemap: https://probatiovault.com/sitemap.xml

Canonical URLs

Toutes les pages ont une URL canonique absolue :

<link rel="canonical" href="https://probatiovault.com/fr/product" />

Accessibilité (WCAG 2.1 AA)

Conformité ciblée

Critère Niveau Statut
1.1.1 Non-text Content A ✅
1.3.1 Info and Relationships A ✅
1.4.3 Contrast (Minimum) AA ✅
2.1.1 Keyboard A ✅
2.4.1 Bypass Blocks A ✅
2.4.4 Link Purpose A ✅
2.4.7 Focus Visible AA ✅
2.5.5 Target Size AAA ✅
3.1.1 Language of Page A ✅
3.1.2 Language of Parts AA ✅

Touch Targets (2.5.5)

Tous les éléments interactifs ont une taille minimale de 48x48px :

button, a, [role="button"] {
  min-width: 48px;
  min-height: 48px;
}

.btn {
  min-height: 48px;
  padding: 12px 24px;
}

.btn-large {
  min-height: 56px;
}

Focus Visible (2.4.7)

Indicateur de focus clairement visible :

:focus-visible {
  outline: 3px solid #185ADB;
  outline-offset: 2px;
}

/* Suppression outline par défaut seulement pour mouse */
:focus:not(:focus-visible) {
  outline: none;
}

Contrastes (1.4.3)

Élément Ratio Requis Statut
Texte principal (#111827) 15.5:1 4.5:1 ✅ AAA
Texte secondaire (#4B5563) 7.5:1 4.5:1 ✅ AAA
Liens (#185ADB) 5.2:1 4.5:1 ✅ AA
Bouton primaire (blanc/#185ADB) 5.2:1 4.5:1 ✅ AA

Taille de texte minimum

La taille de texte minimum est de 13px (0.8125rem) :

body {
  font-size: 1rem; /* 16px */
}

small, .text-sm {
  font-size: max(0.875rem, 13px);
}

.text-xs {
  font-size: max(0.75rem, 13px);
}

Structure sémantique

<!DOCTYPE html>
<html lang="fr">
<head>...</head>
<body>
  <header role="banner">
    <nav role="navigation" aria-label="Navigation principale">
      ...
    </nav>
  </header>

  <main role="main">
    <article>
      <h1>Titre principal</h1>
      <section aria-labelledby="section-1">
        <h2 id="section-1">Sous-titre</h2>
        ...
      </section>
    </article>
  </main>

  <footer role="contentinfo">
    ...
  </footer>
</body>
</html>
Touche Action
Tab Élément suivant
Shift+Tab Élément précédent
Enter Activer lien/bouton
Escape Fermer menu mobile
Space Activer bouton

Le menu mobile se ferme automatiquement : - Sur clic extérieur - Sur Escape - Sur sélection d'un lien

Attributs ARIA

<!-- Navigation mobile -->
<button aria-label="Ouvrir le menu" aria-expanded="false">
  <span class="hamburger"></span>
</button>

<!-- Formulaire newsletter -->
<input
  type="email"
  aria-label="Adresse email pour la newsletter"
  aria-required="true"
  aria-describedby="email-hint"
/>
<span id="email-hint">Nous ne partagerons jamais votre email.</span>

<!-- Langue de la page -->
<html lang="fr">
<!-- ou -->
<html lang="en">

<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 12px 24px;
  background: var(--color-bleu-securite);
  color: white;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
}

Outils de test

SEO

Accessibilité

← Retour INDEX