링크 미리보기 이미지나 제목이 잘못 나올 때 해결 방법
링크 미리보기에 엉뚱한 이미지나 제목이 나오는 원인을 찾고, Open Graph 태그를 고치고, Facebook과 LinkedIn 미리보기를 새로 고치고, 단축 링크까지 테스트해 보세요.
링크 미리보기에 잘못된 이미지나 제목이 나오는 이유는 대개 페이지의 태그가 잘못되었거나, 앱이 페이지의 예전 사본을 저장해 두었기 때문이에요. 대부분의 앱은 og:title, og:image 같은 페이지의 Open Graph 태그로 미리보기를 만들어요. 먼저 태그를 고친 다음, 예전 사본을 가진 앱에 페이지를 다시 읽어 달라고 요청하세요. Facebook은 Meta의 공유 디버거(Sharing Debugger), LinkedIn은 게시물 검사기(Post Inspector)를 쓰면 돼요.
이 가이드에서는 가상의 지역 극단 Eastgate Players를 예로 들어요. 이 극단의 신작 공연 페이지는 미리보기에 작년 포스터와 제목이 나와요. 이 가이드는 직접 수정할 수 있는 페이지와 직접 관리하는 단축 링크를 다뤄요. 다른 사람이 운영하는 페이지라면 그 사람에게 태그를 고쳐 달라고 요청하세요.
미리보기가 어디에서 오는지 알아보기
미리보기는 리디렉션을 모두 거친 뒤 링크가 최종적으로 여는 페이지에서 와요. 단축 링크에는 자체 미리보기가 없어요. Links는 저장된 목적지로 리디렉션할 뿐이고 미리보기 설정이 없어요. Links 앱에서 링크에 붙인 제목은 미리보기에 절대 나오지 않아요.
페이지의 Open Graph 태그 확인하기
비공개 창에서 페이지를 열고 소스를 본 다음 og:를 검색하세요. Open Graph 프로토콜은 기본 태그 네 개를 요구해요. og:title, og:type, og:image, 그리고 페이지 고유의 영구 주소인 og:url이에요. 극단이 고친 태그는 다음과 같아요.
<meta property="og:title" content="Harbor Lights: our new show" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Five evenings in April at Eastgate Hall." />
<meta property="og:image" content="https://example.org/img/poster-harbor-lights.jpg" />
<meta property="og:url" content="https://example.org/harbor-lights/" />다음 문제가 있는지 살펴보세요.
| 문제 | 해결 방법 |
|---|---|
og:image 태그가 없음 |
태그를 추가하세요. 없으면 Facebook이 추측해서 다른 이미지를 고를 수 있어요 |
| 예전 페이지에서 태그를 복사해 옴 | 이 페이지에 맞게 모든 og: 태그를 업데이트하세요 |
og:image가 작년 파일 이름을 그대로 씀 |
새 이미지의 파일 이름을 바꾸고 태그를 업데이트하세요 |
og:image가 /img/poster.jpg처럼 경로만 적혀 있음 |
Open Graph 예시처럼 전체 https:// 주소를 쓰세요 |
| 페이지나 이미지에 로그인이 필요함 | 공개된 페이지와 이미지를 쓰세요. 미리보기 도구는 로그인하지 않아요 |
og:url이 홈페이지를 가리킴 |
이 페이지의 주소로 설정하세요 |
| 수정한 내용이 소스에 보이지 않음 | 사이트 캐시를 지우세요 |
극단의 페이지는 작년 페이지를 복사해 만들었기 때문에 og:title에 이전 공연 이름이 들어 있었고, 새 포스터는 같은 이름으로 poster.jpg를 덮어쓴 상태였어요.
앱이 캐시한 미리보기 새로 고치기
페이지를 고쳐도 앱이 이미 저장한 미리보기는 바뀌지 않아요.
Facebook은 Meta의 공유 디버거(Sharing Debugger)에 페이지 주소를 붙여 넣으세요. Meta의 공유 가이드에 따르면 이 도구는 크롤러가 읽은 태그를 보여 주고 페이지를 다시 가져와요. 이미지는 주소를 기준으로 캐시되어 주소가 바뀌지 않으면 업데이트되지 않아요. 그래서 극단이 교체한 포스터가 계속 예전 그대로 나왔던 거예요. Meta는 처음 공유할 때부터 이미지가 제대로 로드되도록 og:image:width와 og:image:height도 넣으라고 권해요.
LinkedIn은 게시물 검사기(Post Inspector)에 주소를 입력하고 미리보기를 확인하세요. LinkedIn 도움말에 따르면 새로 고침은 새 게시물에만 적용돼요. 기존 게시물은 예전 미리보기를 그대로 유지하므로 극단은 새 게시물을 올려요.
WhatsApp이나 X (Twitter) 같은 다른 앱에서는 보내기 전에 작성 중인 초안에서 미리보기를 확인하세요.
미리보기 도구가 보는 방식으로 단축 링크 테스트하기
이런 도구는 입력한 주소를 확인해요. reunified.link/k7m2x9qa 같은 단축 링크를 공유한다면 단축 링크도 도구로 확인하세요.
Links는 미리보기 도구를 포함한 모든 방문에 규칙을 적용해요. 국가 규칙은 그 나라에서 접속하는 도구와 일치할 수 있고, 휴대전화나 태블릿이라고 밝히지 않는 도구는 데스크톱으로 취급돼요. 그래서 미리보기에 규칙의 목적지가 나올 수도 있으니, 모든 목적지에 올바른 태그를 넣으세요. 규칙이 어떻게 일치하는지는 라우팅 가이드에서 설명해요.
도구에 링크를 사용할 수 없다거나 링크가 없다는 Links 페이지가 나오면 문제 해결 가이드를 참고하세요.
단축 링크의 목적지를 바꾼 뒤에도 미리보기를 캐시한 앱은 예전 페이지를 계속 보여 줄 수 있으니, 도구에서 단축 링크를 다시 확인하세요.
미리보기가 클릭 수에 주는 영향 이해하기
많은 앱은 링크를 붙여 넣자마자 그 페이지를 불러와요. Links는 자신이 인식하는 크롤러, 링크 미리보기, 브라우저 미리 가져오기도 리디렉션하지만, 클릭으로 집계하거나 크레딧을 청구하지는 않아요. Meta의 공유 크롤러도 그중 하나이므로 공유 디버거를 써도 집계된 클릭이 늘지 않아요. Links가 인식하지 못하는 도구는 클릭으로 집계돼요.
내가 브라우저에서 테스트로 방문한 것은 집계되고, 링크를 두 번 연 사람은 두 번으로 집계돼요. Links가 클릭마다 무엇을 저장하는지는 분석 개인정보 가이드에서 설명해요.
공유할 때마다 미리보기 확인하기
다음 점검표를 활용하세요.
- 비공개 창에서 페이지의 태그를 확인하세요.
- 바꾼 이미지에는 모두 새 파일 이름을 붙이세요.
- 단축 링크를 만들거나 목적지를 업데이트하세요.
- 페이지와 단축 링크를 Meta와 LinkedIn의 도구로 확인하세요.
- 작성 중인 메시지 초안에서 미리보기를 확인하세요.
- 게시한 다음 네트워크마다 실제 게시물 하나를 확인하세요.
디자인을 바꾼 뒤에도 다시 확인하세요. 새 템플릿이 태그를 바꿀 수 있어요. 극단은 이제 포스터 파일마다 공연 이름을 붙여요.
Links는 연결되는 곳을 바꿔도 같은 단축 주소를 유지하고, 인식한 미리보기 요청은 집계에서 빼요. 미리보기는 내 페이지에서 오니, 고칠 곳도 내 페이지예요.