OG 태그? 하이퍼 링크의 미리보기는 어떻게 생성될까?
이처럼 예쁜 미리보는 어떻게 생성될 수 있는 걸까요?
URL을 삽입하면 자동으로 예쁜 미리보기를 만들어주는 서비스들이 있습니다.
대부분의 서비스에서 이미 지원하고 있는 기능입니다.
노션, 카카오톡, 페이스북, 트위터(X), 티스토리 같은 블로그에도 URL을 삽입하면 미리보기가 자동으로 생성 되는 경우가 있습니다.
바로 이런 거 말이죠!
정식 명칭은 Open Graph Preview 또는 Link Preview로 불려집니다만, 대부분 북마크 내지 미리보기라고 통칭하니, 여기서는 이제부터 미리보기라는 명칭을 사용하도록 하겠습니다.
미리보기는 대표 이미지와 게시글의 제목, URL, 간단한 설명 정도가 첨부되어 해당 링크의 페이지가 어떤 페이지인지 먼저 파악할 수가 있죠.
그렇다면 이러한 미리보기는 어떻게 생성되는 걸까요?
HTML 파일에 단서가 있을까?
모든 웹 페이지는 기본적으로 HTML 파일입니다.
HTML은 head와 body로 나누어져있고, head에는 컨텐츠 자체보다는 인코딩, 뷰포트 등 메타 데이터가 들어가죠.
그리고 일반적으로 SEO가 중요한 블로그, 웹 기반 컨텐츠 서비스의 경우에는 HTML 파일의 헤더에 <meta> 태그로 title, description 등의 데이터를 통해 서치 봇에게 대략적인 정보를 통해 빠르게 페이지 컨텐츠를 파악할 수 있도록 만들 수 있습니다.
URL 하이퍼 링크로 GET 요청을 날린다면, 결국 아래와 비슷한 내용의 HTML 파일 하나를 받게 될 겁니다. (일반적인 웹사이트라면요.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO 핵심 메타 태그 -->
<title>내 블로그 - 커피 서버와 IT 서버의 공통점</title>
<meta name="description" content="커피 서버와 IT 서버의 공통점을 쉽게 풀어서 설명합니다. 서버가 무엇인지 한 번에 이해할 수 있는 비유와 예시를 담았습니다.">
<meta name="keywords" content="서버, SEO, 블로그, IT, 커피 서버, 프로그래밍 기초">그렇다면 이 meta 태그 안의 데이터를 기반으로 미리보기를 만들 수 있지 않을까요?
반 정도는 맞습니다. meta 태그의 데이터를 통해 미리보기의 데이터를 만들 수 있습니다.
SEO 최적화를 위해 meta 태그에 대표 사진 url을 넣는 경우도 있으니, 필요한 데이터는 전부 모이는 거죠.
즉, 이 미리보기를 보여줄 사이트를 구현하는 입장에서는 meta 태그의 SEO 관련 데이터를 사용해도 충분합니다.
다만, 표준이 아니라 기본 meta 태그 만으로 미리보기 생성을 지원하지 않는 경우가 있을 뿐입니다.
또한 위의 데이터들은 어디까지나 사람이 아닌 검색 엔진을 위한 서치 봇들이 보기 위한 데이터들입니다.
Open Graph? Twitter Card?
미리보기 생성에 관여하는 대표적인 표준은 Open Graph(OG-Tag)가 있고, Twitter(X) 사양으로 Twitter Card(TC)가 있습니다.
트위터와 페이스북이 SNS의 사실상 시발점이고, 둘 다 최대한 많은 서비스에 자신들의 SNS 포스트가 널리 퍼질 방안을 고안하기 시작했습니다.
자신들의 서비스 링크가 다른 서비스에 올라왔을 때, 단순한 URL은 대단히 의심스러울 수밖에 없고, href를 달아두고 따로 제목이나 요약을 입력한 A태그는 링크라는 인식이 부족하게 만듭니다.
단적인 예로, 아래의 링크, 어떤 것 같나요?
https://smartlandapartments.com/blog/do-cats-cry-reasons-behind-cat-crying/
URL의 문자를 통해 대략적인 내용을 유추할 수 있긴 하지만, 만약 경로변수가 UUID나 Auto Increment ID라면 어떤 서비스인지는 알지만 링크의 내용이 알아낼 방법이 없습니다.
그리고 아까 말씀드렸다시피, 위의 문장에 href를 넣은 A태그 글을 넣어뒀는데, 가시성이 좋았던 것 같으신가요?
그럼 이제 북마크로 봅시다.
Victor Fedin
네, 고양이가 어째서 우는 것인지에 대한 글이었네요!
훨씬 가시성이 높은 이 미리보기 방식은 유저의 게시글 클릭율과 인게이지먼트 파악에 대단히 큰 역할을 합니다.
유저의 유입과 활성 사용 시간이 보다 중요한 SNS에서는 이러한 사소한 차이가 유저의 유입에 큰 도움이 됐으리라 생각합니다.
페이스북(현 Meta)에서 2010년에 이러한 미리보기를 위한 메타 태그 표준을 제안하고 도입했으며, 2012년에 트위터에서 독자 규격을 만들었습니다.
당시 SNS의 가장 큰 공룡 둘이서 각각 표준을 제안했으니, 대부분의 웹 서비스와 메신저에서는 이러한 표준을 채용하여 미리보기를 생성하는 기능을 넣기 시작했고, 현재에 들어서는 사용자가 글을 쓸 수 있는 대부분의 포스팅, 게시판, 메신저 서비스에서 OG/TC 태그 파싱되어 미리보기를 자동으로 생성할 수 있게 되었습니다.
각 태그의 주요 요소
가장 중요한 요소는 크게 세 가지입니다.
title, description, image(url)
보다 상세한 요소들을 확인하고 싶다면,
FB에서 공식적으로 제공하는 OG protocol DOCS입니다.
마찬가지로 X에서 공식적으로 제공하는 TC docs입니다.
여기를 참고하시기 바랍니다!
가장 중요한 세 요소는 사실 이미 서치봇 용 메타 태그에도 비슷한 값들이 들어있기 때문에 이를 가져다가 만드는 경우도 있긴 합니다만,
미리보기는 서치봇이 아닌 실제 유저의 원할한 내용 파악과 유입을 위한 것이므로, 가능하다면, 그리고 가급적이면 유저의 관심을 끌 수 있는 내용으로 채워넣는 것을 추천드립니다.
사용법과 적용법?
개발을 떠나서, 블로그 포스팅이 취미인 사람들도 이러한 내용에 관심을 갖기 때문에 여러가지 시나리오를 가정하고 각각의 사용법을 소개해드리겠습니다.
1번 케이스(소비자). 블로그 등에서 내가 글을 쓰는데, 다른 서비스 URL을 넣었을 때, 미리보기가 생성되도록 만들고 싶다.
2번 케이스(소비자). 내가 쓴 글이 다른 서비스에서 공유되었을 때, 미리보기가 생성되었으면 한다.
3번 케이스(개발자). 내가 운영하는 서비스에서 URL이 입력되면 미리보기로 자동 생성되게 만들고 싶다.
1번 케이스
만약 3번과 연계되어 블로그를 직접 호스팅하고 있는 게 아니라면, 글을 작성하는 해당 서비스가 OG/TC 태그 파싱을 지원하는지가 가장 중요합니다.
"다른 서비스에서는 똑같은 URL로도 잘 생성되는데, 이상하게 내가 쓰는 서비스에서는 생성이 안 된다"면, 해당 서비스가 OG/TC 태그 파싱과 미리보기 생성을 지원하지 않는 것입니다.
서비스가 업데이트되길 기다립시다.
2번 케이스.
"내가 쓴 글"이 "다른 서비스"에서 미리보기로 생성되었으면 한다면, "내가 쓴 글에 OG/TC 태그가 존재"해야 합니다.
즉, "내가 글을 쓰는 서비스"에서 "내가 쓴 글"에 OG/TC를 자동으로 생성해주거나, 작가가 직접 지정할 수 있도록 만든 게 아니라면
"내가 쓴 글이 외부에 공유되어도 미리보기가 생성되지 않을 수" 있습니다.
원활한 유입을 위해서는 이러한 사항을 잘 확인해봅시다.
3번 케이스.
내가 운영하는 서비스에서, URL입력이 들어오면 미리보기를 생성하고 싶다!
미리보기가 생성되는 과정은 다음과 같습니다.
1. 글을 작성하는 서비스에서 URL 입력이 감지되거나 미리보기 생성 등의 기능이 사용된다.
2. 해당 서비스의 클라이언트/서버 측에서 입력받은 URL로 GET 요청을 보낸다.
3. 반환되는 HTML 파일에서 Open-Graph, Twitter-Card 태그를 감지하여, 클라이언트에서 미리보기를 생성한다.
3-1. 만약 철저히 해놓은 서비스라면, 두 태그가 누락되어도 게시글의 SEO용 메타 태그를 활용하여 간이로 미리보기를 생성한다.
매우 단순한 기능으로, 아래와 같은 코드로도 충분히 구현이 가능합니다. (노드 기반입니다. 파이썬과 자바는 GPT한테 부탁하시면 됩니다!)
// GET /preview?url=https://example.com
app.get("/preview", async (req, res) => {
const { url } = req.query;
if (!url) return res.status(400).json({ error: "url parameter is required" });
try {
// HTML 가져오기
const { data: html } = await axios.get(url, { timeout: 5000 });
const $ = cheerio.load(html);
// OG 태그 or 기본 meta 태그 파싱
const getMetaTag = (name) =>
$(`meta[property='${name}']`).attr("content") ||
$(`meta[name='${name}']`).attr("content");
const preview = {
title:
getMetaTag("og:title") ||
$("title").text() ||
"제목 없음",
description:
getMetaTag("og:description") ||
getMetaTag("description") ||
"설명 없음",
image: getMetaTag("og:image") || null,
url: getMetaTag("og:url") || url,
};
res.json(preview);
} catch (err) {
console.error(err.message);
res.status(500).json({ error: "Failed to fetch preview" });
}
});
이는 클라이언트 에디터 쪽에서 URL 입력을 감지하고, 해당 URL을 서버로 전송한 뒤에 서버측에서 처리하는 코드로, 클라이언트에서 URL 입력을 감지하는 기능도 필요합니다!
그럼 SEO에도 도움을 주는가?
앞서 말씀드렸듯, OG/TC 태그 자체는 검색 엔진 랭킹 신호로 사용되지 않습니다.
하지만 다른 서비스에서 내 글의 미리보기가 반복적으로 생성될수록, 다양한 도메인에 제목·설명·이미지 URL이 노출됩니다.
이는 서치봇이 더 많은 문맥에서 페이지를 탐색하게 만들어 간접적인 SEO 효과를 줍니다.
무엇보다 중요한 건 사용자 경험입니다. 단순 URL보다 보기 좋은 카드 미리보기는 클릭률을 높이고, 신뢰성을 강화하며, 더 많은 유입을 만들어내는 효과가 있습니다. 결국 검색엔진 최적화보다 더 강력한 “사람 최적화(Human Optimization)” 도구라 할 수 있죠
