오픈 그래프란?Open Graph

오픈 그래프(Open Graph)는 링크를 카카오톡·페이스북 등에 공유할 때 보이는 제목·설명·이미지를 지정하는 메타 태그 규격입니다.

오픈 그래프에 대해 알아 둘 점은?

• og:title, og:description, og:image 같은 태그로 지정합니다.
• 페이스북이 2010년에 만든 규격으로, 지금은 메신저·SNS 대부분이 읽습니다.
• 검색 순위 요소는 아니지만 공유됐을 때의 클릭률에 영향을 줍니다.

오픈 그래프는 왜 중요한가요?

링크가 메신저나 SNS로 퍼질 때 사람들은 미리보기 카드의 이미지와 제목만 보고 열지 말지 정합니다. 오픈 그래프를 정해 두지 않으면 서비스마다 다른 이미지와 문구가 보여 브랜드가 일관되게 전달되지 않습니다. 공유로 들어온 방문은 검색 밖에서 생기는 유입이라, 미리보기 카드가 곧 그 페이지의 첫 화면 역할을 합니다. 한 번 정해 두면 글을 새로 쓸 때마다 자동으로 적용되도록 템플릿에 넣어 두는 것이 효율적입니다.

어떻게 확인하고 적용하나요?

1. 모든 페이지에 og:title, og:type, og:image, og:url 네 가지를 기본으로 넣습니다.
2. og:url에는 캐노니컬과 같은 대표 주소를 넣어 공유 주소를 하나로 모읍니다.
3. og:image에는 가로·세로 크기와 이미지 설명(og:image:alt)을 함께 적어 둡니다.
4. 글마다 내용을 보여 주는 대표 이미지를 따로 지정해 같은 이미지 반복을 피합니다.

어떤 오해가 많나요?

• 오해: og:description만 있으면 충분하다
  오픈 그래프 규격의 필수 속성은 og:title, og:type, og:image, og:url 네 가지입니다. 설명은 선택 속성입니다.
• 오해: og:image:alt는 사진 아래 붙는 캡션이다
  규격상 이미지에 무엇이 담겼는지 설명하는 대체 텍스트이며 캡션이 아닙니다.
• 오해: 태그는 본문 아무 곳에 넣어도 된다
  오픈 그래프 태그는 페이지 head 영역에 meta 요소로 넣고, property에 이름을, content에 값을 적습니다. 플러그인을 쓸 때도 실제 출력 위치를 확인합니다.

예를 들면 어떤 경우인가요?

A사는 모든 글이 같은 로고 이미지로 공유되던 것을 바꿨습니다. 글마다 제목이 들어간 대표 이미지를 만들어 og:image로 지정하고, 이미지 설명도 og:image:alt로 함께 넣었습니다.

관련 용어

함께 읽으면 좋은 글