Open Graph 미리보기 - 무료 SEO 도구

요약

2024년 Social Media Examiner 보고서에 따르면, Open Graph 태그를 제대로 설정한 콘텐츠는 그렇지 않은 게시물보다 최대 2.5배 많은 참여를 얻습니다.

더 알아보고 싶다면 물어보세요

페이스북, 링크드인, 트위터, 왓츠앱에 링크를 공유하면 플랫폼이 페이지의 Open Graph(OG) meta 태그를 읽어 제목, 설명, 이미지가 담긴 카드 형태의 풍성한 미리보기를 만듭니다. 이 태그가 없거나 잘못 설정되어 있으면 미리보기가 깨져 보이거나, 엉뚱한 이미지가 나오거나, 클릭을 끌지 못하는 밋밋한 설명이 표시됩니다.

sorank.com의 무료 OG 미리보기 도구를 쓰시면, 발행하기 전에 주요 소셜 플랫폼마다 페이지가 어떻게 보일지 정확히 확인할 수 있습니다. 실시간으로 오류를 잡고, 이미지를 다듬고, 참여를 최대로 끌어올리세요.

Open Graph 태그란 무엇입니까?

Open Graph는 2010년 페이스북이 만든 규약으로, 웹페이지가 소셜 그래프 안에서 풍성한 객체가 되도록 해 줍니다. 페이지의 <head> 구역에 정해진 <meta> 태그를 넣으면, 콘텐츠가 공유될 때 플랫폼이 어떻게 표시할지 직접 정할 수 있습니다.

핵심 Open Graph 태그는 다음과 같습니다.

og:title, 공유 카드에 표시되는 제목입니다. 60자 이내로 유지하시는 편이 좋습니다.

og:description, 제목 아래에 나타나는 보조 설명입니다. 150자에서 200자를 목표로 하세요.

og:image, 미리보기 이미지입니다. 시각적으로 가장 큰 영향을 주는 요소입니다. 권장 크기는 1200×630 픽셀입니다.

og:url, 공유되는 페이지의 canonical 주소입니다.

og:type, 콘텐츠 유형(website, article, product, video 등)을 정의합니다.

og:site_name, 웹사이트 또는 브랜드 이름입니다.

트위터는 Twitter Cards라는 자체 방식을 쓰며 twitter:card, twitter:title, twitter:description, twitter:image 같은 태그를 사용합니다. 다만 자체 태그가 없으면 Open Graph 태그를 대신 읽습니다.

OG 미리보기가 SEO 전략에 중요한 이유

소셜 공유가 SEO와 무슨 관계인지 궁금하실 수 있습니다. 소셜 신호가 구글의 직접적인 순위 요소는 아니지만, 간접적인 이점은 뚜렷합니다.

소셜 플랫폼에서 오는 트래픽 증가: 보기 좋고 잘 짜인 공유 카드는 소셜 미디어에서의 클릭률을 크게 높입니다. 소셜 경로로 들어오는 방문자가 늘어나면 백링크, 브랜드 언급, 참여 신호가 생길 가능성도 함께 커집니다.

이탈률 감소: 사용자가 클릭하기 전에 정확한 미리보기를 보면 무엇을 기대할지 알게 됩니다. 미리보기와 실제 내용이 맞아떨어지면 이탈률이 낮아지고 체류 시간이 늘어나며, 둘 다 긍정적인 사용자 경험 신호입니다.

브랜드 일관성: 모든 플랫폼에서 일관되고 정돈된 공유 카드는 브랜드 정체성을 강화하고 신뢰를 쌓습니다.

공유 확산: 사람들은 미리보기가 매력적인 콘텐츠를 더 잘 공유합니다. 공유가 한 번 일어날 때마다 자연스러운 발견과 백링크의 기회가 또 하나 생깁니다.

Sorank OG 미리보기 도구 사용법

OG 미리보기 도구는 소셜 공유 카드를 점검하고 다듬도록 돕습니다.

1단계: 미리 보고 싶은 페이지의 주소를 입력하세요. 도구가 페이지를 가져와 모든 Open Graph 및 Twitter Card meta 태그를 읽습니다.

2단계: 페이스북, 트위터/X, 링크드인, 왓츠앱용으로 만들어진 미리보기를 확인하세요. 플랫폼마다 공유 카드를 조금씩 다르게 표시하므로, 각각에서 실제로 어떻게 보이는지 보여 드립니다.

