오픈그래프의 자리와 배치 순서

층으로 나눈 정의

오픈그래프는 노트를 적은 쪽에 따라 Open Graph, OG 태그라고도 표기된다.¹ 노트가 칸을 묶는 방식으로 보면 오픈그래프는 온페이지 SEO 용어 쪽에 끼여 있다. 링크를 공유했을 때 보이는 미리보기의 제목과 설명, 대표 이미지를 지정하는 meta 태그 묶음이다.

목록에 오른 까닭

검색엔진최적화를 노리고 칸을 다시 묶는 작업에서 이 요소가 규칙으로 정리된 과정은 이렇게 이어진다. 사회관계망 서비스에서 링크가 널리 유통되기 시작하자, 각 서비스가 문서에서 멋대로 요소를 긁어 오는 문제를 줄이려고 공통 태그 규약이 제안됐다.

처리 방식

도면을 바탕에 두고 움직임을 따라가면 오픈그래프의 처리 차례가 비로소 손에 잡힌다.² 공유 요청을 받은 서비스가 문서 head 영역의 지정 값을 읽어 미리보기 카드를 구성하며, 값이 없으면 본문에서 적당한 요소를 골라 대신 채운다.

배치표에 함께 적히는 항목과의 견줌

같은 묶음에 함께 올라서 이 요소와 가려 둘 이웃 개념이 같은 층에 있다. 검색엔진용 어휘인 스키마 마크업과 달리, 이쪽은 공유 화면 미리보기를 위한 태그 규약이다.

상태 확인 경로

구조 전반을 가늠하는 흐름은 진행절차 쪽이 떠안고 있다. 다른 항목을 빼고 이 자리만 따지면 대조할 곳은 이렇게 꼽힌다. 각 서비스가 제공하는 공유 미리보기 점검 도구에 주소를 넣어 읽힌 값을 보고, 캐시가 남아 있으면 갱신을 요청한다.

구조를 짜는 쪽의 정비

층을 가른 뒤 내용을 채우는 단계에서 오픈그래프를 관리하며 하는 손질은 이렇게 남는다. 문서 템플릿에서 제목과 설명, 대표 이미지 값을 자동으로 채우게 하고, 발행 뒤 공유 점검 도구로 카드 모양을 한 번 확인한다.

선이 엉키는 사고

칸 이름을 뒤늦게 고치는 단계에서 이 요소를 다루다 어긋나기 쉬운 곳은 이렇게 꼽힌다. 이미지 크기나 비율이 맞지 않으면 잘려 나오고, 값을 고쳐도 서비스 쪽 캐시 탓에 옛 미리보기가 한동안 그대로 보인다.

그려 본 배치

설계가 실물로 바뀌는 장면을 보려고 상상한 장면 하나를 아래에 적어 둔다. 예를 들어 대표 이미지를 지정하지 않은 문서를 공유한다면, 본문 첫 이미지나 로고가 엉뚱하게 카드에 실릴 수 있다.

떠도는 주장

도면 없이 전해 듣는 조언 가운데 이 요소에 관한 통념은 이렇게 정리해 둔다. 검색 순위에 쓰이는 태그로 여기는 경우가 있으나, 이 값들은 공유 화면을 만드는 데 쓰이고 검색 결과 제목은 다른 요소가 담당한다.

맺는 설계 메모

검색엔진최적화를 두고 그린 도면의 범례 자리에 오픈그래프를 군더더기를 덜고 한 줄로 적어 둔다면 이렇다. 링크가 밖으로 퍼질 때 어떤 모습으로 보일지 문서가 직접 지정해 두는 태그 묶음이다.

이어 볼 읽을거리

도면 뒤에 붙인 문서로는 메타 디스크립션과 스키마 마크업이 다음 쪽에 준비되어 있다. 나머지 참고 자리에 남겨 둔 쪽으로는 이미지 최적화와 LSI 키워드 문서도 선으로 연결되어 있다. 검색 결과 쪽 요약문은 메타 디스크립션이 맡고, 미리보기에 쓰이는 이미지는 이미지 최적화 기준에 맞춰 따로 준비한다.