From 4391f9f139ee535e3df9adba3e8eaef6564fefb7 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Mon, 24 Aug 2026 22:01:40 -0400
Subject: [PATCH] feat: add an H1 and intro copy to the landing homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The homepage had no H1 (the hero heading is an SVG image), which
hurts how crawlers and AI agents read the page. The tagline under the
hero is now an h1 on the homepage — visually unchanged — with an
sr-only 'Shepherd.js' prefix so the H1 names the brand, and a short
descriptive intro paragraph gives no-JS readers meaningful content.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 landing/src/components/Header.astro       | 15 +++++++++---
 landing/src/pages/index.astro             |  7 ++++++
 landing/test/homepage-content.e2e.test.ts | 28 +++++++++++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 landing/test/homepage-content.e2e.test.ts

diff --git a/landing/src/components/Header.astro b/landing/src/components/Header.astro
index 666e339eb..9653e480c 100644
--- a/landing/src/components/Header.astro
+++ b/landing/src/components/Header.astro
@@ -72,9 +72,18 @@ const { isHome } = Astro.props;
       alt={SITE_TITLE}
     />
 
-    <h2 class="font-body p-2 text-xl">
-      Guide your users through a tour of your app
-    </h2>
+    {
+      isHome ? (
+        <h1 class="font-body p-2 text-xl">
+          <span class="sr-only">Shepherd.js — </span>
+          Guide your users through a tour of your app
+        </h1>
+      ) : (
+        <h2 class="font-body p-2 text-xl">
+          Guide your users through a tour of your app
+        </h2>
+      )
+    }
 
     {
       isHome && (
diff --git a/landing/src/pages/index.astro b/landing/src/pages/index.astro
index 9117855e0..ce5864681 100644
--- a/landing/src/pages/index.astro
+++ b/landing/src/pages/index.astro
@@ -38,6 +38,13 @@ Astro.response.headers.set(
   </div>
 
   <div slot="content">
+    <p class="font-body mx-auto max-w-2xl p-2 text-xl">
+      Shepherd is an open-source JavaScript library for building guided product
+      tours, user onboarding, and feature announcements. Attach accessible,
+      customizable steps to any element in your app — in React, Ember, Angular,
+      Vue.js, or plain JavaScript.
+    </p>
+
     <div class="hero-including mt-8" id="hero-including">
       <h3 class="demo-heading font-heading text-2xl uppercase">
         01. How to Include
diff --git a/landing/test/homepage-content.e2e.test.ts b/landing/test/homepage-content.e2e.test.ts
new file mode 100644
index 000000000..1343a5102
--- /dev/null
+++ b/landing/test/homepage-content.e2e.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import { visibleText } from './helpers';
+import { TEST_BASE_URL } from './setup/dev-server';
+
+describe('homepage content without JavaScript', () => {
+  it('serves HTML with an H1 naming the brand', async () => {
+    const response = await fetch(`${TEST_BASE_URL}/`, {
+      headers: { Accept: 'text/html' }
+    });
+    const html = await response.text();
+
+    expect(response.status).toBe(200);
+    expect(html).toMatch(/<h1[\s>]/);
+
+    const h1 = html.match(/<h1[^>]*>([\s\S]*?)<\/h1>/);
+    expect(visibleText(h1![1]!)).toContain('Shepherd');
+  });
+
+  it('has 500+ chars of visible text in the raw HTML', async () => {
+    const response = await fetch(`${TEST_BASE_URL}/`, {
+      headers: { Accept: 'text/html' }
+    });
+    const html = await response.text();
+
+    expect(visibleText(html).length).toBeGreaterThan(500);
+  });
+});