3단계: 문제를 찾으세요. 태그 누락, 너무 작은 이미지, 잘린 제목, 권장 글자 수를 넘긴 설명 등 흔한 문제를 짚어 줍니다.

4단계: 고치고 다시 점검하세요. meta 태그를 바로잡은 뒤 주소를 다시 입력해 모든 미리보기가 제대로 나오는지 확인하세요.

흔한 OG 태그 실수와 해결 방법

경험 많은 개발자도 Open Graph에서 실수를 합니다. 가장 자주 보이는 문제는 다음과 같습니다.

og:image 태그 누락: 가장 흔한 실수입니다. 이미지가 없으면 플랫폼은 빈 카드를 보여 주거나 페이지에서 아무 이미지나 가져옵니다. 1200×630 픽셀의 고화질 이미지를 반드시 지정하세요.

이미지가 너무 작거나 비율이 맞지 않음: 페이스북은 최소 200×200 픽셀을 요구하지만 큰 카드 형식에는 1200×630을 권장합니다. 너무 작거나 1.91:1 비율이 아닌 이미지는 어색하게 잘리거나 큰 카드 대신 작은 섬네일로 표시됩니다.

절대 주소 대신 상대 주소 사용: OG 태그 값은 모두 https://로 시작하는 절대 주소여야 합니다. /images/og.jpg 같은 상대 경로는 소셜 플랫폼에서 작동하지 않습니다.

중복되거나 서로 어긋나는 태그: 같은 페이지에 og:title이나 og:image가 여러 개 있으면 크롤러가 혼란스러워합니다. OG 태그는 각각 한 번씩만 나타나게 하세요.

캐시를 비우지 않음: 페이스북을 비롯한 플랫폼은 OG 데이터를 강하게 캐시합니다. 태그를 수정한 뒤에는 페이스북의 Sharing Debugger로 다시 읽어 오게 해 캐시된 내용을 지워야 합니다.

트위터 전용 태그 누락: 트위터가 OG 태그를 대신 읽기는 하지만, twitter:card를 summary_large_image 값으로 지정하면 작은 요약 카드 대신 큰 이미지 형식으로 표시됩니다.

플랫폼별 OG 요구 사항

플랫폼마다 저마다의 요구 사항과 특징이 있습니다.

페이스북: 최소 이미지 크기 200×200px, 권장 1200×630px입니다. article, product, video 같은 og:type 값을 지원합니다. 캐시를 강하게 적용하므로 Sharing Debugger로 갱신하세요. 제목은 최대 60자, 설명은 최대 200자입니다.

트위터/X: twitter:card meta 태그가 필요합니다. summary(작은 이미지)와 summary_large_image(큰 이미지) 카드 형식을 지원합니다. 이미지는 summary에 최소 144×144px, 큰 이미지에 최소 300×157px가 필요합니다. 트위터 전용 태그가 없으면 OG 태그를 대신 읽습니다.

링크드인: OG 태그를 그대로 사용합니다. 권장 이미지 크기는 1200×627px입니다. article과 website 유형을 지원하며, 점검용으로 자체 Post Inspector 도구를 제공합니다.

왓츠앱: 링크 미리보기를 위해 OG 태그를 읽습니다. og:image는 HTTPS로 제공되어야 합니다. 미리보기를 기기에 캐시하므로, 지우려면 사용자가 앱 캐시를 직접 비워야 합니다.

OG 이미지 디자인 권장 사항

OG 이미지는 소셜 공유 카드에서 가장 중요한 요소입니다. 다음 기준을 따르세요.

• 어디서나 잘 보이도록 1200×630 픽셀(1.91:1 비율)을 쓰세요.
• 플랫폼마다 잘리는 범위가 다르므로, 중요한 글자와 시각 요소는 이미지 가운데 80% 안에 두세요.
• 바로 알아볼 수 있도록 브랜드 로고나 색을 넣으세요.
• 굵고 대비가 뚜렷한 글자를 쓰세요. 많은 사용자가 휴대폰으로 소셜 미디어를 봅니다.
• 빠르게 불러오도록 파일 용량을 5 MB 이하, 되도록 1 MB 이하로 유지하세요.
• 사진은 JPEG, 글자가 얹힌 그래픽은 PNG를 쓰세요.
• 사이트 전체에 같은 이미지를 쓰지 마시고, 중요한 페이지마다 고유한 OG 이미지를 만드세요.
• 트위터/X처럼 어두운 화면을 지원하는 플랫폼이 있으므로, 어두운 배경에서도 확인해 보세요.