Improve SEO, accessibility, and i18n

thibaudgg · thibaudgg · commit 25957323d4e8 · 2026-01-18T17:00:33.000+01:00
SEO improvements:
- Add Open Graph meta tags (og:title, og:description, og:image, og:url, etc.)
- Add Twitter Card meta tags for social sharing
- Add comprehensive Schema.org structured data (WebSite, Organization, SoftwareApplication, WebPage)
- Fix heading hierarchy (h1 → h2 → h3) for proper document outline
- Fix dynamic lang attribute (was hardcoded to 'fr')
- Add scroll-mt-24 for better anchor navigation
- Auto-generate og-image.png (1200x630) via favicon-maker

Accessibility improvements:
- Add skip navigation link (visually hidden, visible on focus)
- Improve color contrast in footer (text-gray-500 → text-gray-600)
- Add localized alt text for organization logos

i18n improvements:
- Fix incomplete German sentence in contact section (missing 'erreichen')
- Replace &amp;nbsp; HTML entities with CSS whitespace-nowrap
- Use semantic &lt;span class='font-semibold'&gt; instead of &lt;strong&gt; for numbers
- Add SEPA Direct Debit emphasis in German billing description

Bug fixes:
- Fix mg:gap-4 typo → md:gap-4
- Fix unclosed &lt;header&gt; tag

Cleanup:
- Remove unused jsonld from site.yml (now dynamic in layout.erb)
diff --git a/config.rb b/config.rb
@@ -56,6 +56,11 @@
     rel: 'shortcut icon',
     size: '64x64,32x32,24x24,16x16',
     icon: 'favicon.ico'
+  },
+  {
+    rel: 'og-image',
+    size: '1200x630',
+    icon: 'og-image.png'
   }
 ]
 
diff --git a/data/site.yml b/data/site.yml
@@ -12,19 +12,3 @@ author:
   name: "Thibaud Guillaume-Gentil"
   email: "thibaud@thibaud.gg"
   website: "https://thibaud.gg"
-
-jsonld:
-  "@context": "http://schema.org"
-  "@type": "WebSite"
-  "url": "https://csa-admin.org"
-  "inLanguage": "en"
-  "hasPart":
-    - "@type": "WebPage"
-      "url": "https://csa-admin.org"
-      "inLanguage": "en"
-    - "@type": "WebPage"
-      "url": "https://csa-admin.org/acp"
-      "inLanguage": "fr"
-    - "@type": "WebPage"
-      "url": "https://csa-admin.org/solawi"
-      "inLanguage": "de"
diff --git a/locales/de.yml b/locales/de.yml
@@ -1,13 +1,14 @@
 de:
+  skip_to_content: Zum Hauptinhalt springen
   about:
     application: Open-Source-Webanwendung
     other_orgs: zahlreichen anderen Organisationen
     text: Ursprünglich entwickelt, um die Verwaltung von %{ragedevert} in Neuchâtel (CH) zu vereinfachen, entwickelt sich CSA Admin stetig weiter, um den vielfältigen Anforderungen von %{other_orgs} in der Schweiz und Deutschland gerecht zu werden. CSA Admin ist eine %{application}. Es soll einfach, effizient und intuitiv sein. Mit Leidenschaft entwickelt %{author} CSA Admin seit über 10 Jahren, um den Alltag in CSAs zu erleichtern.
-    title: Über CSA&nbsp;Admin
+    title: Über CSA Admin
   call_to_action: Demo anfordern
   contact:
-    text: Möchten Sie mehr über CSA Admin erfahren? Haben Sie Fragen? Zögern Sie nicht, mich für weitere Informationen und/oder zur Vereinbarung einer Demo zu kontaktieren. Sie können mich per E-Mail unter %{mail}. Ich beantworte gerne alle Ihre Fragen.
-    title: Interessiert? Fordern&nbsp;Sie&nbsp;eine&nbsp;Demo&nbsp;an!
+    text: Möchten Sie mehr über CSA Admin erfahren? Haben Sie Fragen? Zögern Sie nicht, mich für weitere Informationen und/oder zur Vereinbarung einer Demo zu kontaktieren. Sie können mich per E-Mail unter %{mail} erreichen. Ich beantworte gerne alle Ihre Fragen.
+    title: Interessiert? Fordern Sie eine Demo an!
   email: E-Mail
   features:
     activity:
