간단히 말해서, 온라인에서 오픈 그래프를 확인하려면 무료 오픈 그래프 디버거 도구인 PromoPilot 에 페이지 주소를 붙여넣으세요. PromoPilot은 모든 og:* 및 Twitter Card 태그를 읽고, 이미지의 존재 여부와 크기를 확인하고, 마크업의 완성도를 평가하고, Facebook, X(Twitter), LinkedIn 링크 미리보기를 표시하며, 추가해야 할 항목에 대한 권장 사항도 제공합니다. 회원가입은 필요하지 않습니다. 아래에서 필요한 태그, 필요한 og:image 크기, 그리고 "고정된" 미리보기를 업데이트하는 방법을 확인하세요.
저는 12년 동안 웹사이트를 제작해 왔는데, 고객들로부터 순위 관련 질문보다 " Telegram 링크에 이미지가 없는 이유는 무엇인가요?"라는 질문을 훨씬 더 많이 받습니다. 보통은 5분이면 해결할 수 있는 문제인데, 어디를 살펴봐야 하는지만 알면 됩니다.
Open Graph Debugger는 무엇을 확인하나요?
게시물이나 메시지에 링크를 삽입하면 플랫폼은 해당 페이지로 이동하여 오픈 그래프 태그를 찾습니다. 태그를 찾으면 깔끔한 카드 이미지를 표시하고, 찾지 못하면 찾은 내용을 그대로 표시하거나 URL만 보여줍니다. 이 도구는 소셜 네트워크에서 인식할 수 있는 태그만 확인합니다.
| 무엇을 확인하는 건가요? | 그는 무엇을 보고 있는 걸까? | 기업은 왜 이것이 필요할까요? |
|---|---|---|
| 모든 태그 og:* | og:제목, og:설명, og:이미지, og:url, og:유형, og:사이트_이름, og:로케일 | 이러한 사이트들은 카드의 제목, 설명, 이미지를 수집합니다. |
| 트위터 카드 | 트위터:카드, 트위터:제목, 트위터:설명, 트위터:이미지 | X(트위터)는 태그를 읽고, 태그가 없으면 부분적으로 og를 사용합니다. |
| 원본 이미지 | 사진이 있나요? 있다면 크기는 어떻게 되나요? | 작은 이미지를 넣으면 카드가 측면에 있는 작은 아이콘으로 바뀝니다. |
| 완전성 평가 | 추천 태그 중 몇 개가 채워졌습니까? | 빠른 확인: 모든 것이 제자리에 있나요? |
| 네트워크 미리보기 | Facebook, X, 링크드인용 카드 | 게시하기 전에 게시물이 어떻게 보일지 미리 볼 수 있습니다. |
| 권장 사항 | 무엇을 추가하거나 수정해야 할까요? | 개발자 또는 당신을 위한 준비된 작업 목록 |
온라인에서 Open Graph 페이지를 확인하는 방법은 무엇인가요?
- Open Graph Debugger를 엽니다.
- 공유하고 싶은 페이지(기사, 제품 또는 광고 랜딩 페이지 등)의 URL을 입력하세요. "확인"을 클릭하세요.
- 태그 목록을 살펴보고, 어떤 태그가 설정되어 있는지, 어떤 태그가 비어 있는지, 그리고 og:url에 외국 주소나 테스트 주소가 있는지 확인하세요.
- 각 네트워크의 미리보기를 확인하세요. 제목이 잘리지 않았는지, 이미지가 제대로 보이는지, 가장자리에 중요한 텍스트가 있는지 확인하세요.
- 권장 사항에 따라 누락된 태그를 추가하고 페이지를 다시 확인해 주세요.
도구 페이지: 주소 입력란, "확인" 버튼, 확인 목록 및 FAQ.
이 도구는 가볍습니다. 일일 사용량 제한만으로도 방문자는 사이트의 모든 템플릿(홈페이지, 카테고리, 제품, 기사)을 확인할 수 있습니다. 무료 가입 후에는 사용량 제한이 세 배로 늘어납니다.
오픈그래프에서 가장 흔한 오류는 무엇인가요?
제가 거의 모든 다른 사이트에서 찾은 해결책과 그 순서를 알려드리겠습니다.
- `og:image`가 없거나 상대 URL로 지정되어 있습니다. 소셜 네트워크는
content="/img/cover.jpg"인식하지 못합니다.https://로 시작하는 전체 URL이 필요합니다. 이미지가 없으면 게시물의 도달률이 크게 떨어집니다. - 이미지가 너무 작습니다. 200x200 크기의 로고 때문에 카드 측면이 작은 정사각형으로 보입니다. 1200x630 크기의 이미지가 필요합니다.
- 사이트 전체에 하나의 og:image를 사용해야 합니다. 모든 기사와 소셜 미디어의 모든 제품 이미지는 로고를 포함하여 동일하게 보여야 합니다. 블로그와 카탈로그의 경우, 페이지의 메인 사진을 이미지로 사용해야 합니다.
- og:url은 홈페이지, 테스트 도메인 또는
http://버전과 같은 다른 주소로 연결됩니다. 플랫폼은 모든 링크를 단일 페이지로 통합할 수 있습니다. - `twitter:card`는 없습니다. 이 속성이 없으면 X는 종종 작은 카드를 표시합니다. 더 큰 이미지를 표시하려면
summary_large_image사용해야 합니다. - `og:title`은 제목에 "구매"와 브랜드명을 추가하여 중복 표시합니다. 소셜 미디어 피드에서는 광고처럼 보일 수 있으므로, 게시물처럼 생동감 있는 헤드라인을 사용하는 것이 좋습니다.
최소 정답 집합은 다음과 같습니다.
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">og:image에 사용할 이미지를 어떻게 준비해야 할까요?
이미지는 카드에서 가장 눈에 띄는 부분이지만, 많은 사람들이 이 부분을 소홀히 하는 경향이 있습니다. 제가 따르는 몇 가지 규칙은 다음과 같습니다.
- 사진 크기는 1200×630픽셀이며 가로 방향입니다. 소셜 네트워크는 정사각형 제품 사진의 위아래 부분을 잘라내기 때문에 제품의 얼굴이나 밑창 일부가 잘릴 수 있습니다.
- 중요한 것은 중앙 부분입니다. 플랫폼마다 가장자리를 자르는 방식이 다르고, 모바일 피드에서는 카드가 훨씬 더 작게 표시됩니다. 텍스트는 크게 유지하고 가장자리에서 멀리 떨어뜨려 배치하세요.
- 최소한의 텍스트만 사용하세요. 제목은 이미 이미지 아래에 있으므로, 이미지 자체에는 3~6단어 정도의 캡션이나 아예 캡션을 넣지 않는 것이 좋습니다.
- 파일 크기가 작습니다. 적당한 크기의 JPG 또는 PNG 파일은 빠르게 로드되며, 플랫폼에서 시간 초과 오류가 발생하지 않습니다.
- 각 주요 페이지에 전용 이미지를 사용하세요. 기사 및 제품 페이지의 경우, 기사 표지 또는 제품 대표 사진과 같은 이미지를 자동으로 생성하는 것이 편리합니다.
좋은 테스트 방법은 휴대폰의 디버거에서 미리보기를 열어보는 것입니다. 확대하지 않고는 링크가 명확하게 보이지 않으면 이미지를 수정해야 합니다.
수정 후 이전 미리보기를 어떻게 업데이트하나요?
흔히 발생하는 상황: 태그를 수정했는데도 소셜 네트워크에서 이전 이미지가 계속 표시되는 경우입니다. 원인은 캐시 때문입니다. 플랫폼이 처음 공유했을 때의 미리보기 이미지를 기억하고 있는 것이죠. Facebook 에서는 공유 디버거에서 데이터를 다시 수집하면, 링크드인에서는 게시물 검사기에서, Telegram 에서는 @WebpageBot 봇에 링크를 보내면 해결될 수 있습니다. 그래도 안 되면 주소에 ?v=2 와 같은 간단한 매개변수를 추가해 보세요. 플랫폼 입장에서는 이것이 새로운 링크로 인식될 것입니다.
비교: 오픈 그래프 디버거와 대안
| 도구 | 무료인 것은 무엇일까요? | 제한 | 누구에게 적합한가요? |
|---|---|---|---|
| PromoPilot - 오픈 그래프 디버거 | 모든 og 및 Twitter 태그, og:이미지 크기, Facebook, X 및 LinkedIn 미리보기, 추천 기능 | 소셜 미디어 캐시가 지워지지 않습니다 | 소셜 미디어에 게시하기 직전에 페이지를 바로 확인하세요. |
| 공유 디버거(메타) | Facebook 미리보기 및 데이터 재수집 | Facebook 전용, 계정 로그인 필요 | Facebook 에서 이전 미리보기를 초기화하세요 |
| 링크드인 포스트 인스펙터 | LinkedIn 미리보기 및 캐시 새로 고침 | LinkedIn에서만 사용 가능하며 로그인이 필요합니다. | 링크드인에서 홍보하시는 분들을 위해 |
| Telegram 의 @WebpageBot | Telegram 에서 링크 미리보기를 업데이트하는 방법 | Telegram 만 태그를 파싱하지 않습니다. | Telegram 채널 운영자 여러분께 |
결론: 캐시를 지우려면 공식 플랫폼 디버거가 필요하지만, 각 플랫폼은 자사 네트워크만 보여줍니다. 모든 미리보기와 누락된 태그 목록을 한 번에 확인하려면 범용 디버거를 사용하는 것이 더 편리합니다.
참고로, PromoPilot은 87가지의 무료 SEO 도구를 제공합니다. 아직 태그를 작성하지 않으셨다면, 미리보기가 가능한 Open Graph 블록을 생성해주는 메타 태그 생성기에 대한 저희 시리즈 글을 참고해 보세요.
오픈 그래프 디버거는 메타 태그 분석과 어떻게 다른가요?
메타 태그 분석은 검색 엔진의 관점에서 페이지를 살펴보는 작업입니다. 제목, 설명, 캐노니컬 태그, hreflang, 오픈 그래프 태그 등이 그 예입니다. 디버거는 소셜 미디어에 초점을 맞춰 다양한 플랫폼에 맞는 카드를 생성하고, 이미지 크기를 확인하며, 미리보기를 기반으로 맞춤형 권장 사항을 제시합니다. 소셜 미디어와 메시징 앱에서 사이트 링크가 활발하게 공유되는 경우 디버거가 더욱 유용합니다.
두 도구 모두 한 가지 한계가 있습니다. 바로 서버에서 반환된 HTML을 읽는다는 점입니다. 브라우저 스크립트로 태그가 삽입된 경우, 많은 소셜 네트워크에서 이를 인식하지 못합니다. 따라서 웹사이트 측에서 이 문제를 해결해야 합니다. 또 다른 중요한 점은 디버거가 태그는 확인하지만 공유 자체는 확인하지 않는다는 것입니다. 페이지가 비밀번호로 보호되거나, 지역 제한이 걸려 있거나, 봇 차단이 되어 있는 경우, 모든 태그가 존재하더라도 소셜 네트워크에서 해당 페이지에 접근하지 못할 수 있습니다.
무료 도구가 충분하지 않은 경우는 언제일까요?
디버거를 사용하면 페이지에 og:image 속성이 없다는 것을 알 수 있습니다. 하지만 페이지 수가 수천 개에 달하는 경우 이미지를 수동으로 삽입하는 것은 불가능합니다. 다음과 같은 상황에서 전문가의 도움이 필요합니다.
- 각 제품 또는 품목에는 자동으로 수집된 자체 미리보기 이미지가 있어야 합니다.
- 해당 사이트는 스크립트를 사용하여 태그를 반환하지만 소셜 네트워크는 이를 인식하지 못합니다.
- 각 미리보기가 클릭당 비용에 영향을 미치는 광고 및 메일링을 실행합니다.
- 웹사이트, Telegram 채널, 자동 게시 기능을 적절히 조합한 솔루션이 필요합니다.
제가 귀사 웹사이트를 위해 무엇을 도와드릴 수 있을까요?
저는 12년 경력의 개발자이자 SEO 전문가인 발레리 다니우크입니다. 200명이 넘는 고객을 보유하고 있으며, 보기 좋은 링크 미리보기를 무료로 제공해 드립니다. 모든 프로젝트에 맞춰 맞춤 제작도 가능합니다.
SEO 및 프로모션
- 웹사이트 SEO 완벽 진단: 모든 템플릿 태그를 확인하고, 자동 미리보기 이미지를 설정하며, 코드를 수정합니다.
웹사이트 및 온라인 상점
- Instagram 스토어를 웹사이트로 이전하기 - 제품 미리보기를 통해 간편하게 공유할 수 있도록 지원합니다.
- 단 하룻밤 만에 제작된 신제품 랜딩 페이지 - 소셜 미디어용 카드 디자인이 포함된 NordHarvest 사례 연구.
- Telegram 지능과 텔레그램 애플리케이션을 활용한 성형외과 웹사이트.
- 1001site 웹사이트: 소셜 네트워크 미리보기 및 Telegram 자동 게시 기능이 자동으로 설정됩니다.
봇과 자동화
Telegram 메신저에서 보기 안 좋은 링크를 보내주시면 어떤 태그가 빠졌는지 알려드리겠습니다.
결과
- 온라인 오픈 그래프 검사기는 링크가 Facebook, X, 링크드인에서 어떻게 표시되는지, 그리고 어떤 태그가 누락되었는지 보여줍니다.
- 필요한 최소값은 og:title, og:type, og:image(1200×630, 전체 주소) 및 og:url과 twitter:card입니다.
- 문제를 해결한 후 Sharing Debugger, Post Inspector, @WebpageBot 사이트의 캐시를 재설정하세요.
- 카탈로그와 블로그의 경우, 미리보기 이미지는 1001site 처럼 자동으로 수집되어야 합니다.
팔로워들이 게시물을 보기 전에 무료 Open Graph 디버거를 사용하여 공유하려는 페이지를 확인하세요.
출처
- PromoPilot의 Open Graph 디버거 도구 페이지 - 점검 목록 및 FAQ.
- 오픈 그래프 프로토콜(ogp.me) - 필수 및 선택적 속성.
- Meta의 공유 디버거와 LinkedIn 게시물 검사기는 해당 플랫폼의 공식 도구입니다.
