쇼핑몰 정보_오픈그래프 설정

쇼핑몰 URL을 공유할 때 설정하신 오픈 그래프의 이미지와 제목, 설명이 함께 공유되어 상대방이 링크를 클릭하고 방문하는데 정확한 정보를 전달할 수 있습니다. 또한 상품 URL을 공유할 경우에는 오픈그래프를 사용하여 별도로 설정하지 않아도 상품 이미지와 상품명을 사용하여 편리하게 이용하실 수 있습니다.

🤚🏼

오픈 그래프(Open graph)란? 웹사이트 링크를 소셜 미디어에서 공유할 때, 미리보기 형식으로 보여지는 제목, 설명, 이미지 등을 설정하는 기술입니다. 페이스북에서 처음 만들었지만, 현재는 카카오톡, 네이버 블로그 등 다양한 플랫폼에서 사용되고 있습니다. 오픈 그래프를 사용하면 웹사이트 관리자가 소셜 미디어에서 자신의 콘텐츠가 어떻게 표시될지 제어할 수 있습니다.

🧶

어디에 있나요? 관리자 화면 > 디자인관리> 기본 설정 > 쇼핑몰 정보

오픈그래프 설정 방법

  • 오픈그래프 제목은 쇼핑몰 명을 등록하는 경우가 일반적이지만 간단한 문구와 함께 쇼핑몰 명을 등록하는 것도 도움이 될 수 있습니다.

    예시) 플렉스지, 공구하기 좋은 공구몰, 아름다운 젊음 뷰티플로우

  • 오픈그래프 설명은 짧게 쇼핑몰의 부연 설명이 들어가면 좋습니다.

    예시) 매주 금요일에 진행하는 생활용품 공구쇼핑몰, 인스타 뷰티 전문 크레이터의 뷰티 컨설팅

  • 오픈그래프 이미지는 500x250 크기의 png, jpg 이미지를 사용할 수 있으며 쇼핑몰을 시각적으로 쉽게 기억할 수 있도록 브랜드 로고 또는 연관된 시각 효과를 사용하면 좋습니다.

  • 다만 이미지 등록시 한글 파일명을 사용하시면 표시되지 않는 문제가 생기니 주의해 주세요.

오픈그래프 등록 화면

Group 3.png

오픈그래프 항목별 적용 위치

Group 2.png

오픈그래프 사용 예시

소셜 미디어에 공유했을 경우의 예시 화면에 표시되는 내용입니다.

· 오픈그래프 사용 예시_ 카카오톡 채팅

Group 4.png

· 오픈그래프 사용 예시_ 네이버 블로그 게시글

og (1).png

og.png

· 오픈그래프 사용 예시_페이스북 피드

og (2).png

오픈그래프가 올바르게 표시되지 않나요?

🤚🏼

잠깐! 이미지가 즉시 반영되지 않을 경우, 공유 디버거에서 쇼핑몰 URL을 입력해 새로고침하면 바로 적용됩니다.

• 페이스북 공유 디버거 :  https://developers.facebook.com/tools/debug/

Group 6.png

• 카카오톡 공유 디버거 : https://developers.kakao.com/tool/clear/og

Group 5.png

• 네이버 밴드 공유 디버거 : https://up.band.us/snippet/view

band_debug.png

⚙

관리자 우측 상단에 있는 [쇼핑몰 바로 적용] 버튼을 누르면 수정하신 내용이 쇼핑몰에 즉시 적용됩니다. 자세한 설명은 아래의 페이지로 이동 후 확인해 주세요.

쇼핑몰 바로 적용이란?