오픈그래프 개념과 교정 포인트

간추린 뜻 메모

오픈그래프는 이 해설이 붙잡은 온페이지 SEO¹ 표제어로, 자료마다 Open Graph, OG 태그, 오픈 그래프 프로토콜 같은 다른 이름·표기²로도 불린다. 페이지가 SNS나 메신저에서 공유될 때 보일 제목, 설명, 대표 이미지, 주소를 지정하는 meta 요소 묶음으로, og:title, og:image 같은 속성을 쓴다.

웹사이트상위노출은 검색 결과 위쪽에 웹사이트가 오르도록 손보는 작업을 말하는데, 페이지 글과 마크업을 손보는 일은 그 가운데 한 갈래다.

자리 잡은 과정 살피기

표제어의 내력을 편집 노트에 옮기면 이렇다. 페이스북이 외부 웹페이지를 자기 서비스 안의 대상처럼 다루기 위해 내놓은 규격으로, 이후 여러 SNS와 메신저가 링크 미리보기에 함께 활용하게 되었다.

작용 방식 따라가기

한 단계 깊이 내려가 보면 이 요소가 어떻게 돌아가는지 간추리면 이렇다. 링크가 공유되면 해당 서비스의 수집기가 head 영역의 og 속성을 읽어 미리보기 카드를 만들고, 값이 없으면 본문에서 임의로 고르거나 미리보기를 비워 둔다.

들여다보기 단계

되읽기 차례가 오면 오픈그래프를 확인하는 방법은 다음과 같다. 각 SNS가 제공하는 공유 미리보기 점검 도구로 카드 모양을 확인하고, 이미지를 바꾼 뒤에는 서비스 쪽 저장본을 다시 불러오도록 갱신을 요청한다.

손에 잡히는 일 정리

이 노트를 작업 한 줄로 바꾸면 다음과 같다. 글마다 공유 카드에 쓸 제목과 대표 이미지를 따로 정해 og:title과 og:image 값에 넣고, 대표 이미지는 글 내용을 짐작할 수 있는 그림으로 고른다.

경계할 점 되짚기

색연필로 교정지³에 짚어 둘 자리는 다음과 같다. 대표 이미지 크기가 너무 작거나 비율이 맞지 않으면 미리보기가 잘리거나 작게 보이므로, 서비스별 권장 규격을 미리 알아 둔다.

사례 노트

가상의 상황을 짧게 적어 보면 다음과 같다. 가령 동네 꽃집의 계절 꽃다발 안내 페이지라면 대표 꽃다발 사진과 짧은 설명을 지정해 두어야 메신저로 공유될 때 엉뚱한 로고 이미지가 뜨지 않는다.

바로잡을 점 노트

편집 메모로 고쳐 둘 착각을 옮기면 다음과 같다. 이 태그가 구글 검색 순위에 직접 영향을 준다고 보는 경우가 있지만, 주된 역할은 공유 화면의 모양을 정하는 것이며 순위 요소로 확인된 바는 없다.

견주기 노트

곁에 붙어 다니는 말과 오픈그래프를 견주어 적으면 다음과 같다. X에서 쓰는 트위터 카드 태그와 헷갈리기 쉬운데, 트위터 카드는 그 서비스용 별도 meta 속성이고 이 규격은 여러 SNS와 메신저가 함께 읽는 공용 속성이라는 점이 다르다.

이웃 개념 해설

낱말 목록 속에서 오픈그래프가 묶이는 방식은 다음과 같다. 검색 결과용인 타이틀 태그, 메타 디스크립션과 비슷한 내용을 담지만, 공유 화면에 맞춰 문구를 따로 다듬을 수 있다는 점이 다르다.

추림 스케치

웹사이트상위노출을 염두에 두고 교정지를 보는 쪽에서 오픈그래프를 핵심만 적으면 다음과 같다. 링크가 공유되는 순간 상대 화면에 어떤 카드로 보일지를 미리 정해 두는 설정이다.

참조 항목 길잡이

이 사이트 안에서는 상위노출 진단 페이지도 함께 있다. 용어집 안에서 함께 볼 문서는 아래와 같다.

• 메타 디스크립션

• 타이틀 태그

• 스키마 마크업

• 이미지 최적화