오픈 그래프(Open Graph)는 웹 페이지의 제목, 유형, 대표 이미지, 주소 등을 전달하는 메타데이터 규약이다. 주소를 메신저나 소셜 미디어에 붙였을 때 나타나는 미리보기에 쓰인다. 웹 페이지 안에서는 큰 이미지가 잘 보여도, 공유 화면에는 다른 이미지가 나타날 수 있다. (MDN: 웹 페이지 메타데이터)
- 기본 정보:
og:title,og:type,og:image,og:url이 기본 속성이다. 짧은 소개에는og:description, 이미지 설명에는og:image:alt를 쓸 수 있다. (오픈 그래프 명세) - 작업마다 다른 표지: 포트폴리오 웹사이트의 모든 주소에 같은 로고를 넣을 수도 있지만, 작업별 제목과 이미지를 주면 공유된 카드에서도 어느 작업인지 알기 쉽다. 패비콘과는 역할이 다르다.
HTML에 적기
다음은 가상의 작업 웹 페이지에 넣는 예시다. head 안에 두고 example.com 주소와 파일 경로를 실제 공개 주소로 바꾼다. 이미지도 외부에서 열 수 있어야 한다.
<meta property="og:title" content="접히는 포스터">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/work/fold">
<meta property="og:image" content="https://example.com/images/fold.jpg">
<meta property="og:description" content="접는 순서에 따라 읽는 순서가 바뀌는 포스터.">
<meta property="og:image:alt" content="세 구획으로 접힌 포스터를 반쯤 펼친 모습">- 내용과 표시: 속성을 적는 규칙과 서비스가 카드를 그리는 방식은 다르다. 글자 수와 이미지 자르기 방식이 다를 수 있으므로 공유될 서비스의 미리보기에서 확인한다.
- 바꿨는데 그대로일 때: 공유 미리보기 캐시에 이전 정보가 남아 있을 수 있다. 원문 HTML의 값과 실제 이미지 주소를 먼저 확인하고, 이용하는 서비스의 미리보기 갱신 도구를 살핀다. 카카오는 공유 API 등의 스크랩 메시지에 쓰인 주소의 OG 정보를 확인하고 초기화하는 도구를 제공한다. (카카오: URL 메타정보 관리)