본문으로 건너뛰기

Open Graph 미리보기

게시하기 전에 og:title, og:description, og:image 및 og:url을 기반으로 Facebook, X, LinkedIn에서 링크가 어떻게 표시되는지 확인하세요.

60자 중 0자

155자 중 0자

링크 미리보기

Facebook

제공된 이미지 없음

example.com

-

-

X(트위터)

제공된 이미지 없음

-

-

example.com

LinkedIn

제공된 이미지 없음

-

example.com

이용 방법

Open Graph 미리보기 도구는 입력한 og:title, og:description, og:image 및 og:url 값을 사용하여 웹페이지가 Facebook, X/Twitter 및 LinkedIn에서 링크 카드로 공유될 때 어떻게 나타나는지 실시간 시각적 시뮬레이션으로 렌더링합니다. 서버로 전송되는 데이터는 없으며, 카드는 왼쪽 필드의 정보를 바탕으로 브라우저에서 생성됩니다.

  1. Open Graph 값을 입력하세요.

    게시하려는 og:title, og:description, og:image 및 og:url을 붙여넣거나, 라이브 페이지의 head 섹션에 이미 있는 값을 사용하세요.

  2. 세 가지 카드를 모두 확인하세요.

    Facebook, X 및 LinkedIn은 각각 제목과 설명을 약간 다르게 자릅니다. 손상된 이미지 URL은 실제 플랫폼에서 표시되는 것과 동일한 대체 항목을 보여줍니다.

  3. 태그를 복사하세요.

    생성된 메타 태그를 페이지의 head에 복사한 다음, 각 플랫폼의 디버그 도구로 라이브 페이지를 검증하세요.

실무에서의 Open Graph

Open Graph(OG)는 원래 Facebook에서 만든 메타데이터 프로토콜로, 웹페이지가 공유될 때 리치 객체가 되도록 합니다. 누군가 URL을 공유하면 플랫폼의 크롤러가 OG 메타 태그를 읽어 이를 바탕으로 위에 표시된 카드를 생성합니다. 이 태그가 없으면 플랫폼이 콘텐츠를 추측하여 종종 품질이 낮은 미리보기를 생성합니다.

이미지 크기

권장 og:image 크기는 1200 x 630픽셀(비율 1.91:1)이며, 다양한 디스플레이 밀도에서 Facebook, LinkedIn, X에 선명하게 표시됩니다. 600 x 315픽셀 미만인 경우 Facebook은 전체 너비 카드 대신 작은 썸네일을 표시합니다.

캐싱

소셜 플랫폼은 Open Graph 데이터를 적극적으로 캐싱하며 때로는 며칠 동안 유지되기도 합니다. 태그를 변경한 후 각 플랫폼의 디버그 도구를 사용하여 새로 크롤링하도록 강제하세요: Facebook 공유 디버거, LinkedIn 게시물 검사기 또는 X 카드 유효성 검사기를 사용하세요.

og:title은 페이지 제목이 아닙니다

HTML 제목 태그는 검색 엔진과 브라우저 탭을 위한 것입니다. og:title은 소셜 플랫폼에서만 읽히며 SEO 제목보다 짧거나 대화체로 작성할 수 있습니다. 메타 태그 생성기를 사용하여 두 가지를 함께 만드세요.

자주 묻는 질문

Open Graph란 무엇이며 어떻게 작동하나요?

Open Graph(OG)는 Facebook에서 만든 메타데이터 프로토콜로, 모든 웹페이지가 소셜 미디어에서 리치 객체가 될 수 있게 합니다. 사용자가 URL을 공유하면 플랫폼의 크롤러가 OG 메타 태그(og:title, og:description, og:image, og:url)를 읽고 이를 사용하여 시각적 링크 카드를 구성합니다. 이러한 태그가 없으면 플랫폼이 페이지 콘텐츠를 추측하여 매력적이지 않거나 부정확한 미리 보기를 생성하는 경우가 많습니다.

Open Graph 태그에 어떤 이미지 크기를 사용해야 하나요?

권장 og:image 크기는 1200 x 630 픽셀이며, 다양한 디스플레이 밀도에서 Facebook, LinkedIn, X/Twitter에 잘 표시됩니다. Facebook에서 작은 썸네일이 표시되지 않도록 하려면 최소 600 x 315 픽셀 이상이어야 합니다. JPEG 또는 PNG 형식을 사용하고 파일 크기를 8 MB 이하로 유지하세요. 일부 플랫폼에서는 특정 카드 크기에서 가장자리를 자르기 때문에 이미지 바깥쪽 10% 영역에는 중요한 텍스트나 로고를 배치하지 않는 것이 좋습니다.

Open Graph 이미지를 변경했는데도 업데이트되지 않는 이유는 무엇인가요?

소셜 플랫폼은 Open Graph 데이터를 적극적으로 캐싱하며, 때로는 며칠에서 몇 주 동안 유지됩니다. OG 태그를 업데이트하고 배포한 후에는 각 플랫폼의 디버깅 도구(Facebook 공유 디버거, LinkedIn 게시물 검사기, X 카드 검증기)를 사용하여 캐시를 수동으로 지워야 합니다. URL을 입력하고 새로 스크래핑을 실행하세요. 이전에 게시된 게시물에서는 캐시를 지우더라도 기존 미리보기가 그대로 유지됩니다.

Open Graph 태그가 SEO 순위에 영향을 미치나요?

Open Graph 태그는 Google의 순위 알고리즘에 직접적인 영향을 미치지 않습니다. 하지만 소셜 공유를 통한 클릭률을 높여 간접적으로 SEO에 영향을 줍니다. 매력적인 og:image와 og:title은 더 많은 클릭을 유도하여 트래픽과 잠재적 백링크를 증가시킵니다. OG 최적화를 소셜 SEO라고 생각할 수 있습니다. 이는 검색 결과에서 제목 태그와 설명이 CTR을 조절하는 것과 마찬가지로 소셜 미디어에서의 클릭률을 제어합니다.

og:title과 HTML title 태그의 차이점은 무엇인가요?

HTML title 태그(브라우저 탭 및 검색 결과에 표시됨)는 검색 엔진과 브라우저를 위한 것입니다. og:title 태그는 소셜 미디어 플랫폼 전용으로, Facebook, LinkedIn, X/Twitter의 링크 카드 미리보기에 표시되는 제목을 제어합니다. 두 태그를 모두 사용하는 것이 모범 사례입니다. 동일한 텍스트를 사용하거나 SEO에 최적화된 페이지 제목보다 더 간결하고 대화체가 가미된 소셜 미디어 친화적인 og:title을 작성할 수 있습니다.