OG 태그 설정법: og:image를 지정하고 깔끔한 링크 미리보기 만들기

SEOgrinder 편집팀 · 게시일 2026년 11월 4일 · 읽는 시간 약 12분

핵심 답변: OG 태그(Open Graph 태그)는 페이지의 head에 넣는 메타 태그로, 누군가 링크를 공유할 때 소셜 네트워크와 메신저가 어떤 제목, 설명, 이미지를 보여 줄지 알려 줍니다. 프로토콜은 og:title, og:type, og:image, og:url 네 가지를 필수로 요구하며 og:description도 함께 넣는 것이 좋습니다. 이미지는 1200 × 630픽셀 이상에 8MB 미만으로 준비해 https 전체 주소로 적고, 모든 태그는 나중에 실행되는 JavaScript가 아니라 서버가 보내는 HTML에 넣으세요. 순위에 영향을 준다는 증거는 없으며, 이 태그는 공유된 링크가 어떻게 보이는지를 정할 뿐입니다.

OG 태그란 무엇인가요?

Open Graph는 웹 페이지가 스스로를 하나의 객체로 설명하게 해 주는 프로토콜입니다. 제목, 유형, 그림, 주소를 담습니다. ogp.me에 따르면 이 프로토콜은 원래 Facebook에서 만들어졌습니다. 사용하는 방법은 페이지의 head에 meta 태그를 추가하는 것입니다. 누군가 내 링크를 게시글이나 채팅에 붙여 넣으면 플랫폼이 페이지를 가져와 OG 태그를 읽고, 그것으로 미리보기 카드를 만듭니다. 태그가 없으면 플랫폼이 어떤 제목, 설명, 이미지를 쓸지 짐작해야 합니다.

프로토콜은 모든 페이지에 필수 속성 네 가지를 정하고, 선택이지만 일반적으로 권장되는 속성을 하나 더 둡니다.

태그	담는 내용	상태
og:title	미리보기에 표시되길 바라는 객체의 제목	필수
og:type	객체의 종류. 예: `website`, `article`	필수
og:image	페이지를 대표하는 그림의 주소	필수
og:url	페이지의 canonical 주소이며, 영구적인 식별자로 쓰임	필수
og:description	한두 문장의 설명	선택, 일반적으로 권장

og:type의 값은 이름표 이상의 의미가 있습니다. ogp.me에 따르면 고른 유형에 따라 추가 속성이 딸려 올 수 있습니다. article에 대해 프로토콜은 article:published_time, article:modified_time 같은 항목을 나열합니다. 그 밖의 선택 태그로는 og:site_name(사이트 전체의 이름)과 og:locale(태그의 언어, 기본값은 en_US)이 있습니다.

OG 태그의 최소 HTML

바로 가져다 고쳐 쓸 수 있는 완전한 세트입니다. (ogp.me의 예시는 html 요소에 prefix 속성도 지정하지만, 주요 플랫폼은 그것 없이도 태그를 읽습니다.) 일반적인 title 태그 옆, head 요소 안에 넣습니다.

<head>
  <title>OG 태그 설정: og:image 지정하기</title>
  <meta property="og:title" content="OG 태그 설정: og:image 지정하기">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="이미지, 제목, 설명이 담긴 링크 미리보기 카드">
  <meta property="og:description" content="필수 OG 태그 네 가지, 이미지 크기 규칙, 링크 미리보기를 테스트하는 방법.">
  <meta property="og:site_name" content="Example">
</head>

세부 사항을 몇 가지 짚어 둡니다.

og:url은 영구적인 식별자입니다. ogp.me는 이것을 객체의 canonical URL로 정의합니다. canonical 링크와 같은 주소를 쓰되 추적 매개변수는 붙이지 마세요.
이미지 주소는 전체를 적으세요. ogp.me의 모든 예시는 전체 주소를 씁니다. /images/card.png 같은 상대 경로는 크롤러마다 해석하는 방식에 좌우되므로 믿고 맡기지 마세요.
너비와 높이가 도움이 됩니다. Facebook 문서에 따르면 이 두 태그가 있으면 크롤러가 이미지를 먼저 내려받아 처리하지 않고도 곧바로 렌더링할 수 있습니다.
og:image:alt를 추가하세요. ogp.me는 이미지를 지정한 페이지에는 그 이미지에 무엇이 담겼는지에 대한 설명도 함께 지정해야 한다고 적습니다(캡션이 아니라 설명입니다).

