브라우저는 다른 사이트를 대신 읽어올 수 없기 때문에 URL은 저희 서버가 가져옵니다. 기록하지 않고, 저장하지 않으며, 어디에도 넘기지 않습니다.
URL을 붙여넣으면 공유 카드가 나옵니다
Facebook, X, LinkedIn, WhatsApp, Discord, Slack, Telegram, iMessage가 각각 어떻게 보여줄지와 함께, 빠진 항목 목록도 받아볼 수 있습니다.
링크 미리보기에 엉뚱한 이미지가 뜨는 이유는?
거의 언제나 다섯 가지 중 하나입니다. 이 오픈그래프 검사기는 이미 og:image가 있는데도 추가하라고 말하는 대신, 어느 쪽이 문제인지 짚어 줍니다.
og:image가 두 개 이상이다
테마가 하나 넣고 플러그인이 또 하나 넣습니다. 그리고 플랫폼은 head에서 처음 만난 것을 택하는 경우가 압도적으로 많습니다. 기대한 이미지는 대개 그 아래에 있습니다. 위의 태그 표는 후보를 모두 나열하고 실제로 채택되는 것을 표시합니다.
이미지가 상대 경로다
og:image="/img/card.png"는 크롤러가 가져올 수 있는 URL이 아닙니다. 절대 경로여야 하고, 입력한 주소가 아니라 리다이렉트 이후의 최종 주소를 기준으로 해석되어야 합니다. 사이트가 www로 넘긴다면, 로컬에서 되던 경로가 운영에서는 아무것도 가리키지 않을 수 있습니다.
이미지에 핫링크 차단이 걸려 있다
세션과 올바른 referer가 있는 내 브라우저에서는 잘 열립니다. 크롤러에는 둘 다 없어 403을 받고, 카드는 이미지 없이 남습니다. 이 도구는 낯선 사람과 같은 조건으로 이미지를 불러오므로, 그 실패가 게시 후가 아니라 여기서 드러납니다.
플랫폼이 아직 캐시를 보여 준다
한 시간 전에 태그를 고쳤는데 옛 이미지가 그대로 있습니다. 미리보기 캐시는 플랫폼마다 따로 관리되고, 몇 주씩 유지되기도 합니다. 내 쪽에서 무엇을 바꿔도 지워지지 않으므로, 해당 플랫폼의 도구로 URL을 다시 읽게 해야 합니다.
페이지에 애초에 태그가 없었다
사이트가 클라이언트에서 렌더링된다면 태그는 개발자 도구 안에만 있고, 서버가 돌려준 HTML에는 없습니다. 어떤 크롤러도 자바스크립트를 기다려 주지 않습니다. 요즘 스택에서 가장 흔한 원인이자, 사람들이 가장 늦게 인정하는 원인입니다.
오픈그래프 태그, 실제로 필요한 것은 무엇인가
카드를 지탱하는 것은 네 개뿐입니다. 나머지는 다듬기이고, 스무 개를 전부 같은 긴급도로 표시하는 메타 태그 진단은 도움이 되지 않습니다.
og:title과 og:description
제목과 그 아래 두 줄입니다. og:title이 없으면 플랫폼은 <title>로 대체하는데, 이는 보통 검색 결과용으로 쓰여 카드 제목으로는 어색하게 읽힙니다. 설명이 없으면 카드 본문은 그냥 비어 있게 됩니다.
og:image, 절대 주소로 가로 1200px 이상
Facebook은 최소 200x200, 권장 1200x630을 문서로 밝히고 있습니다. LinkedIn은 1200x627을 권장하며 가로 401px 미만 이미지는 배너 대신 작은 썸네일로 표시된다고 안내합니다. 1200x630 이미지 한 장이면 모든 플랫폼을 한 번에 만족시킵니다.
twitter:card
X가 여러분에게 정말로 필요로 하는 단 하나의 태그입니다. summary_large_image로 지정하면 나머지는 오픈그래프 태그가 감당합니다. twitter: 항목이 없으면 X는 og:title, og:description, og:image로 대체하므로 굳이 중복해 적을 필요가 없습니다.
og:url, 그리고 마무리에 해당하는 것들
og:url은 트래킹 파라미터만 다른 같은 페이지가 여러 개로 집계되는 것을 막아 줍니다. og:image:width와 height는 이미지가 도착하기 전에 카드 레이아웃을 잡게 해 줍니다. og:type, og:site_name, og:locale, og:image:alt는 마감 손질입니다.
오픈그래프가 있으면 트위터 태그도 필요할까?
대부분은 필요 없습니다. 중복된 마크업의 상당수가 여기서 생깁니다. 블로그에서 본 열다섯 줄짜리 스니펫을 복사하기 전에 두 가지만 짚고 갑시다.
X는 알아서 오픈그래프로 대체한다
twitter:title, twitter:description, twitter:image가 없으면 X는 대신 og:title, og:description, og:image를 읽습니다. 그래서 정말 추가해야 하는 태그는 twitter:card 하나뿐이고, 이것이 작은 정사각형 summary를 그릴지 큰 배너를 그릴지를 정합니다. 나머지를 넣는 것은 X에서만 다른 내용을 보여주고 싶을 때에나 의미가 있습니다.
property=와 name=, 둘 다 동작하는 이유
오픈그래프 명세는 태그를 property=에 두고, X의 카드 명세는 자기 태그를 name=에 둡니다. 실제로는 두 플랫폼 모두 양쪽을 읽기 때문에, 한쪽 표기만 대조하는 검사기는 여러분의 태그 절반을 없다고 보고합니다. 이 도구는 둘 다 해석하고, 어떤 표기를 썼는지 오류가 아니라 참고로 알려 줍니다.
미리보기에 왜 아직 옛 이미지가 나올까?
플랫폼이 여러분의 페이지를 보고 있지 않기 때문입니다. 누군가 그 링크를 처음 공유했을 때 떠 둔 사본을 보고 있고, 다시 볼 이유가 생기기 전까지는 계속 그렇게 합니다.
캐시는 플랫폼마다 따로다
태그를 고친다고 누구에게 알림이 가지는 않습니다. Facebook, LinkedIn, X는 각자 사본을 들고 있어서, 한 곳에서는 제대로 보이고 동시에 다른 두 곳에서는 옛날 것이 보일 수 있습니다.
공식 도구로 다시 읽게 하세요
Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector에는 모두 새로 가져오게 하는 버튼이 있습니다. 확실하게 비우는 방법은 이것뿐이고, 즉시 반영됩니다.
메신저는 대체로 캐시하지 않는다
WhatsApp, Telegram, Discord, Slack은 보통 새 메시지마다 다시 가져오므로, 누구를 기다리지 않고 수정을 확인하는 가장 빠른 방법입니다.
새 URL이 마지막 탈출구다
끝내 갱신되지 않는다면, 그 플랫폼이 한 번도 본 적 없는 URL을 공유하면 캐시를 통째로 비켜갈 수 있습니다. 보통은 파라미터 하나만 붙여도 충분합니다.
단축 링크가 실제로 어디로 가는지 모르겠다면? QR 코드 리졸버로 풀어 보기
태그를 고친 뒤 공유할 깔끔한 링크가 필요하다면? 무료 링크 단축기로 만들기
미리보기는 쉬운 절반입니다. 그 클릭이 무엇을 남겼는지 아는 것이 나머지 절반입니다.
좋은 카드는 클릭을 가져옵니다. 그다음부터 맨 URL은 아무것도 알려주지 않습니다. 방문이 어디서 왔는지도, 어느 플랫폼이 실제로 성과를 냈는지도 알 수 없고, 한번 올린 뒤에는 목적지를 바꿀 수도 없습니다. LinkScale은 바로 그 빈자리를 위해 있습니다.
어느 플랫폼이 성과를 냈는지 확인
유입 경로, 국가, 기기별 클릭으로 LinkedIn 게시물이 일했는지 뉴스레터가 일했는지 알 수 있습니다.
나중에 목적지 변경
이미 올라간 링크의 도착지를 바꿔도, 누구에게 다시 공유해 달라고 부탁할 필요가 없습니다.
카드는 그대로 유지
LinkScale 링크는 자체 공유 태그를 지니고 다니므로, 단축했다고 방금 고친 미리보기를 잃지 않습니다.
링크 미리보기 관련 질문
무료이고 계정도 필요 없으며, 언급할 만한 사용 제한도 없습니다. 브라우저가 다른 사이트를 대신 읽어올 수 없기 때문에 URL은 저희 서버가 가져오지만, 그 엔드포인트가 하는 일은 페이지를 가져오고 태그를 뽑아 돌려주는 것뿐입니다. 기록하지 않고, 어떤 데이터베이스에도 쓰지 않으며, 제3자에게 넘기지도 않습니다. 아무것도 기기 밖으로 내보내고 싶지 않다면 HTML 붙여넣기 모드를 쓰세요. 분석 전체가 브라우저 안에서 끝납니다.
카드는 고쳤습니다. 이제 그 클릭의 값어치를 확인할 차례입니다.
LinkScale은 모든 클릭이 어디서 왔는지 보여주고, 올린 뒤에도 링크의 목적지를 바꿀 수 있게 해 줍니다.
Free 14-day trial on every plan