@@ -17,10 +18,10 @@ de:
       description: Verteilen Sie Ihre Ernten effizient, indem Sie die Größe oder den Preis der Anteile berücksichtigen – und behalten Sie dabei stets den Wert Ihrer Anteile sowie den Ernteverlauf im Blick.
       title: Anteilinhalt und -wert
     billing:
-      description: Erstellt und versendet QR-Rechnungen, überwacht tägliche Zahlungseingänge (EBICS) und SEPA-Lastschriften und verschickt automatisch Mahnungen.
+      description: Erstellt und versendet QR-Rechnungen, überwacht tägliche Zahlungseingänge (EBICS), unterstützt <strong>SEPA-Lastschriften</strong> und verschickt automatisch Mahnungen.
       title: Automatisierte Abrechnung
     communication:
-      description: Passen Sie jede E-Mail individuell an – von Inhalt bis Stil. Unser integriertes Newsletter-System macht’s möglich.
+      description: Passen Sie jede E-Mail individuell an – von Inhalt bis Stil. Unser integriertes Newsletter-System macht's möglich.
       title: Personalisierte Kommunikation
     deliveries:
       description: Planen Sie Ihre Lieferungen flexibel – egal, ob zwei Lieferungen pro Woche oder jede zweite Woche. Abwesenheiten werden automatisch berücksichtigt.
@@ -53,13 +54,14 @@ de:
   org_name: "Solawi"
   org_name_definition: "Solidarische Landwirtschaft"
   organizations:
-    subtitle: Ob Sie ein Verein, eine Genossenschaft, ein Unternehmen oder eine Einzelperson sind, CSA&nbsp;Admin passt sich Ihren Bedürfnissen an.
-    title: Sie nutzen CSA&nbsp;Admin
+    logo_alt: "Logo von %{name}"
+    subtitle: Ob Sie ein Verein, eine Genossenschaft, ein Unternehmen oder eine Einzelperson sind, CSA Admin passt sich Ihren Bedürfnissen an.
+    title: Sie nutzen CSA Admin
   phone: Telefon
   site:
     description: Open-Source-Webanwendung für effiziente Solawi-Verwaltung (Solidarische Landwirtschaft). Vereinfachen Sie Ihre Abläufe – Demo jetzt anfordern!
     title: "CSA Admin - Effizientere Verwaltung Ihrer Solawi"
     path: /solawi
-  subtitle: Seit 2014 nutzen %{orgs_link} CSA Admin, um ihre täglichen Aufgaben zu erleichtern und die jährliche Verteilung von über <strong>%{baskets_count} Anteilen</strong> zu verwalten. Schließen Sie sich ihnen an!
-  subtitle_orgs_link: zahlreiche&nbsp;Organisationen
-  title: Effizientere %{org_name}&#8209;Verwaltung.
+  subtitle: Seit 2014 nutzen %{orgs_link} CSA Admin, um ihre täglichen Aufgaben zu erleichtern und die jährliche Verteilung von über <span class='font-semibold'>%{baskets_count} Anteilen</span> zu verwalten. Schließen Sie sich ihnen an!
+  subtitle_orgs_link: <span class="whitespace-nowrap">zahlreiche Organisationen</span>
+  title: Effizientere <span class="whitespace-nowrap">%{org_name}-Verwaltung.</span>
diff --git a/locales/en.yml b/locales/en.yml
@@ -1,13 +1,14 @@
 en:
+  skip_to_content: Skip to main content
   about:
     application: open-source web application
     other_orgs: many other organizations
     text: Initially created to simplify the management of %{ragedevert} in Neuchâtel (CH), CSA Admin has continuously improved and expanded over the years to meet the diverse needs of %{other_orgs} in Switzerland and Germany. CSA Admin is an %{application}. It aims to be simple, efficient, and intuitive. It is developed with passion by %{author}, who has been committed for over 10 years to simplifying the lives of CSAs to help them thrive.
-    title: About CSA&nbsp;Admin
+    title: About CSA Admin
   call_to_action: Request a demo
   contact:
     text: Would you like to know more about CSA Admin? Do you have any questions? Feel free to contact me for more information and/or to schedule a demo. You can reach me by email at %{mail}. I'll be happy to answer all your questions.
