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

운영매뉴얼

운영매뉴얼

게시판 상세
제목 [오픈그래프] 설정방법
작성자 디자인플로어 (ip:)
  • 평점 0점  
  • 작성일 2019-04-23
  • 추천 추천하기
  • 조회수 9712



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) 관리자화면 상단의 FTP > 웹 FTP 접속클릭 > 웹 FTP 로 접속 해주세요.

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

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

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

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








5.완료후 확인하기


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

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

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

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





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

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

회원에게만 댓글 작성 권한이 있습니다.

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

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

  • 프로폐셔널리즘

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

  • 사용자 경험

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

  • 다른 생각

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