오픈 그래프(Open Graph)는 웹 페이지의 제목, 유형, 대표 이미지, 주소 등을 전달하는 메타데이터 규약이다. 주소를 메신저나 소셜 미디어에 붙였을 때 나타나는 미리보기에 쓰인다. 웹 페이지 안에서는 큰 이미지가 잘 보여도, 공유 화면에는 다른 이미지가 나타날 수 있다. ([MDN: 웹 페이지 메타데이터](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata))

- **기본 정보:** `og:title`, `og:type`, `og:image`, `og:url`이 기본 속성이다. 짧은 소개에는 `og:description`, 이미지 설명에는 `og:image:alt`를 쓸 수 있다. ([오픈 그래프 명세](https://ogp.me/))
- **작업마다 다른 표지:** [[포트폴리오 웹사이트]]의 모든 주소에 같은 로고를 넣을 수도 있지만, 작업별 제목과 이미지를 주면 공유된 카드에서도 어느 작업인지 알기 쉽다. [[패비콘]]과는 역할이 다르다.

## HTML에 적기

다음은 가상의 작업 웹 페이지에 넣는 예시다. `head` 안에 두고 `example.com` 주소와 파일 경로를 실제 공개 주소로 바꾼다. 이미지도 외부에서 열 수 있어야 한다.

```html
<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 메타정보 관리](https://developers.kakao.com/docs/ko/tool/common))

#HTML #웹 #메타데이터