From 22ff74696551adc68d24bf9c5c7c5515f65aab18 Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 19 Apr 2026 14:55:17 +0200
Subject: [PATCH] feat(website): improve adopters carousel SEO and
 accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promotes the carousel label from <p> to <h2>, links the section to the
heading via aria-labelledby, adds an accessible label per chip, and
turns the opaque logo <img> tags into proper lazy-loaded assets with
explicit dimensions.

Adds a subline naming seven brands (Docker, Microsoft, HashiCorp,
Vercel, Google Cloud, AWS, Anthropic) so the homepage now has
indexable text referencing actual adopters — previously the brand
information only lived inside animated chips.

Emits a schema.org ItemList of Organization entities (JSON-LD) on the
homepage, which none of the comparable OSS sites (Vite, Biome, Astro,
Nx, Turborepo) currently expose — cheap differentiator for rich
search results.
---
 .../components/AdoptersCarousel.vue           | 39 ++++++++++++++++---
 website/.vitepress/config.ts                  | 29 ++++++++++++++
 2 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/website/.vitepress/components/AdoptersCarousel.vue b/website/.vitepress/components/AdoptersCarousel.vue
index c0031cf3..360c5c7a 100644
--- a/website/.vitepress/components/AdoptersCarousel.vue
+++ b/website/.vitepress/components/AdoptersCarousel.vue
@@ -5,10 +5,16 @@ const loop = [...adopters, ...adopters];
 </script>
 
 <template>
-  <section class="adopters-carousel">
-    <p class="label">
+  <section class="adopters-carousel" aria-labelledby="adopters-heading">
+    <h2 id="adopters-heading" class="label">
       <span class="slashes">//</span>
       Trusted by open source projects
+    </h2>
+    <p class="subline">
+      Adopted by <strong>Docker</strong>, <strong>Microsoft</strong>,
+      <strong>HashiCorp</strong>, <strong>Vercel</strong>,
+      <strong>Google Cloud</strong>, <strong>AWS</strong>,
+      <strong>Anthropic</strong> and more.
     </p>
 
     <div class="viewport">
@@ -20,10 +26,19 @@ const loop = [...adopters, ...adopters];
           target="_blank"
           rel="noopener"
           class="chip"
+          :aria-label="`${item.name} on GitHub`"
         >
-          <img :src="item.img" :alt="`${item.name} logo`" class="logo" />
+          <img
+            :src="item.img"
+            :alt="`${item.name} logo`"
+            class="logo"
+            loading="lazy"
+            decoding="async"
+            width="28"
+            height="28"
+          />
           <span class="name">{{ item.name }}</span>
-          <span class="chevron">&rarr;</span>
+          <span class="chevron" aria-hidden="true">&rarr;</span>
         </a>
       </div>
     </div>
@@ -45,7 +60,7 @@ const loop = [...adopters, ...adopters];
   color: var(--vp-c-text-2);
   text-transform: uppercase;
   text-align: center;
-  margin: 0 0 2rem;
+  margin: 0 0 0.75rem;
 }
 
 .slashes {
@@ -53,6 +68,20 @@ const loop = [...adopters, ...adopters];
   margin-right: 0.4em;
 }
 
+.subline {
+  text-align: center;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-2);
+  max-width: 640px;
+  margin: 0 auto 2rem;
+  line-height: 1.5;
+}
+
+.subline strong {
+  color: var(--vp-c-text-1);
+  font-weight: 600;
+}
+
 .viewport {
   overflow: hidden;
   -webkit-mask-image: linear-gradient(
diff --git a/website/.vitepress/config.ts b/website/.vitepress/config.ts
index 1df5e109..fbd602a7 100644
--- a/website/.vitepress/config.ts
+++ b/website/.vitepress/config.ts
@@ -9,6 +9,7 @@ import {
   localIconLoader
 } from 'vitepress-plugin-group-icons';
 import { team } from './team.ts';
+import { adopters } from './adopters.ts';
 import { taskDescription, taskName, ogUrl, ogImage } from './meta.ts';
 import { fileURLToPath, URL } from 'node:url';
 import llmstxt from 'vitepress-plugin-llms';
@@ -107,6 +108,34 @@ export default defineConfig({
       head.push(['meta', { name: 'robots', content: 'noindex, nofollow' }])
     }
 
+    // Structured data for the adopters carousel on the homepage: an ItemList
+    // of Organization entities so search engines can surface Task's adopters
+    // directly in rich results.
+    if (isHome) {
+      head.push([
+        'script',
+        { type: 'application/ld+json' },
+        JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'ItemList',
+          name: 'Organizations and projects using Task',
+          itemListOrder: 'https://schema.org/ItemListUnordered',
+          numberOfItems: adopters.length,
+          itemListElement: adopters.map((a, i) => ({
+            '@type': 'ListItem',
+            position: i + 1,
+            item: {
+              '@type': 'Organization',
+              name: a.name,
+              url: a.url,
+              logo: a.img,
+              sameAs: [a.url]
+            }
+          }))
+        })
+      ])
+    }
+
     return head
   },
   srcDir: 'src',