링크 미리보기가 잘못 보이는 이유와 Open Graph로 고치는 방법

새 랜딩 페이지 링크를 공유했는데 미리보기에 사진이 없거나, 홈페이지 제목이 나오거나, 두 캠페인 전 배너가 뜨는 경우가 있죠. 페이지 자체는 멀쩡해요. 미리보기는 다른 데서 만들어져요. 페이지 head에 있는 몇 줄의 코드인데, 대부분 사람들은 이 코드를 보지 못하죠.

이 글에서는 대부분의 깨진 미리보기를 일으키는 여섯 가지 원인을, 확인할 가치가 있는 순서대로 다뤄요. 태그를 직접 써 주길 원하면 무료 Open Graph 생성기가 태그를 만들고, 올바르게 이스케이프하고, 아래 제한 값에 맞는지 확인해 줘요.

링크 미리보기가 만들어지는 과정

링크를 게시물이나 메시지에 붙여넣으면, 앱이 페이지로 크롤러를 보내요. 크롤러는 <head> 안의 <meta> 태그를 읽고 그걸로 카드를 그려요. 이 태그들은 Open Graph 프로토콜에서 오고, 이 프로토콜은 필수 항목으로 네 가지를 정해 두고 있어요:

• og:title: 카드에 표시될 페이지 제목이에요.
• og:type: 페이지의 종류로, 보통 website 또는 article이에요.
• og:image: 사진이에요.
• og:url: 페이지의 정규 URL이에요. 프로토콜에서는 이를 영구 ID라고 불러요.

og:description을 추가하면 카드가 완성돼요. 완전하고 최소한의 세트는 이런 모습이에요:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

원인 1: 태그가 없어요

og: 태그가 없으면 각 앱은 <title>이나 첫 번째 이미지처럼 페이지에서 찾을 수 있는 다른 것에 기댈 수밖에 없고, 무엇을 고를지는 앱마다 달라요. 그래서 같은 링크가 한 곳에서는 멀쩡하고 다른 곳에서는 깨져 보이죠. 해결책은 홈페이지뿐 아니라 사람들이 공유할 것으로 예상되는 모든 페이지에 필수 태그 네 개와 설명을 넣는 거예요. 홈페이지의 태그를 단 상품 페이지는 홈페이지의 카드를 보여줘요.

원인 2: 이미지 URL이 상대 경로예요

자기 브라우저에서는 페이지가 멀쩡해 보이기 때문에 놓치기 쉬워요. content="/images/og.jpg"는 이미 사이트에 들어와 있는 브라우저에서는 동작하지만, 크롤러는 사이트 바깥에 있어요. 전체 주소를 https://와 도메인으로 시작해서 쓰세요. og:url도 마찬가지예요.

원인 3: 이미지 크기나 비율이 맞지 않아요

각 플랫폼은 원하는 크기를 명시하는데, 넓은 이미지에서는 우연히도 셋이 일치해요:

• LinkedIn은 웹사이트를 공유 가능하게 만드는 가이드에서 이미지가 최소 1200 × 627 픽셀이어야 하고, 권장 비율은 1.91:1이며, 5 MB를 넘지 않아야 한다고 말해요.
• Meta의 공유 모범 사례는 고해상도 화면용으로 최소 1080픽셀 너비, 이미지 링크 광고를 표시하려면 최소 600픽셀 너비를 권장해요.
• X의 개발자 문서에 따르면, 큰 이미지 카드는 2:1 비율을 지원하고 300 × 157에서 4096 × 4096 픽셀까지, 5MB 미만, JPG, PNG, WEBP 또는 GIF 형식이며 SVG는 지원하지 않아요(원래 페이지는 지금 리디렉션되므로 이 링크는 Internet Archive를 거쳐요).

세 곳 모두에 맞는 크기는 1200 × 630이에요. LinkedIn의 최소값 1200 × 627을 넘고, Meta의 1080보다 넓고, 비율은 1200 ÷ 630 = 1.905로 X의 2:1과 5% 이내예요. 정사각형이나 세로로 긴 이미지는 넓은 카드에 맞게 잘리니, 중요한 부분은 가운데에 두세요. 종횡비 계산기에서 가운데를 잘랐을 때 무엇이 남는지 볼 수 있어요.

태그에 크기도 적어 주세요. Meta는 og:image:width와 og:image:height를 요구해요. 그래야 크롤러가 이미지를 내려받고 처리하기 전에 바로 그릴 수 있어요. Meta의 웹마스터 가이드는 간단히 말해요. 처음 공유할 때 이미지가 제대로 로드되도록 높이와 너비를 명시하라고요.

원인 4: 태그를 JavaScript가 추가해요

일부 사이트 빌더와 싱글 페이지 앱은 페이지가 로드된 뒤 브라우저에서 메타 태그를 추가해요. 크롤러가 서버가 보내는 HTML을 읽을 때는 그 코드를 실행하지 않을 수 있고, 그러면 태그를 보지 못해요. 페이지 소스를 확인하세요(검사 도구가 아니라 View Source로요. 검사 도구는 스크립트가 실행된 뒤의 페이지를 보여주니까요). 소스에 태그가 없다면 크롤러도 아마 보지 못할 거예요. 해결책은 사이트 설정이나 서버 쪽 템플릿에 있어요.