og:image 규칙: 크기, 파일, 주소

가장 명확한 숫자는 Facebook이 링크 공유 이미지 문서에서 공개합니다. 이 절의 나머지는 이 숫자를 기준으로 합니다.

허용되는 최소 크기는 200 × 200픽셀입니다.
파일 크기는 8MB를 넘으면 안 됩니다.
고해상도 기기에서 가장 잘 보이게 하려면 1200 × 630픽셀 이상을 쓰세요.
링크 게시물에 큰 이미지가 나오려면 최소한 600 × 315픽셀이 필요합니다. 더 작은 이미지도 표시되지만 훨씬 작게 나옵니다.
이미지 전체가 잘리지 않고 나오도록 가로세로 비율을 가능한 한 1.91 : 1에 가깝게 맞추세요. 1200 × 630은 약 1.905 : 1이어서 이 크기가 흔히 쓰입니다.
크롤러는 gzip과 deflate 인코딩만 받아들이므로, 서버나 CDN이 둘 중 하나로 응답하는지 확인하세요.

이것은 Facebook의 규칙입니다. 다른 앱과 메신저도 같은 태그를 읽지만 이 글은 그쪽의 한계를 문서화하지 않으므로, 내게 중요한 곳에서 직접 테스트하세요. 참고로 SEOgrinder의 블로그 페이지는 1200 × 630픽셀의 미리보기 이미지를 씁니다.

크기가 아니라 접근에 관한 조건이 두 가지 더 있습니다. 이미지는 공개되어 있어야 합니다. 앞에 로그인이 없어야 하고, 이미지가 들어 있는 폴더를 막는 robots.txt 규칙도 없어야 합니다. 크롤러가 파일을 가져갈 수 없으면 파일이 아무리 좋아도 미리보기에는 그림이 나오지 않습니다.

페이지마다 고유한 OG 태그를 넣으세요

og:url은 객체의 영구적인 식별자이므로 페이지마다 달라야 합니다. 나머지도 마찬가지입니다.

og:title은 사이트 전체가 아니라 이 페이지가 무엇에 관한 것인지를 말해야 합니다.
og:description은 이 페이지를 한두 문장으로 요약해야 합니다.
og:image는 페이지에 어울리는 것을 보여 줘야 합니다. 자체 이미지가 없는 페이지를 위해 기본 이미지를 하나 마련해 두세요.
og:type도 달라질 수 있습니다. 홈페이지는 website, 블로그 글이나 뉴스는 article입니다.

어떤 스택을 쓰든 태그를 손으로 입력하지 말고 각 페이지의 데이터로 생성하세요. 작은 Node 예시입니다.

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

esc 함수는 중요합니다. 제목에 따옴표가 있으면 속성이 중간에 끝나 버려 태그가 깨지기 때문입니다. CMS를 쓴다면 페이지별 공유 이미지를 지정하는 필드를 찾아보세요. 최종적으로 확인할 대상은 같습니다. 전달된 HTML 안의 태그입니다.

OG 태그는 서버가 보내는 HTML에 있어야 합니다

요즘 사이트 중에는 거의 비어 있는 HTML 껍데기만 보내고 나머지는 JavaScript가 브라우저에서 만들게 하는 곳이 많습니다. Google은 이를 처리할 수 있습니다. JavaScript 문서에 따르면 Google 검색은 evergreen 버전의 Chromium으로 페이지를 렌더링합니다. 같은 문서는 모든 봇이 JavaScript를 실행할 수 있는 것은 아니므로 서버 사이드 렌더링이나 프리렌더링이 여전히 좋은 방법이라고도 말합니다.

