페이스북, 카카오, 네이버, 트위터 공유하기 플러그인 및 OG (open graph) 캐시 삭제 및 재설정방법

네이버 공유하기 플러그인 및 OG (open graph) 변경 방법

네이버 공유하기는 사이트 컨텐츠를 네이버 서비스에 쉽게 공유할 수 있게 해주는 플러그인입니다.
간단한 스크립트를 복사해 붙이는 것만으로도 쉽게 개발할 수 있습니다.

공유하려는 URL이 로컬 경로일 경우는 네이버 서버에서 해당 URL을 파싱할 수 없어 공유하기가 안되니 주의 바랍니다.

즉 https://~ 처럼 웹서버에 도메인 주소가 운영된 사이트만 가능하다는 것을 의미합니다.

사용법은 간단합니다. 제목이나 url 에 한글이나 특수문자가 포함될 수 있으므로 자바스크립트로 인코딩하는 구문이 포함되어 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
<head>
  <title>네이버 공유하기</title>
  <script>
    function share() {
      var url = encodeURI(encodeURIComponent(myform.url.value));
      var title = encodeURI(myform.title.value);
      var shareURL = "https://share.naver.com/web/shareView.nhn?url=" + url + "&title=" + title;
      document.location = shareURL;
    }
  </script>
</head>
<body>
  <form id="myform">
    URL입력:  <input type="text" id="url" value="https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&oquery=%EB%84%A4%EC%9D%B4%EB%B2%84+%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%84%BC%ED%84%B0&ie=utf8&query=%EB%84%A4%EC%9D%B4%EB%B2%84+%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%84%BC%ED%84%B0"><br/>
    Title입력:  <input type="text" id="title" value="네이버개발자센터 검색결과"><br/>
  </form>
  <input type="button" value="네이버공유하기" onclick="share()"/>
</body>
</html>

그리고 아래와 같은 형태의 og 설정이 가능합니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

og:image 란 간단하게 이야기 하면... 아래 이미지 처럼 썸네일 깍두기 이미지를 의미하며, title 은 제목, description 은 설명을 의미합니다.

그리고 og 파일을 변경하거나 수정이 필요할 경우, 아래 네이버 디버거 웹사이트를 통해서 og 변경한 도메인 주소를 입력하게 되면, 기존의 og 를 제거하고 새롭게 읽어서 반영해 줍니다. 즉, 갑자기 변경해야 할 일이 생기면 다시 네이버에 요청해야 한다는 것을 의미합니다.

developers.band.us/developers/ko/docs/share/debugger

BAND Snippet Debugger

developers.band.us

네이버 api 담당자

별도로 카카오, 페이스북도 OG 변경사이트 주소가 존재합니다.

(1) 페이스북 OG 변경사이트

공유 디버거를 사용하면 웹사이트 콘텐츠를 Facebook, Messenger 및 기타 위치에서 공유할 때 사용되는 정보를 볼 수 있습니다. 일괄 무효화 도구를 통해 여러 URL에서 이러한 정보를 동시에 새로 고칠 수 있으며, 오픈 그래프 마크업은 웹사이트 콘텐츠가 다른 사람에게 표시되는 방식을 관리할 수 있습니다. 더 알아보기

액세스 토큰 디버거를 사용하면 Facebook을 사용하여 앱에 로그인한 사람의 특정 액세스 토큰과 관련된 정보를 볼 수 있습니다.

developers.facebook.com/tools/debug/?locale=ko_KR

공유 디버거 - Facebook for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.

developers.facebook.com

(2) 카카오 OG 변경사이트

카카오톡 채팅창 또는 카카오스토리에 공유된 소셜 정보를 OG(Open Graph) 프로토콜을 통해 파싱하고 캐시합니다.
이 도구로 파싱된 소셜 정보를 미리보고 캐시를 초기화할 수 있습니다.

https://developers.kakao.com/tool/debugger/sharing

카카오계정

accounts.kakao.com

참고사이트

developers.naver.com/docs/share/navershare/

네이버 공유하기 개발가이드

NAVER Developers - 네이버 공유하기 개발가이드

developers.naver.com

저작자표시 비영리 동일조건

'생활정보 🍜' 카테고리의 다른 글

서초구청 대형폐기물 배출안내, 간편 모바일 및 온라인 신청 (2)	2024.02.23
2023 7월부터 LCC 진에어 항공기 인천국제공항 제2여객터미널(T2)에서 탑승 (4)	2023.11.16
DeepL 번역기로 PDF 파일 변환하기 (2)	2023.08.31
Mock Magic : 몇 초 만에 장치 모형을 만들기 (무료) (0)	2023.08.25
배달의 민족 앱에서 메일로 영수증 얻기 (2)	2023.08.17

재우니의 블로그