하이퍼링크의 OG 태그를 파싱하여 링크에 대한 미리보기를 제공합니다.
유효한 하이퍼링크 입력 시, 해당 링크의 썸네일 및 관련 정보를 미리 볼 수 있습니다.
|
액션 | 예시 |
---|---|
링크 삽입 | |
링크 텍스트 입력 후 Enter | |
링크 복사/붙여넣기 |
<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 --> <script src="ogParser.min.js의 url"></script> |
사용 가능한 키
Key | Type | 필수 | 설명 |
---|---|---|---|
url | string | O |
|
customTemplateWithImage | string |
| |
customTemplateWithoutImage | string |
|
// url 에는 OG 태그를 파싱하는 API 주소가 설정되어야 합니다. // customTemplateWithImage 은 이미지가 존재할 경우 생성되는 URL 미리보기 HTML입니다. // customTemplateWithoutImage 은 이미지가 존재하지 않을 경우 URL 미리보기 HTML입니다. 'ogParser.config': { 'url': '/ogParser', 'customTemplateWithImage': ``, // 이미지 있을 때 커스텀 템플릿 'customTemplateWithoutImage': `` // 이미지 없을 때 커스텀 템플릿 } |
미리보기 | 기본 템플릿 | ||
---|---|---|---|
썸네일이 있을 경우 |
| ||
썸네일이 없을 경우 |
|
태그 | 의미 | 설명 |
---|---|---|
#{title} | 제목 |
|
#{description} | 설명 |
|
#{image} | 썸네일 |
|
#{url} | 링크 |
|
미리보기 | 커스텀 템플릿 설정 | |
---|---|---|
| ||
|
서버에서 제공해야 하는 키 값 중 최소한 하나 이상 존재할 경우에만 미리보기가 제공됩니다. |
Key | Type | Value |
---|---|---|
title | string |
|
description | string |
|
image | string |
|
url | string |
|
{ "image": "https://www.synapsoft.co.kr/wp-content/uploads/2020/04/product03.png", "description": "Synap Editor is an innovative HTML5 web editor developed with Synap’s own digital document processing know-how over a long period of about 20 years and proven technologies.", "title": "Synap Editor, a completely different HTML5 web editor", "url": "https://www.synapeditor.com" } |