Enhance accessibility with structured tags

rdhar · rdhar · commit 95d4d60c025d · 2026-04-12T17:10:23.000+01:00
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -14,40 +14,26 @@ interface Props {
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const { title, description, image = FallbackImage } = Astro.props;
 ---
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
+<meta name="description" content={description} />
+<title>{title}</title>
+<link rel="canonical" href={canonicalURL} />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="icon" href="/favicon.ico" />
 <link rel="sitemap" href="/sitemap-index.xml" />
 <link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={new URL("rss.xml", Astro.site)} />
-<meta name="generator" content={Astro.generator} />
 
-<!-- Font -->
+<!-- Fonts -->
 <Font cssVariable="--font-atkinson" />
 
-<!-- Canonical URL -->
-<link rel="canonical" href={canonicalURL} />
-
-<!-- Primary Meta Tags -->
-<title>{title}</title>
-<meta name="title" content={title} />
-<meta name="description" content={description} />
-
-<!-- Open Graph / Facebook -->
+<!-- OpenGraph  -->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image.src, Astro.url)} />
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
-<meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -3,8 +3,9 @@ import { SITE_TITLE } from "../consts";
 import HeaderLink from "./HeaderLink.astro";
 ---
 
+<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>
 <header>
-  <nav>
+  <nav aria-label="Primary">
     <h2><a href="/">{SITE_TITLE}</a></h2>
     <div class="internal-links">
       <HeaderLink href="/">Home</HeaderLink>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -57,7 +57,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
   <body>
     <Header />
-    <main>
+    <main id="main-content">
       <article>
         <div class="hero-image">
           {heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
   </head>
   <body>
     <Header />
-    <main>
+    <main id="main-content">
       <h1>🧑‍🚀 Hello, Astronaut!</h1>
       <p>
         Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.
