X(구: 트위터) 미리보기가 보이지 않는 이유
트위터에서 링크를 공유했을 때 제목, 설명, 이미지가 보이지 않는다면 대부분은 메타태그가 누락된 경우입니다. 특히 Open Graph(OG) 태그는 SNS에서 콘텐츠 정보를 인식할 수 있게 도와주는 핵심 요소입니다.
해결 방법: OG 태그 추가하기
템플릿의 <head> 영역에 아래와 같은 태그를 추가해주면 됩니다.
<meta property="og:title" content="Case Converter">
<meta property="og:description" content="영어 대소문자 변환기">
<meta property="og:image" content="https://www.nullvuild.com/static/img/nv.png">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
<meta property="og:type" content="blog">og:url은 현재 페이지의 URL을 동적으로 생성하기 위해 request.build_absolute_uri를 사용했습니다.
og:image는 외부에서 접근 가능한 절대경로여야 트위터에서 정상적으로 불러올 수 있습니다.
적용 후 테스트는 필수입니다
태그를 추가한 뒤에는 Twitter Card Validator를 통해 미리보기가 잘 나오는지 꼭 확인해야 합니다. 이미지 크기나 형식이 조건에 맞지 않으면 여전히 노출되지 않을 수 있습니다.
한 단계 더: 페이지별 정보 동적으로 구성하기
블로그나 게시판처럼 페이지마다 제목과 설명이 다르다면, 각 페이지의 메타 정보를 동적으로 구성하는 게 좋습니다. Django에서는 뷰나 템플릿 컨텍스트에서 해당 값을 전달해주면 손쉽게 구현할 수 있습니다.
Nullvuild
@nullvuild