svelte:head dla dynamicznych tagów meta
Wstrzykuj specyficzne dla strony tagi i do sekcji head dokumentu.
svelte:head dla dynamicznych tagów meta to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Element svelte:head
Proszę użyć <svelte:head>, aby wstrzyknąć elementy do sekcji head dokumentu.
Ustawianie tytułu
Wewnątrz można umieścić dowolne znaczniki sekcji head, takie jak title lub meta.
<svelte:head>
<title>{post.title}</title>
</svelte:head>Tytuły poszczególnych stron
Każda strona może ustawić własny tytuł na potrzeby SEO i etykiety karty.
Dynamiczne metadane
Proszę interpolować zmienne w opisie, słowach kluczowych i znacznikach OG.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>Zgodność z SSR
svelte:head działa podczas SSR, więc znaczniki sekcji head pojawiają się w początkowym kodzie HTML dostępnym dla robotów indeksujących.
Wiele bloków svelte:head
W jednym komponencie można mieć wiele bloków <svelte:head>.
W układach
Proszę ustawić wartości domyślne w układach i nadpisywać je dla poszczególnych stron.
Unikanie zduplikowanych znaczników
SvelteKit usuwa wcześniejsze wystąpienia unikatowych znaczników, takich jak title, gdy zostanie ustawione późniejsze.
Open Graph
Proszę dodać og:title, og:description i og:image, aby uzyskać rozbudowane podglądy w mediach społecznościowych (zostanie to omówione dalej).
Linki kanoniczne
Proszę ustawić kanoniczne adresy URL wewnątrz svelte:head.
<link rel="canonical" href={canonicalUrl} />Dobre praktyki SEO
Unikatowe tytuły i opisy dla każdej strony poprawiają jej widoczność w wynikach wyszukiwania.
Szybkie sprawdzenie
Co robi svelte:head?
Podsumowanie
<svelte:head> ustawia właściwe dla strony znaczniki sekcji head, takie jak tytuły, metadane i linki, zarówno podczas SSR, jak i nawigacji po stronie klienta.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „svelte:head dla dynamicznych tagów meta” jest bezpłatna?
Tak — pełny tekst „svelte:head dla dynamicznych tagów meta” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „svelte:head dla dynamicznych tagów meta”?
Wstrzykuj specyficzne dla strony tagi i do sekcji head dokumentu. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „svelte:head dla dynamicznych tagów meta”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- svelte:head dla dynamicznych tagów meta
- OpenGraph i metadane Twitter Card
- Dane strukturalne JSON-LD w SvelteKit
- Kanoniczne adresy URL i generowanie mapy witryny