-    title: Interested? Request&nbsp;a&nbsp;demo!
+    title: Interested? Request a demo!
   email: Email
   features:
     activity:
@@ -40,7 +41,7 @@ en:
       description: Offer your subscribers <strong>additional products</strong> to enhance their basket with each delivery. An online shop is available on their member account. Stock management included!
       title: Online Shop
     subtitle: "CSA Admin offers you a wide range of features specifically developed for the needs of <span class='whitespace-nowrap'><strong class='text-logo-green'>C</strong>ommunity <strong class='text-logo-green'>S</strong>upported <strong class='text-logo-green'>A</strong>griculture</span>."
-    subtitle2: "Each CSA is unique, so some modules are optional, at your convenience. Other&nbsp;needs? Just ask!"
+    subtitle2: "Each CSA is unique, so some modules are optional, at your convenience. Other needs? Just ask!"
     title: "Everything you need …"
     title2: "… and much more!"
   footer:
@@ -53,13 +54,14 @@ en:
   org_name: "CSA"
   org_name_definition: "Community Supported Agriculture"
   organizations:
-    subtitle: Whether you are an association, a cooperative, a business, or an individual, CSA&nbsp;Admin adapts to your needs.
-    title: They use CSA&nbsp;Admin
+    logo_alt: "Logo of %{name}"
+    subtitle: Whether you are an association, a cooperative, a business, or an individual, CSA Admin adapts to your needs.
+    title: They use CSA Admin
   phone: Phone
   site:
     description: Open-source web app to efficiently manage your CSA (Community Supported Agriculture). Simplify your operations and request a demo today!
     title: "CSA Admin - Streamline your CSA management"
     path: ""
-  subtitle: "Since 2014, %{orgs_link} have been using CSA Admin to facilitate their daily tasks and manage the annual distribution of over <strong>%{baskets_count} baskets</strong>. Join them!"
-  subtitle_orgs_link: many&nbsp;organizations
-  title: Streamline your&nbsp;%{org_name} management.
+  subtitle: "Since 2014, %{orgs_link} have been using CSA Admin to facilitate their daily tasks and manage the annual distribution of over <span class='font-semibold'>%{baskets_count} baskets</span>. Join them!"
+  subtitle_orgs_link: <span class="whitespace-nowrap">many organizations</span>
+  title: Streamline your <span class="whitespace-nowrap">%{org_name} management.</span>
diff --git a/locales/fr.yml b/locales/fr.yml
@@ -1,13 +1,14 @@
 fr:
+  skip_to_content: Aller au contenu principal
   about:
     application: application web open source
     other_orgs: de nombreuses autres organisations
     text: Initialement créée pour simplifier la gestion de %{ragedevert} à Neuchâtel (CH), CSA Admin n'a cessé de s'améliorer et de s'agrandir au fil des années pour répondre aux besoins divers et variés %{other_orgs} en Suisse et en Allemagne. CSA Admin est une %{application}. Elle se veut simple, efficace et intuitive. Elle est développée avec passion par %{author}, qui s'engage depuis plus de 10 ans à simplifier la vie des ACP pour les aider à prospérer.
-    title: À propos de CSA&nbsp;Admin
+    title: À propos de CSA Admin
   call_to_action: Demander une démo
   contact:
     text: Vous souhaitez en savoir plus sur CSA Admin? Vous avez des questions? N'hésitez pas à me contacter pour plus d'informations et/ou pour planifier une démo. Vous pouvez me joindre par e-mail à l'adresse %{mail}. Je me ferai un plaisir de répondre à toutes vos questions.
-    title: Intéressé·e? Demandez&nbsp;une&nbsp;démo!
+    title: Intéressé·e? Demandez une démo!
   email: E-mail
   features:
     activity:
@@ -53,13 +54,14 @@ fr:
   org_name: ACP
   org_name_definition: Agriculture Contractuelle de Proximité
   organizations:
