Skip to content

Commit 95d4d60

Browse files
committed
Enhance accessibility with structured tags
1 parent 5e70a22 commit 95d4d60

4 files changed

Lines changed: 9 additions & 22 deletions

File tree

src/components/BaseHead.astro

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,26 @@ interface Props {
1414
}
1515
1616
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
17-
1817
const { title, description, image = FallbackImage } = Astro.props;
1918
---
2019

2120
<!-- Global Metadata -->
2221
<meta charset="utf-8" />
2322
<meta name="viewport" content="width=device-width,initial-scale=1" />
23+
<meta name="description" content={description} />
24+
<title>{title}</title>
25+
<link rel="canonical" href={canonicalURL} />
2426
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
2527
<link rel="icon" href="/favicon.ico" />
2628
<link rel="sitemap" href="/sitemap-index.xml" />
2729
<link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={new URL("rss.xml", Astro.site)} />
28-
<meta name="generator" content={Astro.generator} />
2930

30-
<!-- Font -->
31+
<!-- Fonts -->
3132
<Font cssVariable="--font-atkinson" />
3233

33-
<!-- Canonical URL -->
34-
<link rel="canonical" href={canonicalURL} />
35-
36-
<!-- Primary Meta Tags -->
37-
<title>{title}</title>
38-
<meta name="title" content={title} />
39-
<meta name="description" content={description} />
40-
41-
<!-- Open Graph / Facebook -->
34+
<!-- OpenGraph -->
4235
<meta property="og:type" content="website" />
4336
<meta property="og:url" content={Astro.url} />
4437
<meta property="og:title" content={title} />
4538
<meta property="og:description" content={description} />
4639
<meta property="og:image" content={new URL(image.src, Astro.url)} />
47-
48-
<!-- Twitter -->
49-
<meta property="twitter:card" content="summary_large_image" />
50-
<meta property="twitter:url" content={Astro.url} />
51-
<meta property="twitter:title" content={title} />
52-
<meta property="twitter:description" content={description} />
53-
<meta property="twitter:image" content={new URL(image.src, Astro.url)} />

src/components/Header.astro

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { SITE_TITLE } from "../consts";
33
import HeaderLink from "./HeaderLink.astro";
44
---
55

6+
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>
67
<header>
7-
<nav>
8+
<nav aria-label="Primary">
89
<h2><a href="/">{SITE_TITLE}</a></h2>
910
<div class="internal-links">
1011
<HeaderLink href="/">Home</HeaderLink>

src/layouts/BlogPost.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
5757

5858
<body>
5959
<Header />
60-
<main>
60+
<main id="main-content">
6161
<article>
6262
<div class="hero-image">
6363
{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}

src/pages/index.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
1212
</head>
1313
<body>
1414
<Header />
15-
<main>
15+
<main id="main-content">
1616
<h1>🧑‍🚀 Hello, Astronaut!</h1>
1717
<p>
1818
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.

0 commit comments

Comments
 (0)