Метаданные OpenGraph и Twitter Card
Добавляйте метатеги og: и twitter: для расширенных превью ссылок в социальных сетях
«Метаданные OpenGraph и Twitter Card» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужны теги OG
Метаданные Open Graph позволяют социальным платформам (Facebook, LinkedIn, Slack) показывать расширенные предпросмотры при публикации ссылок.
Обязательные теги OG
og:title, og:description, og:image и og:url — самые важные теги.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Размер изображения
Для лучшего отображения на разных платформах рекомендуется размер изображения OG 1200x630.
Карточки Twitter
Twitter учитывает теги OG, но также поддерживает собственные метаданные twitter: для более точной настройки.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Типы карточек
Twitter поддерживает карточки summary, summary_large_image, app и player.
Проверка
Используйте отладчик публикаций Facebook и средство проверки карточек Twitter, чтобы просматривать теги.
Абсолютные адреса
Адреса изображений OG должны быть абсолютными; относительные пути не работают.
Настройка для каждой страницы
Задавайте теги OG отдельно для статьи, товара или профиля, чтобы предпросмотр отражал контекст.
Избегайте дублирования значений по умолчанию
Задавайте общие значения по умолчанию в корневом макете и переопределяйте их для каждой страницы.
Кэширование
Социальные платформы кэшируют данные OG. Используйте их отладчики для обновления кэша.
Практический эффект
Расширенные предпросмотры значительно повышают долю переходов по ссылкам, опубликованным в социальных сетях.
Быстрая проверка
Почему адреса изображений OG должны быть абсолютными?
Итоги
Добавляйте метаданные OG и Twitter в <svelte:head>, используя абсолютные адреса изображений для расширенных предпросмотров в социальных сетях.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Метаданные OpenGraph и Twitter Card» бесплатный?
Да — полный текст урока «Метаданные OpenGraph и Twitter Card» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Метаданные OpenGraph и Twitter Card»?
Добавляйте метатеги og: и twitter: для расширенных превью ссылок в социальных сетях Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Метаданные OpenGraph и Twitter Card»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- svelte:head для динамических метатегов
- Метаданные OpenGraph и Twitter Card
- Структурированные данные JSON-LD в SvelteKit
- Канонические URL и создание карты сайта