Open Graph meta tag는 웹 페이지가 SNS, 채팅, 북마크 서비스 등에서 공유될 때 제목, 설명, 이미지, URL을 어떻게 다룰지 알려 주는 정보입니다. 페이지 본문을 바꾸는 것이 아니라 링크 미리보기를 만들기 위한 보조 데이터입니다.
먼저 확인할 네 가지
가장 먼저 볼 항목은 og:title, og:description, og:image, og:url입니다. 이 값들이 명확하고 외부에서 가져올 수 있으면 공유 서비스가 페이지 내용을 해석하기 쉬워집니다.
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Short page description." />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />- og:title이 비어 있지 않음
- og:description이 페이지 내용과 맞음
- og:image가 절대 URL이며 공개 접근 가능함
- og:url이 canonical URL과 어긋나지 않음
- 템플릿 변경 후 오래된 값이 남아 있지 않음