---
title: "Блок «Закладка» — превью ссылок карточкой"
description: "Превращает ссылку в карточку с заголовком, описанием и фавиконом и корректно ведёт себя, когда метаданных нет."
source: https://blokeditor.com/ru/docs/bookmark/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Блочные инструменты Закладка

# Закладка: превью ссылок карточкой

Статичная карточка OpenGraph для вставленной ссылки — как «Create bookmark» в Notion. Показывает заголовок страницы, описание, изображение предпросмотра, favicon и домен. Метаданные запрашиваются с эндпоинта разворачивания ссылок, который предоставляет потребитель (из-за CORS бэкенд обязателен) — Blok поставляет только контракт.

### Импорт

TypeScript

```
import { Bookmark } from '@bloklabs/core/tools';
```

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `endpoint` | `string` | `""` | Эндпоинт разворачивания ссылок, который предоставляет потребитель. Обязателен. Вызывается как `endpoint?url=<encoded>` и должен вернуть `{ success: 1, link, meta: { title, description, image: { url }, favicon, domain } }` (обратите внимание: `image` — объект, а не строка). |
| `headers` | `Record<string, string>` | `undefined` | Необязательные заголовки (например, авторизации), отправляемые вместе с запросом метаданных. |

### Формат данных

TypeScript

```
interface BookmarkData {
  url: string;          // The bookmarked URL
  title?: string;       // Page title
  description?: string; // Page description
  image?: string;       // Preview image URL
  favicon?: string;     // Favicon URL
  domain?: string;      // Page domain, e.g. "example.com"
}
```

JSON

```
{
  "id": "bkm001",
  "type": "bookmark",
  "data": {
    "url": "https://example.com/article",
    "title": "An Interesting Article",
    "description": "A short summary of the page.",
    "image": "https://example.com/preview.png",
    "favicon": "https://example.com/favicon.ico",
    "domain": "example.com"
  }
}
```

### Пример использования

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Bookmark } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    bookmark: {
      class: Bookmark,
      config: {
        endpoint: 'https://your-backend.example.com/unfurl',
      },
    },
  },
});
```