SEO & Accessibilité - ProbatioVault Site¶

Stratégie SEO et conformité WCAG 2.1 AA

SEO¶

Structured Data (JSON-LD)¶

Le site implémente plusieurs 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"
  }
}

WebSite (`src/seo/website.json`)¶

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ProbatioVault",
  "alternateName": "Coffre-fort probatoire souverain",
  "url": "https://probatiovault.com",
  "inLanguage": ["fr", "en"],
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://probatiovault.com/fr/faq?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Product & FAQPage (Pages Pricing)¶

Les pages /fr/pricing/ et /en/pricing/ incluent des schémas inline :

Product avec 4 offres (Essentiel, Premium, Business RH, Professionnels)
FAQPage avec les questions fréquentes sur les tarifs

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:site" content="@probatiovault" />
<meta name="twitter:creator" content="@probatiovault" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />

Theme Color¶

<meta name="theme-color" content="#0A2540" />

Robots¶

Indexation conditionnelle selon l'environnement :

<!-- Production -->
<meta name="robots" content="index, follow" />

<!-- Développement / Staging -->
<meta name="robots" content="noindex, nofollow" />

Géré automatiquement via import.meta.env.PROD dans BaseLayout.astro.

Images OpenGraph¶

14 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	`usecases-fr.png`	`usecases-en.png`
Pricing	`pricing-fr.png`	`pricing-en.png`
FAQ	`faq-fr.png`	`faq-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 :

22 URLs (11 pages x 2 langues)
Alternates hreflang pour chaque page
Images OpenGraph associées
Priorités différenciées (1.0 pour home, 0.3 pour pages légales)
Fréquences de mise à jour (weekly, monthly, yearly)

<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">

Skip Links¶

<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

SEO & Accessibilité - ProbatioVault Site¶

SEO¶

Structured Data (JSON-LD)¶

Organization (src/seo/org.json)¶

SoftwareApplication (src/seo/software.json)¶

WebSite (src/seo/website.json)¶

Product & FAQPage (Pages Pricing)¶

Meta Tags¶

OpenGraph¶

Twitter Cards¶

Theme Color¶

Robots¶

Images OpenGraph¶

Hreflang¶

Sitemap XML¶

Robots.txt¶

Canonical URLs¶

Accessibilité (WCAG 2.1 AA)¶

Conformité ciblée¶

Touch Targets (2.5.5)¶

Focus Visible (2.4.7)¶

Contrastes (1.4.3)¶

Taille de texte minimum¶

Structure sémantique¶

Navigation clavier¶

Attributs ARIA¶

Skip Links¶

Outils de test¶

SEO¶

Accessibilité¶

Organization (`src/seo/org.json`)¶

SoftwareApplication (`src/seo/software.json`)¶

WebSite (`src/seo/website.json`)¶