Svelte

svelte/kit-page-title

Every SvelteKit page sets its own descriptive title in svelte:head, or its layout renders a title from page data.

poważnastatyczneWCAG 2.4.2 · Afe-sveltekit

Dlaczego

After a client-side navigation SvelteKit announces the new page to screen readers by reading its <title>. A page without its own title keeps the previous page's title (or the layout's single title): the announcement, the browser tab, the history entry and the search result all name the wrong page.

Poprawka

Put <svelte:head><title>Orders – Example Shop</title></svelte:head> in each +page.svelte, most specific part first. For many pages, return title from load and render <title>{page.data.title}</title> once in +layout.svelte (with page from $app/state). An SEO component that receives a title prop counts.

Przykłady

<!-- bad: src/routes/orders/+page.svelte -->
<h1>Your orders</h1>
<!-- good -->
<svelte:head><title>Your orders – Example Shop</title></svelte:head>
<h1>Your orders</h1>

Źródła

Fakty

Identyfikator
svelte/kit-page-title
Waga
poważna
Sprawdzanie
statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików
project
Tylko w projektach z
sveltekit
WCAG 2.2
2.4.2, poziom A
Uczy jej skill
fe-sveltekit SvelteKit apps
Od wersji
0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain svelte/kit-page-title