-    subtitle: Que vous soyez une association, une coopérative, une entreprise ou un particulier, CSA&nbsp;Admin s'adapte à vos besoins.
-    title: Ils·Elles utilisent CSA&nbsp;Admin
+    logo_alt: "Logo de %{name}"
+    subtitle: Que vous soyez une association, une coopérative, une entreprise ou un particulier, CSA Admin s'adapte à vos besoins.
+    title: Ils·Elles utilisent CSA Admin
   phone: Téléphone
   site:
     description: Application web open source pour gérer efficacement votre ACP (Agriculture Contractuelle de Proximité). Simplifiez vos opérations, demandez une démo!
     title: CSA Admin - Simplifiez la gestion de votre ACP
     path: /acp
-  subtitle: Depuis 2014, %{orgs_link} utilisent CSA Admin pour faciliter leurs tâches quotidiennes et gérer la distribution annuelle de plus de <strong>%{baskets_count} paniers</strong>. Rejoignez-les !
-  subtitle_orgs_link: de&nbsp;nombreuses&nbsp;organisations
-  title: Simplifiez la gestion de votre&nbsp;%{org_name}.
+  subtitle: Depuis 2014, %{orgs_link} utilisent CSA Admin pour faciliter leurs tâches quotidiennes et gérer la distribution annuelle de plus de <span class='font-semibold'>%{baskets_count} paniers</span>. Rejoignez-les !
+  subtitle_orgs_link: <span class="whitespace-nowrap">de nombreuses organisations</span>
+  title: Simplifiez la gestion de <span class="whitespace-nowrap">votre %{org_name}.</span>
diff --git a/source/_footer.erb b/source/_footer.erb
@@ -3,13 +3,13 @@
     <li>
       <%= link_to "EN", "/", class: "font-semibold p-1 #{"active" unless current_page?("/") }" %>
     </li>
-    <li class="text-gray-500 font-extralight text-xs">
+    <li class="text-gray-400 font-extralight text-xs">
       /
     </li>
     <li>
       <%= link_to "FR", '/acp', class: "font-semibold p-1 #{"active" unless current_page?('/acp') }" %>
     </li>
-    <li class="text-gray-500 font-extralight text-xs">
+    <li class="text-gray-400 font-extralight text-xs">
       /
     </li>
     <li>
@@ -28,7 +28,7 @@
     </strong>
   </div>
 
-  <p class="mt-4 md:mt-8 text-center text-sm text-gray-500">
-    <%= I18n.t("footer.developed_by", author_link: link_to(data.site.author.name, data.site.author.website, class: 'whitespace-nowrap no-underline text-gray-500 font-normal', title: "thibaud.gg")) %>
+  <p class="mt-4 md:mt-8 text-center text-sm text-gray-600">
+    <%= I18n.t("footer.developed_by", author_link: link_to(data.site.author.name, data.site.author.website, class: 'whitespace-nowrap no-underline text-gray-600 font-normal', title: "thibaud.gg")) %>
   </p>
 </footer>
diff --git a/source/_header.erb b/source/_header.erb
@@ -32,4 +32,4 @@
   <div class="flex items-center gap-4 w-full md:text-base md:w-fit mt-6 md:mt-0 md:ml-16 justify-center md:justify-end">
     <%= link_to (inline_svg('envelope.svg', class: 'w-6 h-6 md:order-2 mr-2 md:mr-0 md:ml-2 mt-0.5', alt: t('email')) + content_tag(:strong, data.site.contact.email, class: 'font-semibold md:order-1')).html_safe, data.site.contact.email_link, class: 'flex items-center no-underline text-gray-800', title: t('email') %>
   </div>
-</header
+</header>
diff --git a/source/_index.erb b/source/_index.erb
@@ -2,17 +2,17 @@
   <%= I18n.t 'title', org_name: content_tag(:span, t("org_name"), class: "text-logo-green drop-shadow-sm", title: t("org_name_definition")) %>
 </h1>
 
-<h2 class="mt-4 mx-auto md:w-4/6 text-center md:leading-normal text-xl font-light">
+<p class="mt-4 mx-auto md:w-4/6 text-center md:leading-normal text-xl font-light">
   <%= I18n.t 'subtitle', orgs_link: link_to(t('subtitle_orgs_link'), '#organizations'), baskets_count: format_number(data.site.baskets_count) %>
