editor
English시작하기

문서 › 사진과 미디어

링크 카드

주소를 제목·설명·사진이 있는 카드로 보여 주기 (fetchLinkMeta).

주소 하나를 제목, 설명, 대표 사진이 있는 상자로 보여 줍니다. 참고한 글, 상품 페이지, 지도처럼 눌러 볼 곳을 눈에 띄게 할 때 씁니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'linkCard link | undo redo',
  // 실제로는 서버에 물어봅니다 (아래 설명 참고)
  fetchLinkMeta: async (url) => ({
    title: new URL(url).hostname + ' 첫 화면',
    description: '서버가 페이지의 og:title, og:description, og:image 를 읽어 돌려준 값입니다.',
    image: 'https://picsum.photos/seed/82/400/240',
  }),
});

넣는 방법

  • 툴바의 링크 카드(linkCard) 단추를 누르고 주소를 넣습니다. https:// 를 빼먹으면 붙여 줍니다.
  • 본문에 주소만 붙여 넣으면 링크로 들어가고, fetchLinkMeta 가 있으면 "카드로 보기" 안내가 뜹니다. 누르면 그 링크가 카드로 바뀝니다. 카카오맵·네이버 지도 주소는 fetchLinkMeta 가 없어도 안내가 뜹니다.
  • 지도·퍼가기 코드 창에 카카오맵·네이버 지도 주소를 넣으면 카드로 들어갑니다.

fetchLinkMeta: 서버에서 정보 가져오기

브라우저는 보안 규칙 때문에 다른 사이트의 페이지를 읽을 수 없습니다. 그래서 제목과 사진은 내 서버가 대신 읽어 와야 합니다. fetchLinkMeta 가 없거나 null 을 돌려주면 도메인 이름만 있는 카드가 됩니다.

createEditor('#editor', {
  toolbar: 'board | linkCard',
  fetchLinkMeta: async (url) => {
    const res = await fetch('/api/link-meta?url=' + encodeURIComponent(url));
    return res.ok ? res.json() : null; // { title, description?, image?, siteName? }
  },
});
// Node 예: 페이지의 og: 태그 읽기
app.get('/api/link-meta', async (req, res) => {
  const url = new URL(req.query.url);
  if (!/^https?:$/.test(url.protocol)) return res.status(400).end();
  const html = await (await fetch(url, { redirect: 'follow' })).text();
  const og = (p) => html.match(new RegExp('<meta[^>]+property=["\']og:' + p + '["\'][^>]+content=["\']([^"\']*)', 'i'))?.[1];
  res.json({
    title: og('title') ?? html.match(/<title>([^<]*)/i)?.[1] ?? url.hostname,
    description: og('description'),
    image: og('image'),
    siteName: og('site_name'),
  });
});

저장되는 HTML

<div data-link-card="" style="margin: 0.8em 0">
  <a href="https://…" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 14px; …">
    <img src="https://…/og.jpg" alt="" style="width: 120px; height: 90px; object-fit: cover; …">
    <span style="display: block; min-width: 0">
      <strong style="display: block">제목</strong>
      <span style="…">설명</span>
      <span style="…">사이트 이름</span>
    </span>
  </a>
</div>

제목은 120자, 설명은 160자까지 씁니다. 사진은 http(s) 주소일 때만 들어가고, 사이트 이름이 없으면 도메인을 씁니다. 카드는 새 창으로 열립니다. 에디터 안에서는 한 덩어리로 다뤄집니다.

툴바에서의 위치

linkCard 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

옵션

이름타입기본값설명
linkCardtoolbar item주소를 넣어 카드를 만드는 창을 엽니다.
fetchLinkMeta(url) => Promise<LinkMeta | null>주소의 제목·설명·사진을 서버에서 가져옵니다. 있으면 주소를 붙여 넣을 때 카드를 권합니다.
LinkMeta.titlestring카드 제목. 비면 도메인.
LinkMeta.descriptionstring설명 (160자까지).
LinkMeta.imagestring대표 사진 주소 (http/https).
LinkMeta.siteNamestring아래 작은 글씨. 비면 도메인.