01DEFINITION
한 줄로 말하면
카카오톡이나 슬랙에 링크를 붙였을 때 뜨는 제목 · 설명 · 썸네일이 OG 태그입니다. 없으면 주소만 덜렁 남거나 페이지 구석의 엉뚱한 이미지가 잡힙니다. 검색 순위에 직접 영향을 주지는 않지만 공유된 링크의 클릭률은 확실히 달라집니다. 태그를 넣고도 이미지 규격을 맞추지 않아 글자가 잘려 보이는 경우가, 아예 없는 경우만큼 흔합니다.
02RISK
없으면 무슨 일이 생기나
요즘 링크는 검색 결과보다 메신저에서 더 많이 오갑니다. 담당자가 사내 채팅방에 우리 제품 페이지를 붙이는 순간, 그 방의 사람들이 보는 것은 우리 페이지가 아니라 카드 하나입니다. 제목과 썸네일이 붙어 있으면 무엇인지 알아보고 누르지만, 주소만 덜렁 있으면 대부분 지나갑니다. 같은 링크인데 도달률이 달라집니다.
태그가 없을 때 미리보기 도구는 페이지에서 아무 이미지나 하나 골라 씁니다. 그 결과 로고 대신 배너 구석의 장식 이미지나 아이콘이 썸네일로 잡히는 일이 흔합니다. 사내 공지나 영업 자료로 공유되는 링크에서 이것은 생각보다 크게 보입니다.
태그를 넣고도 규격을 맞추지 않으면 절반쯤 실패합니다. 이미지가 정사각형이면 좌우가 잘리고, 글자가 들어간 이미지는 그 글자가 잘려 읽히지 않습니다. 아예 없는 것과 비슷한 인상을 주기 때문에, 넣는 김에 크기까지 맞추는 편이 낫습니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
태그가 있는지 본다
네 개가 기본입니다. 제목, 설명, 이미지, 주소. 이 중 이미지가 빠진 경우가 가장 많습니다.
$ curl -s https://example.com/ | grep -i 'property="og:' <meta property="og:title" content="..."> <meta property="og:description" content="..."> <meta property="og:image" content="https://example.com/og.png"> <meta property="og:url" content="https://example.com/">
-
02
이미지가 실제로 열리는지 확인한다
태그에 적힌 주소가 404 이거나 로그인이 필요한 경로면 썸네일이 안 뜹니다. 절대주소여야 하고, 크롤러가 로그인 없이 받을 수 있어야 합니다.
$ curl -s -o /dev/null -w "%{http_code} %{content_type} %{size_download}\n" \ https://example.com/og.png 200 image/png 184320 -
03
실제로 메신저에 붙여 본다
가장 확실한 방법입니다. 자기 자신에게 보내는 채팅방에 링크를 붙여 보십시오. 카카오톡, 슬랙, 페이스북이 각각 조금씩 다르게 처리하므로 주로 쓰는 곳에서 확인하시면 됩니다.
-
04
미리보기 도구로 캐시를 확인한다
카카오는 개발자 사이트의 디버거, 페이스북은 공유 디버거를 제공합니다. 지금 그쪽이 갖고 있는 캐시 내용을 보여 주고, 다시 읽어 오라고 요청할 수도 있습니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
title 과 description 은 이미 만들어 둔 값을 그대로 재사용하면 됩니다. 따로 관리하면 한쪽만 고쳐지는 상태가 반드시 옵니다.
<meta property="og:type" content="website"> <meta property="og:site_name" content="예제산업"> <meta property="og:title" content="산업용 볼밸브 KV-200"> <meta property="og:description" content="구경 50A 스테인리스 볼밸브. 사용압력 16bar."> <meta property="og:image" content="https://example.com/img/og-kv200.png"> <meta property="og:url" content="https://example.com/products/kv-200">
1200 × 630 픽셀이 사실상의 표준입니다. 이 비율로 만들면 대부분의 메신저에서 잘리지 않습니다. 글자를 넣는다면 가장자리에서 충분히 안쪽으로 들여 두십시오.
별도 태그를 다 만들 필요는 없습니다. 카드 유형만 지정해 두면 나머지는 OG 태그를 그대로 씁니다.
<meta name="twitter:card" content="summary_large_image">
모든 페이지에 전용 이미지를 만들 수는 없습니다. 사이트 대표 이미지를 하나 두고 상품이나 글에 대표 이미지가 있으면 그것으로 바꾸는 방식이 현실적입니다.
05FAQ
자주 묻는 질문
OG 태그가 검색 순위에 영향을 주나요
- 직접적인 영향은 없습니다. 구글은 순위 판단에 OG 태그를 쓰지 않는다고 밝혔습니다. 다만 공유된 링크의 클릭률이 올라가면 방문과 링크가 늘고, 그것이 간접적으로 작용합니다. 이 항목의 심각도가 낮게 잡힌 이유이자 그래도 챙기는 이유입니다.
title 과 og:title 을 다르게 써도 되나요
- 다르게 써도 됩니다. 검색 결과에 맞는 문장과 메신저 카드에 맞는 문장이 다를 수 있기 때문입니다. 다만 관리 비용이 두 배가 되므로, 특별한 이유가 없으면 같은 값을 재사용하는 편이 낫습니다.
카카오톡에서만 썸네일이 안 뜹니다
- 카카오는 자체 캐시를 갖고 있고 갱신 주기가 깁니다. 카카오 개발자 사이트의 디버거에서 해당 주소를 다시 읽어 오도록 요청해 보십시오. 이미지 용량이 지나치게 크거나 형식이 특이한 경우에도 이런 증상이 납니다.
이미지를 페이지마다 따로 만들어야 하나요
- 아닙니다. 대부분의 사이트는 대표 이미지 하나로 충분합니다. 상품이나 글처럼 이미 대표 이미지를 갖고 있는 페이지만 그것을 쓰도록 해 두면, 추가 작업 없이 페이지별로 달라집니다.
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 25가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.