링크를 카카오톡이나 페이스북에 공유했는데, 제목도 이상하고 이미지도 안 뜨는 경험 한 번쯤 있지 않나요? 그 원인은 대부분 Open Graph 태그가 빠져있거나 잘못 설정된 경우입니다. 웹사이트를 운영하고 있다면 OG 태그는 반드시 알아야 할 기본 중의 기본이에요.
Open Graph Protocol이란?
Open Graph(OG)는 페이스북이 2010년에 만든 메타데이터 프로토콜입니다. HTML 문서의 <head> 영역에 특별한 메타 태그를 넣으면, SNS나 메신저가 해당 페이지를 공유할 때 제목, 설명, 이미지를 예쁘게 보여줄 수 있어요. 지금은 페이스북뿐 아니라 카카오톡, 슬랙, 디스코드, 링크드인 등 거의 모든 플랫폼이 OG 태그를 읽습니다.
쉽게 말하면 "내 웹페이지의 명함" 같은 거예요. 방문자가 직접 사이트에 들어오기 전에 어떤 내용인지 미리 알려주는 역할을 합니다.
필수 OG 태그 4가지
OG 태그는 종류가 많지만, 다음 4가지만 제대로 넣어도 대부분의 플랫폼에서 깔끔한 미리보기가 나타납니다.
og:title - 페이지 제목입니다. 브라우저 탭에 표시되는 <title>과 달리, SNS 미리보기 카드에 표시될 제목이에요. 60자 이내로 핵심만 담는 게 좋습니다.
og:description - 페이지 설명입니다. 미리보기 카드에서 제목 아래에 표시됩니다. 한두 문장으로 페이지 내용을 요약하세요. 155자 이내가 적당합니다.
og:image - 미리보기에 표시될 이미지 URL입니다. 절대 경로(https://로 시작)를 사용해야 합니다. 가장 중요한 태그이기도 해요. 이미지가 없으면 미리보기가 심심하게 나오거든요.
og:url - 페이지의 대표 URL입니다. 같은 페이지에 여러 주소로 접근할 수 있을 때 canonical URL 역할을 합니다.
이미지 규격: 1200x630이 답이다
OG 이미지는 플랫폼마다 표시 방식이 조금씩 다릅니다. 그래도 1200 x 630 픽셀 크기가 거의 모든 플랫폼에서 잘 보이는 범용 규격이에요. 비율로 따지면 약 1.91:1입니다.
파일 크기는 5MB 이하가 좋고, 형식은 JPG나 PNG를 추천합니다. 페이스북은 최소 200 x 200 이상이어야 이미지를 인식하고, 600 x 315 미만이면 작은 썸네일로 표시됩니다. 가능하면 1200 x 630으로 통일하는 게 편해요.
주의할 점이 있어요. 이미지 위에 텍스트를 넣을 때는 상하좌우 여백을 충분히 두세요. 플랫폼에 따라 이미지 가장자리가 잘리는 경우가 있거든요.
트위터 카드 태그
트위터(현재 X)는 자체적인 메타 태그 체계를 쓰지만, OG 태그도 대체값으로 읽어줍니다. 그래도 트위터 전용 태그를 함께 넣는 게 더 확실해요.
twitter:card - 카드 유형을 정합니다. "summary"는 작은 썸네일, "summary_large_image"는 큰 이미지 형태로 표시됩니다. 대부분의 경우 "summary_large_image"를 추천해요.
twitter:title과 twitter:description - og:title, og:description과 같은 역할이지만, 트위터에서만 다르게 표시하고 싶을 때 별도로 지정할 수 있어요.
twitter:image - 트위터용 이미지입니다. 지정하지 않으면 og:image를 대신 사용합니다.
카카오톡 미리보기 설정
카카오톡은 기본적으로 OG 태그를 읽어서 미리보기를 생성합니다. 별도의 카카오 전용 태그는 없어요. 다만 주의할 점이 몇 가지 있습니다.
카카오톡은 한 번 긁어간 미리보기를 캐시에 저장합니다. OG 태그를 수정해도 바로 반영이 안 되는 이유가 이것 때문이에요. 캐시 초기화는 카카오 개발자 도구의 "초기화" 기능을 사용하면 됩니다. 카카오 디버거 도구(developers.kakao.com)에서 URL을 입력하면 현재 캐시된 정보를 확인하고 새로고침할 수 있어요.
og:type 태그도 빠뜨리지 마세요. "website"나 "article" 중 적절한 값을 넣으면 됩니다.
OG 태그 디버깅하는 방법
태그를 작성했으면 제대로 적용됐는지 확인해봐야 합니다. 각 플랫폼마다 공식 디버깅 도구가 있어요.
Facebook Sharing Debugger (developers.facebook.com/tools/debug/) - URL을 입력하면 페이스북이 읽는 OG 정보를 보여줍니다. "Scrape Again" 버튼으로 캐시도 새로고침할 수 있어요.
Twitter Card Validator (cards-dev.twitter.com/validator) - 트위터에서 카드가 어떻게 보이는지 미리 확인할 수 있습니다.
카카오 디버거 (developers.kakao.com/tool/debugger/sharing) - 카카오톡 미리보기를 확인하고 캐시를 초기화하는 데 사용합니다.
물론 Toolneat의 OG 미리보기 도구를 쓰면 한 곳에서 편하게 여러 플랫폼의 미리보기를 확인할 수 있어서 더 효율적입니다.
자주 하는 실수와 해결법
상대 경로 사용: og:image에 "/images/og.png" 같은 상대 경로를 쓰면 일부 크롤러가 이미지를 못 찾습니다. 반드시 "https://example.com/images/og.png" 형태의 절대 경로를 사용하세요.
이미지 크기 미달: 너무 작은 이미지를 지정하면 플랫폼이 아예 무시해버립니다. 최소 200 x 200, 권장 1200 x 630을 지키세요.
캐시 문제: OG 태그를 수정했는데 미리보기가 바뀌지 않는다면 각 플랫폼의 캐시 때문입니다. 디버깅 도구에서 캐시를 초기화하세요.
특수문자 미처리: 제목이나 설명에 따옴표, 앰퍼샌드 같은 특수문자가 있으면 HTML 엔티티로 변환해야 합니다. &, " 등을 사용하세요.
OG 태그와 SEO의 관계
OG 태그 자체는 구글 검색 순위에 직접적인 영향을 주지 않습니다. 구글은 <title>과 meta description을 참고하지 OG 태그를 보지는 않아요. 하지만 간접적으로는 꽤 중요합니다.
SNS에서 매력적인 미리보기가 나오면 클릭률이 올라가고, 더 많은 사람이 페이지를 방문하게 됩니다. 이 트래픽과 공유 자체가 간접적으로 SEO에 도움이 되는 거예요. 결국 OG 태그를 잘 설정하면 SNS 유입과 검색엔진 유입 모두를 챙길 수 있는 셈입니다.
가장 좋은 방법은 <title>, meta description, og:title, og:description을 모두 비슷하되 약간씩 다르게 작성하는 겁니다. 각각의 맥락에 맞게 최적화하면 가장 좋은 결과를 얻을 수 있어요.
자주 묻는 질문
OG 태그가 SNS에서 바로 반영되지 않는 이유는?
이 주제에 대한 자세한 내용은 위 본문을 참고하시거나, 관련 도구를 직접 사용해 보세요.
OG 이미지 권장 크기는?
이 주제에 대한 자세한 내용은 위 본문을 참고하시거나, 관련 도구를 직접 사용해 보세요.
트위터 카드와 OG 태그의 차이는?
이 주제에 대한 자세한 내용은 위 본문을 참고하시거나, 관련 도구를 직접 사용해 보세요.
OG 태그를 디버깅하는 방법은?
이 주제에 대한 자세한 내용은 위 본문을 참고하시거나, 관련 도구를 직접 사용해 보세요.