-</h2>
+</p>
 
 <div class="mt-12 md:mt-8 block text-center">
   <%= link_to t('call_to_action'), '#contact', class: 'mx-auto text-center px-6 py-3 bg-logo-green hover:bg-green-700 text-base md:text-lg text-white hover:text-white no-underline font-bold rounded-full' %>
 </div>
 
-<h3 id="features" class="mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-tight text-2xl md:text-4xl font-extrabold">
+<h2 id="features" class="mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-tight text-2xl md:text-4xl font-extrabold scroll-mt-24">
   <%= t("features.title") %>
-</h3>
+</h2>
 <p class="mt-2 mx-auto md:w-4/6 text-center md:leading-normal text-xl font-normal">
   <%= t("features.subtitle") %>
 </p>
@@ -60,7 +60,7 @@
   <%= t("features.subtitle2") %>
 </p>
 
-<div class="mt-10 md:grid md:grid-cols-3 mg:gap-4 lg:gap-6">
+<div class="mt-10 md:grid md:grid-cols-3 md:gap-4 lg:gap-6">
   <%= partial 'feature', locals: { \
       logo: 'building-storefront', \
       title: t('features.shop.title'), \
@@ -78,31 +78,31 @@
     } %>
 </div>
 
-<h3 id="organizations" class="mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-tight text-2xl md:text-4xl font-extrabold">
+<h2 id="organizations" class="mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-tight text-2xl md:text-4xl font-extrabold scroll-mt-24">
   <%= t("organizations.title") %>
-</h3>
+</h2>
 <p class="mt-2 mx-auto md:w-7/12 text-center md:leading-normal text-xl font-normal">
   <%= t("organizations.subtitle") %>
 </p>
 
 <div class="mt-10 mx-auto px-4 grid grid-cols-3 md:grid-cols-7 gap-6 lg:gap-8">
-  <% data.organizations.each do |org, data| %>
-    <%= link_to image_tag("https://cdn.csa-admin.org/logos/#{org}", alt: "#{data.name} (logo)", title: data.name), data.url, class: 'size-16 md:size-20 lg:size-24 mx-auto flex items-center no-underline', title: data.name %>
+  <% data.organizations.each do |org, org_data| %>
+    <%= link_to image_tag("https://cdn.csa-admin.org/logos/#{org}", alt: I18n.t('organizations.logo_alt', name: org_data.name), title: org_data.name), org_data.url, class: 'size-16 md:size-20 lg:size-24 mx-auto flex items-center no-underline', title: org_data.name %>
   <% end %>
 </div>
 
-<h4 id="contact" class="mt-20 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold">
+<h2 id="contact" class="mt-20 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold scroll-mt-24">
   <%= t("contact.title") %>
-</h4>
+</h2>
 <p class="mt-4 mx-auto md:w-7/12 text-justify leading-normal text-lg">
   <%= I18n.t("contact.text", mail: link_to(data.site.contact.email, data.site.contact.email_link, class: 'whitespace-nowrap')) %>
 </p>
 
 <span class="mt-16 mx-auto block w-52 h-1 rounded-full bg-gradient-to-r from-logo-green to-green-600"></span>
 
-<h4 id="about" class="mt-8 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold">
+<h2 id="about" class="mt-8 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold scroll-mt-24">
   <%= t("about.title") %>
-</h4>
+</h2>
 <p class="mt-4 mx-auto md:w-7/12 text-justify leading-normal text-lg">
   <%= I18n.t("about.text", \
     ragedevert: link_to('Rage de Vert', 'https://www.ragedevert.ch', class: 'whitespace-nowrap'), \
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
diff --git a/source/stylesheets/site.css b/source/stylesheets/site.css
diff --git a/source/stylesheets/tailwind.css b/source/stylesheets/tailwind.css

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,11 @@`
`56`	`56`	`rel: 'shortcut icon',`
`57`	`57`	`size: '64x64,32x32,24x24,16x16',`
`58`	`58`	`icon: 'favicon.ico'`
	`59`	`+ },`
	`60`	`+ {`
	`61`	`+ rel: 'og-image',`
	`62`	`+ size: '1200x630',`
	`63`	`+ icon: 'og-image.png'`
`59`	`64`	`}`
`60`	`65`	`]`
`61`	`66`