AI 크롤러에 대해서는 측정 결과가 있습니다. 2024년 12월에 Vercel과 MERJ는 GPTBot, ClaudeBot 같은 주요 AI 크롤러가 JavaScript를 실행하지 않았다는 점을 확인했습니다. 2024년 시점의 스냅숏이며 그 후 다시 확인된 바는 없습니다. 링크 미리보기에는 같은 논리에서 안전한 규칙이 나옵니다. OG 태그가 스크립트가 실행된 뒤에야 나타난다면, 스크립트를 실행하지 않는 크롤러는 그 태그를 끝내 보지 못합니다. SEOgrinder는 이런 페이지를 「페이지가 브라우저에서만 조립됩니다」로 보고하며, 많은 AI 크롤러가 JavaScript를 실행하지 않아 거의 빈 페이지를 본다는 설명을 덧붙입니다.

10초면 테스트할 수 있습니다.

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

태그가 출력되면 전달된 HTML에 들어 있는 것입니다. 아무것도 출력되지 않는데 브라우저 개발자 도구에서는 태그가 보인다면, 스크립트가 태그를 너무 늦게 넣고 있는 것입니다. 브라우저의 「페이지 소스 보기」로도 같은 테스트를 할 수 있습니다. 이 방법은 개발자 도구가 보여 주는 실시간 페이지가 아니라 전달된 HTML을 보여 줍니다. 해결책은 서버에서 렌더링하거나 페이지를 미리 생성해서 title 태그, 본문, 태그가 첫 번째 응답에 들어 있게 하는 것입니다.

링크 미리보기를 테스트하는 방법

Facebook의 공유 디버거(Sharing Debugger)는 크롤러가 어떤 태그를 읽었는지와 오류를 보여 줍니다. Facebook 로그인이 필요합니다. Facebook의 이미지 문서에 따르면 여기에 URL을 입력하면 메타데이터도 미리 가져오는데, 캐시 때문에 이 점이 중요합니다.

Facebook은 모든 이미지를 주소 기준으로 캐시합니다. 이미지를 교체한다면 새 이미지에는 새 URL을 쓰세요. 그렇지 않으면 예전 그림이 그대로 남습니다.
기존 게시물이 아직 예전 이미지를 가리킬 수 있으므로 예전 이미지는 삭제하지 마세요.
URL에 연결된 이미지를 바꿔도 예전에 공유된 게시물의 미리보기는 갱신되지 않습니다. 그런 것은 따로 새로 고쳐야 합니다.
크롤러는 이미지를 렌더링하기 전에 최소 한 번은 그 이미지를 봐야 합니다. 미리 가져오지 않으면 링크를 처음 공유하는 사람에게 이미지가 보이지 않을 수 있습니다.

게시하기 전에 다음 목록을 확인하세요.

curl로 페이지를 가져와 다섯 가지 태그가 첫 번째 응답에 있는지 확인합니다.
이미지 주소를 단독으로 열어 봅니다. 로그인 없이 상태 200으로 로드되어야 합니다.
크기를 확인합니다. 1200 × 630픽셀 이상, 8MB 미만이어야 합니다.
페이지를 공유 디버거에 넣고 오류와 경고를 읽습니다.
유형별로 페이지 하나씩 반복합니다. 홈페이지, 게시글, 상품입니다.

SEOgrinder가 OG 태그를 점검하는 방법

SEOgrinder에 공개된 페이지의 주소를 입력하면 리포트에 「소셜 미리보기」가 들어 있어, 페이지가 공유될 때 어떻게 보이는지 알 수 있습니다. 이 도구는 OG 태그를 읽고 이미지를 불러와 발견한 내용을 보고합니다. 계정이 필요 없고 비용도 들지 않습니다. 여기서 중요한 항목은 다음과 같습니다.

「공유 미리보기가 불완전합니다」는 이미지, 제목, 설명 중 무엇이 빠졌는지 알려 줍니다.
「미리보기 이미지가 로드되지 않습니다」는 이미지가 오류 상태로 응답할 때 나타납니다. 이 항목은 그 상태를 알려 주고 흔한 원인을 짚습니다. 잘못된 주소, 파일 앞의 로그인, robots.txt 차단입니다. 이 항목에 따르면 이런 경우 링크드인, 왓츠앱, X에서 링크가 그림 없이 표시됩니다.
「미리보기 이미지가 매우 작습니다」는 이미지가 600 × 315픽셀보다 작을 때 나타납니다(Facebook은 그 경우 작은 썸네일로만 보여 줍니다). 최소 크기인 200 × 200보다 작은 이미지는 따로 표시합니다.
「페이지가 브라우저에서만 조립됩니다」는 인터페이스를 브라우저에서 만드는 페이지에 대한 항목입니다.

