웹페이지 링크를 카카오톡이나 SNS에 붙였을 때 제목, 설명, 대표 이미지가 자동으로 표시되는 경우가 많습니다. 그런데 사이트에서는 멀쩡한데 공유 화면에서는 예전 이미지가 뜨거나 제목이 비어 있는 경우도 있습니다.
이 미리보기는 보통 페이지에 들어 있는 메타데이터를 읽어 만들어집니다. 그중 대표적으로 사용되는 것이 Open Graph, 줄여서 OG 태그입니다.
링크 미리보기는 어디에서 정보를 가져올까
웹페이지의 HTML에는 화면 본문 외에도 페이지 제목, 설명, 대표 이미지 같은 정보를 담는 메타 태그가 들어갈 수 있습니다. SNS나 메신저의 미리보기 시스템은 이런 정보를 읽어 공유 카드 형태로 보여줍니다.
대표적으로 og:title, og:description, og:image, og:url 같은 값이 사용됩니다. 서비스마다 처리 방식은 조금씩 다르지만 이 정보가 제대로 준비돼 있으면 공유 결과를 예측하기 쉬워집니다.
og:title은 공유될 제목이다
og:title에는 링크를 공유했을 때 보여주고 싶은 제목을 넣습니다. 브라우저 탭의 title과 같은 문구를 쓸 수도 있고, 공유 화면에 맞게 조금 더 간결한 제목을 따로 사용할 수도 있습니다.
너무 길면 플랫폼에 따라 일부가 잘릴 수 있으므로 핵심 내용을 앞부분에서 알 수 있게 만드는 편이 좋습니다.
og:description은 페이지 내용을 짧게 설명한다
og:description은 제목 아래에 표시되는 간단한 설명입니다. 페이지가 무엇을 다루는지 짧게 전달하는 역할을 합니다.
검색결과용 description과 비슷하게 사용할 수 있지만 목적은 공유한 링크를 받은 사람이 클릭하기 전에 내용을 이해하도록 돕는 것입니다. 광고 문구만 넣기보다 실제 페이지 내용을 설명하는 편이 자연스럽습니다.
대표 이미지가 안 뜬다면 og:image를 확인하자
링크 미리보기에서 가장 눈에 띄는 부분은 이미지입니다. 이미지가 아예 없거나 엉뚱한 그림이 뜬다면 og:image가 설정돼 있는지 먼저 확인할 수 있습니다.
이미지 URL이 외부에서 접근 가능한지, HTTPS로 정상 열리는지, 삭제되거나 접근이 제한된 파일은 아닌지도 함께 살펴봐야 합니다. 페이지에서는 로그인 상태로 이미지가 보여도 외부 미리보기 시스템이 접근하지 못하면 공유 카드에서는 표시되지 않을 수 있습니다.
페이지를 수정했는데 예전 정보가 계속 보이는 이유
OG 제목이나 이미지를 바꿨다고 해서 모든 서비스의 공유 미리보기가 즉시 바뀌는 것은 아닙니다. 서비스가 이전에 읽은 정보를 일정 시간 보관하고 있으면 과거 제목이나 이미지가 잠시 남아 있을 수 있습니다.
따라서 페이지 소스의 OG 값이 현재 올바른지 먼저 확인한 뒤, 특정 플랫폼에서만 예전 정보가 보인다면 해당 서비스의 캐시나 재수집 방식도 확인하는 것이 좋습니다.
리디렉션이 있는 링크라면 최종 페이지도 확인하자
단축 주소나 리디렉션 주소를 공유하면 중간 주소와 최종 목적지가 서로 다릅니다. 미리보기 문제를 확인할 때는 실제 최종 페이지가 어디인지, 그 페이지에 OG 정보가 있는지 함께 보는 것이 좋습니다.
중간 이동 경로가 궁금하다면 이전 글 301·302 리디렉션 차이와 최종 URL 확인하는 방법에서 확인 방법을 정리했습니다.
공유하기 전에 미리보기 정보를 확인하는 방법
직접 HTML 소스를 열어 og: 항목을 찾을 수도 있지만, 간단한 점검이라면 Social Preview 도구를 사용하는 편이 빠릅니다.
URLTO에는 공개 URL의 소셜 미리보기 정보를 확인하는 도구가 있어 링크를 실제로 여러 곳에 보내기 전에 제목·설명·이미지 같은 기본 신호를 점검할 때 사용할 수 있습니다.
블로그 글을 발행한 뒤 체크하면 좋은 순서
글을 공개한 뒤에는 먼저 실제 페이지가 정상적으로 열리는지 확인하고, 제목과 description, 대표 이미지가 의도대로 설정됐는지 살펴보면 됩니다. 이후 공유용 링크가 별도로 있다면 리디렉션과 최종 목적지도 확인하는 식으로 점검 범위를 넓힐 수 있습니다.
URL 자체가 너무 길어 공유하기 불편하다면 긴 URL 깔끔하게 줄이는 방법을, 오프라인 공유까지 필요하다면 QR 코드 만드는 법과 활용 팁을 함께 참고할 수 있습니다.
좋은 링크는 클릭하기 전에도 정보를 전달한다
링크 미리보기는 단순 장식이 아닙니다. 사용자는 링크를 열기 전에 제목과 설명, 이미지를 보고 어떤 페이지인지 판단합니다. 따라서 공유가 중요한 페이지라면 본문 제작만큼 OG 정보도 기본적으로 점검해두는 편이 좋습니다.
다음 글에서는 한 페이지를 공개한 뒤 SEO 기본 항목, 깨진 링크, 응답 속도 같은 요소를 빠르게 점검하는 방법을 정리하겠습니다.