원인 5: 특수 문자가 태그를 깨뜨렸어요

제목에 큰따옴표가 들어가면, 예를 들어 "단 하나면 되는" 린넨처럼 되면, content="..." 속성이 일찍 끝나서 제목의 나머지가 사라져요. 속성 안에서 의미를 갖는 문자는 이스케이프해야 해요. "는 "가 되고, &는 &가, <는 <가 돼요. 브라우저와 크롤러는 태그를 읽을 때 원래 문자로 되돌려요. 생성기가 이걸 대신 해 주니, 생성기를 써야 하는 이유가 절반은 여기에 있어요.

원인 6: 앱이 예전 버전을 기억하고 있어요

태그를 고치고 다시 공유했는데 예전 카드가 그대로 남아 있나요. 그건 캐시예요. 앱은 긁어 온 내용을 저장해 두고 재사용해요. 두 대형 네트워크 모두 새로 가져오도록 요청하는 도구를 제공해요:

• Facebook: URL을 Meta의 Sharing Debugger에 붙여넣으세요. Meta의 웹마스터 가이드에 따르면, 크롤러가 긁어 온 태그를 오류나 경고와 함께 보여 주고 새로 긁어 오도록 해요. Meta의 모범 사례에는 긁어 온 내용이 그 밖의 경우 표준 24시간 주기로 업데이트된다는 설명도 있어요.
• LinkedIn: URL을 Post Inspector에 넣으세요. LinkedIn의 도움말 페이지는 한계를 분명히 밝혀요. 갱신은 새 게시물의 미리보기에만 적용돼요. 이미 URL이 들어 있는 게시물은 예전 미리보기를 그대로 유지해요.

출시 전에는 이 LinkedIn 설명을 기억하세요. 첫 게시물이 나가기 전에 미리보기를 확인하세요. 페이지를 고친다고 이미 나간 게시물이 고쳐지지는 않아요.

twitter:card 태그: 네 줄이 아니라 한 줄이에요

X도 Open Graph를 읽어요. 카드 마크업 참고 문서는 태그마다 대체값을 나열해요. twitter:title은 og:title로, twitter:description은 og:description으로, twitter:image는 og:image로, twitter:image:alt는 og:image:alt로 대체돼요. 그러니 전부 반복할 필요는 없어요. 추가해야 할 한 줄은 twitter:card예요. 전폭 사진이면 summary_large_image, 작은 정사각형이면 summary를 넣으세요. 빼 버리면 같은 참고 문서에 따라 X가 작은 요약 카드를 보여줄 수 있다고 나와요. 큰 사진이 썸네일로 도착하는 이유가 바로 이거예요. 같은 문서는 제목을 70자, 설명을 200자, 대체 텍스트를 420자로 제한해요.

출시 전 5분 점검

1. 페이지 소스를 열어 og: 태그를 찾으세요. 필수 네 개와 설명이 모두 있어야 해요.
2. og:image와 og:url이 https://로 시작하는지 확인하세요.
3. 이미지 URL만 따로 브라우저에서 여세요. 로드되어야 하고, 1200 × 630 또는 그에 가까워야 해요.
4. URL을 Sharing Debugger와 Post Inspector에 붙여넣고 카드를 읽어 보세요.
5. 그다음에 공유하세요.

Hermoso가 맞는 곳

Hermoso는 AI 마케팅 에이전트예요. 내 시장에서 이미 잘 먹히는 광고를 조사하고, 브랜드에 맞는 이미지 및 영상 광고를 만들고, 내 계정에 게시물을 예약하고, 내 광고 계정에서 유료 캠페인을 운영해요. 좋은 링크 미리보기는 그 게시물을 클릭할 만한 것으로 만들어 줘요. Hermoso는 웹 앱에서 쓸 수 있고, MCP 서버를 통해 Claude, ChatGPT, Cursor 안에서도 쓸 수 있어요.

자주 묻는 질문

왜 Facebook이나 LinkedIn에서 내 링크에 이미지가 안 나오나요?

보통 og:image 태그가 없거나, 전체 https:// 주소 대신 상대 경로를 쓰거나, 너무 작은 이미지를 가리키고 있어서예요. LinkedIn은 최소 1200 × 627 픽셀을 요구해요. 고친 뒤에는 URL을 Meta의 Sharing Debugger나 LinkedIn의 Post Inspector에 넣어서 다시 가져오게 하세요.

Open Graph 이미지는 어떤 크기여야 하나요?

1200 × 630 픽셀이면 주요 네트워크 대부분에서 잘 작동해요. 약 1.91:1로 LinkedIn의 1200 × 627 최소값을 충족하고, Meta가 권장하는 1080픽셀보다 넓고, X가 큰 이미지 카드에 지원하는 2:1에도 가까워요.

LinkedIn 링크 미리보기는 어떻게 업데이트하나요?

페이지의 태그를 고친 다음, LinkedIn의 Post Inspector에 URL을 입력하세요. 갱신된 미리보기는 새 게시물에만 적용돼요. 이미 URL이 들어 있는 게시물은 예전 미리보기를 유지해요.

og: 태그가 있으면 twitter: 태그도 필요한가요?

twitter:card만 필요해요. twitter: 버전이 없으면 X는 og:title, og:description, og:image, og:image:alt로 대체해요.