Link Preview

Компонент Link Preview предназначен для визуализации ссылок с расширенной информацией: заголовком страницы, описанием, изображением и другими метаданными. Он часто используется для социальных сетей, мессенджеров и панелей предпросмотра ссылок. В SvelteKit использование таких компонентов значительно упрощается благодаря реактивной архитектуре и возможности серверного рендеринга.

Структура компонента

Компонент обычно строится из нескольких блоков:

  1. Контейнер ссылки Контейнер отвечает за обертку всего превью и задает стили: размеры, отступы, рамку и тень. Часто используется <a> для полной кликабельности.

    <a href={url} class="link-preview">
  {#if image}
    <img src={image} alt={title} class="link-preview__image" />
  {/if}
  <div class="link-preview__content">
    <h3 class="link-preview__title">{title}</h3>
    <p class="link-preview__description">{description}</p>
    <span class="link-preview__domain">{domain}</span>
  </div>
</a>

    Ключевые моменты:

    • href указывает на ссылку;
    • условный рендеринг изображения через {#if image} позволяет компоненту оставаться адаптивным;
    • семантическая разметка повышает доступность и SEO.

  2. Секция контента Блок с текстовой информацией включает заголовок, описание и домен. Для заголовка рекомендуется использовать <h3> или <h4> в зависимости от структуры страницы. Описание ограничивается 2–3 строками с использованием CSS свойства line-clamp для аккуратного отображения.

    .link-preview__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Интеграция с серверным рендерингом

В SvelteKit можно загружать метаданные ссылки на сервере, что позволяет снизить нагрузку на клиент и ускорить время первого отображения:

// src/routes/+page.server.js
import fetch from 'node-fetch';

export async function load({ params }) {
  const response = await fetch(`https://api.linkpreview.net/?key=API_KEY&q=${params.url}`);
  const data = await response.json();

  return {
    preview: {
      title: data.title,
      description: data.description,
      image: data.image,
      domain: new URL(data.url).hostname
    }
  };
}

В компоненте SvelteKit:

<script>
  export let preview;
</script>

<LinkPreview {preview.title} {preview.description} {preview.image} {preview.domain} url={preview.url} />

Ключевые моменты:

  • Использование +page.server.js позволяет выполнять запросы на стороне сервера;
  • данные передаются в компонент через props, что облегчает реактивное обновление и упрощает тестирование.

Работа с UI-библиотеками

Многие SvelteKit UI libs (например, Svelte Material UI, Flowbite Svelte, Skeleton) предоставляют готовые стилизованные компоненты карточек, которые легко адаптировать под Link Preview. Основные преимущества:

  • Унифицированный стиль: готовые темы и цветовые схемы;
  • Адаптивность: встроенные медиазапросы и компоненты Flex/Grid;
  • Интерактивность: hover-эффекты, тени, анимации при наведении.

Пример с использованием Skeleton:

<script>
  import { Card, CardContent, CardMedia } from '@skeletonlabs/skeleton';
  export let title;
  export let description;
  export let image;
  export let domain;
  export let url;
</script>

<Card class="link-preview">
  {#if image}
    <CardMedia src={image} alt={title} />
  {/if}
  <CardContent>
    <h3>{title}</h3>
    <p>{description}</p>
    <small>{domain}</small>
  </CardContent>
</Card>

Динамическая загрузка и Skeleton loading

Для улучшения UX полезно отображать скелетон-загрузку до получения данных:

{#if !preview}
  <div class="skeleton skeleton-link-preview"></div>
{:else}
  <LinkPreview {...preview} />
{/if}

Стили скелетона:

.skeleton-link-preview {
  height: 120px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Работа с метаданными Open Graph и Twitter Cards

Для корректного отображения ссылки важно учитывать:

  • og:title – заголовок страницы;
  • og:description – краткое описание;
  • og:image – изображение;
  • twitter:card и twitter:image – поддержка Twitter-карточек.

SvelteKit позволяет на сервере извлекать эти данные через парсинг HTML или сторонние API.

Ключевые рекомендации

  • Использовать SSR для оптимизации SEO и скорости загрузки;
  • Обрабатывать отсутствие изображений и описания через условный рендеринг;
  • Стилизация через UI-библиотеки упрощает адаптивный и современный интерфейс;
  • Поддержка Skeleton loading повышает восприятие скорости приложения;
  • Правильное использование Open Graph и Twitter Card метаданных гарантирует корректный предпросмотр ссылки при шаринге.

Этот подход позволяет создавать высокоадаптивные и визуально привлекательные Link Preview компоненты, полностью интегрированные с экосистемой SvelteKit и современными UI-библиотеками.

Оглавление