플랫폼이 실제로 읽는 것
링크를 Slack, LinkedIn, X, iMessage에 붙여넣으면, 해당 플랫폼이 페이지를 불러와 메타 태그로 카드 형태를 만들지. JavaScript는 실행하지 않고 CSS도 보지 않아 - head 태그 내 메타 태그만 읽을 뿐이야.
대체 체인
대부분 플랫폼이 같은 순서로 처리하며, 이 미리보기도 그 순서를 따릅니다:
- 제목 -
twitter:title, 그 다음og:title, 그 다음<title> - 설명 -
twitter:description, 그 다음og:description, 그다음 메타 설명 - 이미지 -
twitter:image, 그 다음og:image, 그다음 아무것도 없음
그래서 모든 Open Graph 태그를 Twitter 태그로 복제하는 건 보통 쓸데없는 일이야. 따로 설정할 가치가 있는 건 twitter:card, 큰 이미지와 작은 썸네일 중 어떤 걸 쓸지 결정하니까.
대부분 깨진 카드의 세 가지 원인
- 상대 경로 og:image. 크롤러가 페이지 문맥이 없어서 해결할 수 없어. 절대 HTTPS URL 아니면 안 돼.
- 접근 불가 이미지. 인증 뒤에 있거나, robots.txt에 차단됐거나, 알 수 없는 유저 에이전트를 거부하는 호스트에서 제공됨.
- 과도한 캐싱. 태그를 고쳤는데도 예전 카드가 며칠간 남아 있어. Facebook Sharing Debugger와 LinkedIn Post Inspector는 재크롤링을 강제하지만, X는 캐시가 만료될 때까지 기다려야 해.
SEO 기능 아님
이 태그들은 순위 요소가 아니야. 누군가 공유할 때 링크가 클릭할 만해 보이는지 결정하지. 회색 박스에 URL만 보이는 링크는 공유도 클릭도 확실히 적어.
태그를 처음 작성하려면, 다음을 사용해 메타 태그 생성기 측정하세요.