SEOgrinder는 모든 네트워크가 카드를 어떻게 그리는지까지 보여 줄 수는 없습니다. 내가 직접 통제하는 부분인 태그와 파일을 점검합니다. 최종 모습을 확인하려면 디버거를 쓰세요.

자주 하는 실수

상대 경로 이미지. https://로 시작하는 전체 주소를 쓰세요.
가져올 수 없는 이미지. 로그인, 방화벽 규칙, 이미지 폴더에 걸린 robots.txt 줄이 있으면 미리보기에 그림이 나오지 않습니다.
너무 작은 이미지. 600 × 315픽셀 미만이면 작게 표시되고, 200 × 200 미만이면 아예 표시되지 않을 수도 있습니다.
설명 없음. og:description은 프로토콜상 선택이지만, 없으면 플랫폼이 짐작해서 채웁니다.
모든 페이지에 같은 태그. 그러면 모든 글이 공유될 때 홈페이지처럼 보이고 og:url도 아무것도 식별하지 못합니다.
같은 주소에서 이미지만 교체. Facebook은 URL 기준으로 캐시하므로 새 파일은 새 이름으로 게시하세요.
JavaScript가 실행된 뒤에야 존재하는 태그. 전달되는 HTML에 넣으세요.
값에 이스케이프하지 않은 따옴표. 속성이 끝나 버려 태그가 잘립니다.
og:url에 추적용 주소. 이 태그에는 canonical 주소가 들어가야 합니다.

자주 묻는 질문

OG 태그는 순위 요소인가요?

그렇다는 증거는 없습니다. Open Graph는 소셜 네트워크와 메신저에서 공유된 링크가 어떻게 보이는지를 정합니다. 이 글에서 참고한 어떤 출처도 OG 태그를 순위와 연결짓지 않습니다.

og:image는 어떤 크기로 해야 하나요?

1200 × 630픽셀에 가로세로 비율 1.91 : 1에 가깝게, 8MB 미만이 좋습니다. Facebook의 권장 사항에 맞고, SEOgrinder 블로그 페이지의 미리보기 이미지 크기이기도 합니다.

og:description이 꼭 필요한가요?

프로토콜은 선택 사항이지만 일반적으로 권장하는 태그로 둡니다. 없으면 플랫폼이 내 페이지에서 설명을 짐작해서 만들어야 하니 직접 쓰세요.

예전 이미지가 계속 보이는 이유는 무엇인가요?

Facebook은 이미지를 주소 기준으로 캐시합니다. 새 이미지를 새 URL로 게시한 다음 페이지를 공유 디버거에 넣으세요. 예전에 공유된 게시물은 자동으로 갱신되지 않습니다.

twitter:card는 어떤가요?

이 태그는 Open Graph 프로토콜에 속하지 않습니다. SEOgrinder는 불완전한 미리보기에 대한 수정 안내에서 twitter:card를 summary_large_image로 설정하는 것도 권합니다. 이 글은 X의 규칙을 다루지 않으니 X의 공식 문서에서 확인하세요.

코딩 에이전트가 태그를 대신 넣어 줄 수 있나요?

기계적인 부분은 맡길 수 있습니다. 템플릿에 태그를 쓰고 curl로 확인하는 일입니다. 리포트의 AI에 넘기기는 발견한 내용을 Markdown 작업 지시서로 만들어 주며, 과제마다 확인할 수 있는 목표 조건(「완료 조건」)이 붙습니다. 어떤 그림을 고르고 어떤 문구를 쓸지는 여전히 내 몫입니다.

다음 단계

SEOgrinder로 홈페이지의 무료 스캔을 실행해 「소셜 미리보기」와 위에서 설명한 항목을 확인하세요. 순서대로 고치고, 이미지를 교체해야 한다면 새 주소로 새 이미지를 게시한 다음 페이지를 공유 디버거에 넣어 보세요. 그러고 나서 다시 스캔해 미리보기가 완전해졌는지 확인합니다. 점검할 항목이 더 있다면 SEO 체크리스트로 전체 순서를 확인할 수 있습니다.