현재 위치
  1. 게시판
  2. [구] 운영 매뉴얼

[구] 운영 매뉴얼

쇼핑몰 운영시 가장 많이 하는 질문들을 정리하였습니다.

게시판 상세
제목 [오픈그래프] 카카오톡에 도메인 입력시 사이트정보 표시하기
작성자 디자인플로어 (ip:) 제공 매뉴얼 보기
  • 평점 0점  
  • 작성일 2016-07-13
  • 추천 추천하기
  • 조회수 13627



1.오픈그라프란?


    SNS에 쇼핑몰 주소를 공유하면 사이트이름, 설명, 이미지 등 쇼핑몰 정보를 미리 보여줄 수 있는 기능입니다.

    오픈그라프가 설정되면 카카오톡, 라인, 페이스북등의 메신저에 도메인(주소)를 입력시이미지, 제목, 설명이 표시됩니다.








2.기본 설정하기


    경로: 카페24 관리자화면 > 상점관리 > 운영관리 > 검색엔진 최적화(SEO) > SEO태그 설정 으로 이동해주세요.


    1) SEO 태그 사용설정란에서 "사용함" 에 체크 해주세요.

    2) HTML 태그 우선순위 설정 항목이 있는 경우 "HTML 태그사용안함" 을 선택하세요. (해당 항목이 없는 경우 무시하세요)

    3) [저장] 버튼을 눌러 설정을 저장해주세요.








3.오픈그라프 정보 입력하기

 

    경로: 카페24 관리자화면 > 상점관리 > 운영관리 > 검색엔진 최적화(SEO) > [고급설정] 으로 이동해주세요.


    1) '오픈그래프 태그 설정' 항목에서 아래와 같은 노출되고자 하는 정보를 입력후 설정을 [저장] 해주세요.


        og:site_name   : 쇼핑몰 이름을 입력하세요.

        og:title             : 쇼핑몰 이름을 입력하세요.

        og:description  : 쇼핑몰 설명을 작성하세요.


 

    [팁!] 직관적인 쇼핑몰 제목과 설명을 입력해주세요. 너무길게 입력시 정상 반영되지 않을 수 있습니다.

    메인화면 외에도, 상품분류, 상품상세, 게시판 설정 탭에서 각각 설정이 가능하지만, 가급적 기본값을 사용하시길 권장해드립니다.








4.오픈그라프 이미지 설정하기 [선택사항]



   경로: 카페24 관리자화면 > 상점관리 > 운영관리 > 검색엔진 최적화(SEO) > 고급설정 으로 이동해주세요.

 


   [입력소스 예제]

   <meta property="og:image" content="http로 시작하는 이미지경로">

   



   1) 위 소스를 "Head 태그 소스란"에 입력해주세요.

       *중요* Head 태그 소스란에 기존 입력된 다른 태그가 있다면 지우지 마시고, 엔터 처리 후 밑줄에 붙여넣기 하세요.

       *중요* 모바일도 필요한 경우 [모바일 쇼핑몰] 탭에서도 추가로 입력해주세요.



    




    2) "이미지 경로부분을" 실제로 보여질 자신의 이미지 경로로 수정후 [저장]해주세요.


        ※수정 전※
        <meta property="og:image" content="이미지 경로">


        ※수정 후 예※
        <meta property="og:image" content="http://dfloor.co.kr/web/upload/logo.jpg">


 

    [팁!] 이미지 등록 및 경로알아내기 예제

    1) 이미지를 만든후 test.jpg (예시) 라는 파일명으로 저장해주세요.

       *주의* 이미지 파일명에는 한글, 띄어쓰기, 대문자 등을 사용하지 마세요.

    2) 이미지사이즈는 1200x630픽셀로 제작해주세요.*중요* 이미지 사이즈가 이보다 작을경우 *인스타그램,페이스북 등에서 이미지가 반영되지 않습니다.

    3) 관리자화면 상단의 FTP > 웹 FTP 접속클릭 > 웹 FTP 로 접속 해주세요.

    4) FTP에 접속 후 web > upload 폴더로 이동 후 준비된 test.jpg 파일을 해당 폴더에 업로드합니다.

    5) 그렇게 되면 이미지 경로는 http://도메인/web/upload/test.jpg 가 됩니다.

    6) 위 이미지 경로를 실제 인터넷에 입력했을때 정상적으로 이미지가 표시되는지 확인해주세요.

    7) 위 파일명(test.jpg) 또는 경로 (web/upload) 는 예제로, 실제 적용시 적절한 파일명과 경로에 업로드하여 사용해주셔도 됩니다.








5.완료후 확인하기


    - 정상적 설정이 되었는지 확인하기위해 카카오톡 대화방에서 도메인주소를 입력해보세요.

    - 이전에 대화방에서 도메인을 입력한 적이 있다면, 곧바로 적용되지 않을 수 있습니다.

    - 이미지(사이즈 및 디자인변경) 변경시 다시 업로드하여야 하며, 실제 파일명, 소스상의 파일명을 다른이름으로 변경 후 테스트 해야 반영되어 보입니다.

    - 새로운 대화방(및 다른사람) 에 도메인 주소를 올려보시거나, 시간을 두고 확인해보시면 정상 적용된 것 을 확인하실 수 있습니다.

    ※해당 오픈그라프는 디자인과 관계없이, 오픈그라프의 규약을 따라 작동되는 부분이므로, 오픈그라프의 작동 여부 등에 대하여 저희 디자인플로어에서

    는 확인 및 답변이 불가합니다. )이에대해 문의를 작성해주셔도 정상적인 답변이 불가합니다.) 따라서, 정상작동이 안되거나 추가 문의사항이 있는 경우에는

    입력하신 오픈그라프 태그를 첨부하여 반드시 해당 SNS서비스사로 문의바랍니다.





첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

보이는 것만 전부가 아닙니다.

보이지 않는 것이 보이는 것보다 더 깊고 넓은 것입니다.

  • 프로폐셔널리즘

    유명 쇼핑몰이 디자인플로어를 사용하는 이유 쇼핑몰 운영에 있어 가장 중요한 것은 디자인입니다. 고객님의 디자인이 실제 어떻게 사용된 사례가 있었나요? 디자인플로어의 많은 고객사는 그것을 증명하고, 함께 더 발전시켜나가고 있습니다.

  • 사용자 경험

    실용있는 기능만이 진정한 기능입니다. 쇼핑몰에서 사용되는 무수한 기능, 사용자가 자연스레 사용할 수 있을 때 비로소 완성되는 것 입니다. 디자인플로어는 고객의 니즈를 파악하고, 실효성 있는 인터페이스를 완성합니다.

  • 다른 생각

    가자! 어디에도 없던 방식으로 디자인플로어는 최적화된 UI를 바탕으로, 다양한 기능을 최초로 구현해왔습니다. 모방하는 것은 가능하지만 기술에 대한 이해가 없다는것은 경쟁력이 없음을 의미합니다.