svelte:head для динамических метатегов
Вставляйте специфичные для страницы теги и в заголовок документа
«svelte:head для динамических метатегов» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Элемент svelte:head
Используйте <svelte:head>, чтобы добавлять элементы в заголовок документа.
Настройка заголовка
Внутри него можно размещать любые теги заголовка документа, например title или meta.
<svelte:head>
<title>{post.title}</title>
</svelte:head>Заголовки для отдельных страниц
Каждая страница может задать собственный заголовок для SEO и подписи вкладки.
Динамические метаданные
Подставляйте переменные в описание, ключевые слова и теги OG.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>Совместимость с SSR
svelte:head работает во время SSR, поэтому теги заголовка документа попадают в исходный HTML для поисковых роботов.
Несколько блоков svelte:head
В одном компоненте может быть несколько блоков <svelte:head>.
В макетах
Задавайте значения по умолчанию в макетах и переопределяйте их для каждой страницы.
Избегайте дублирования тегов
SvelteKit удаляет более ранние экземпляры уникальных тегов, например title, когда задаётся более поздний.
Теги OG
Добавьте og:title, og:description и og:image для расширенных предпросмотров в социальных сетях (об этом далее).
Канонические ссылки
Задавайте канонические адреса внутри svelte:head.
<link rel="canonical" href={canonicalUrl} />Рекомендации по SEO
Уникальные заголовки и описания для каждой страницы повышают её видимость в поиске.
Быстрая проверка
Для чего нужен svelte:head?
Итоги
<svelte:head> задаёт теги заголовка документа для конкретной страницы — заголовки, метаданные и ссылки — как при SSR, так и при навигации на клиенте.
Часто задаваемые вопросы
Урок «svelte:head для динамических метатегов» бесплатный?
Да — полный текст урока «svelte:head для динамических метатегов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «svelte:head для динамических метатегов»?
Вставляйте специфичные для страницы теги и в заголовок документа Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «svelte:head для динамических метатегов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- svelte:head для динамических метатегов
- Метаданные OpenGraph и Twitter Card
- Структурированные данные JSON-LD в SvelteKit
- Канонические URL и создание карты сайта