「SNS(카카오톡,페이스북,트위터등) 오픈그래프(미리보기)설정하기」
안녕하세요.
오늘은 SNS(카카오/페이스북/트위터등) 링크 공유시 미리보기(=오픈 그래프) 설정 및 초기화 방법에 대해서 포스팅을 해보겠습니다.
오픈 그래프 포스팅 순서
1. 오픈 그래프란?
2. 오픈 그래프 기본 태그
3. 오픈 그래프 메타 형식
4. 오픈 그래프 설정 방법
5. 오픈 그래프 SNS 초기화 방법
6. 디비카트 랜딩 오픈 그래프 설정 방법
오픈 그래프(Open Graph)란?
SNS(카카오/페이스북/트위터등) 링크를 공유시 미리보기 화면을 구성하는 Meta를 오픈 그래프라고 합니다.
오픈 그래프(Open Graph) 기본 태그
1. og:title(링크 제목)
2. og:description(설명)
3. og:image(썸네일 이미지)
4, og:url(링크 URL)
오픈 그래프(Open Graph) 메타(Meta) 형식
1. 링크 제목 : <meta property="og:title" content="링크 제목 입력">
2. 링크 설명 : <meta property="og:description" content="링크 설명 입력">
3. 링크 썸네일 이미지 : <meta property="og:image" content="링크 이미지 주소 입력">
4. 링크 URL : <meta property="og:url" content="링크 주소 입력">
오픈 그래프(Open Graph) 설정 방법
오픈 그래프(Open Graph) 플랫폼(카카오/페이스북/트위터) 설정 초기화 방법
＊초기화 이유 : SNS상에 URL공유시 오픈그래프 태그를 읽어드려 표시하고 정보를 캐시에 저장합니다.
오픈 그래프 변경 후 SNS상에 URL공유시 이전에 저장한 오픈그래프를 보여주게 됩니다. 즉 변경한 오픈 그래프를 적용하기 위해 초기화를 진행하게 됩니다.
1. 페이스북 공유 캐시 삭제하기
첫째. https://developers.facebook.com/tools/debug/
공유 디버거 - Meta for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
둘째. 페이스북 로그인
셋째. 페이스북 공유 캐시 삭제하기
① 캐시 삭제할 URL 입력합니다.
② 디버그를 선택합니다.
넷째. 페이스북 공유 캐시 삭제하기 결과
※ 오픈 그래프 내용을 변경 후 다시 스크랩을 클릭하시면 변경한 오픈 그래프가 반영이 됩니다.
2. 카카오 공유 캐시 삭제하기
첫째. https://developers.kakao.com/tool/clear/og
카카오계정
accounts.kakao.com
둘째. 카카오 로그인
셋째. 카카오 공유 캐시 삭제하기
① 캐시 삭제할 URL 입력합니다.
② 캐시 초기화 선택합니다.
③ 삭제된 결과를 확인합니다.
3. 트위터 공유 캐시 삭제하기
첫째. https://cards-dev.twitter.com/validator
트위터 로그인 / 트위터
휴대폰, 이메일, 사용자 아이디
twitter.com
둘째. 트위터 로그인
셋째. 트위터 공유 캐시 삭제하기
① 캐시 삭제할 URL 입력합니다.
② Preview card 선택합니다.
③ Card Preview에 새롭게 갱신된 오픈 그래프를 확인이 가능합니다.
디비카트 오픈 그래프(Open Graph) 설정방법
쉽고 빠른 디비수집 - 디비카트
간편한 랜딩생성으로 쉬운 디비 수집,수집된 디비를 안전하고 빠르게 관리,디비수집,랜딩사이트,랜딩구성,최적화된 디비수집,간단한 입력박스
dbcart.net
※ 설정 위치 : 1. [랜딩관리] > 2. [랜딩기본정보]
① 미리보기 제목(og:title) : SNS공유시 표시되는 제목 입니다.
② 미리보기 설명(og:description) : SNS공유시 포시되는 설명 입니다.
③ 미리보기 이미지(og:image) : SNS공유시 포시되는 이미지 입니다.
④ 저장하기 : 미리보기 설정이 완료되면 저장하기를 선택해주세요.
지금까지 오픈그래프(미리보기)설정 및 초기화 방법에 대해서 포스팅하였습니다.
많은 도움이 되셨으면 합니다.
감사합니다.
쉽고 빠른 디비수집 - 디비카트
간편한 랜딩생성으로 쉬운 디비 수집,수집된 디비를 안전하고 빠르게 관리,디비수집,랜딩사이트,랜딩구성,최적화된 디비수집,간단한 입력박스
dbcart.net
카페24 문자(SMS) 디비카트 연동 설정하기
「카페24 문자(SMS) 디비카트 연동 설정하기」 안녕하세요. 카페24 문자(SMS)를 이용하여 디비카트 디비 접수시 원하는 발신번호로 신청자에게 문자(SMS)를 보내는 방법에 대해서 포스팅을 하겠습니
pbvk.tistory.com
페이스북 전환 API(Conversion API) 설정하기
「페이스북 전환 API(Conversion API) 설정하기」 안녕하세요. 디비카트입니다. 페이스북 효율적인 광고를 위해 필요한 전환 API 설정방법에 대해서 포스팅을 해보겠습니다. 페이스북 픽셀과 전환 API
pbvk.tistory.com
페이스북 광고 도메인 인증 설정하기 (메타 태그 인증 방식)
「페이스북 광고 도메인 인증 설정하기 (메타 태그 인증 방식)」 안녕하세요. 페이스북 광고를 진행하기 위해서는 홍보할 랜딩페이지 도메인 인증은 필수가 되었습니다. 그래서 페이스북 도메
pbvk.tistory.com
'서비스 > 디비카트' 카테고리의 다른 글
| 페이스북 전환 API(Conversion API) 설정하기[2023.10. 31일 업데이트] (0) | 2023.11.01 |
|---|---|
| 디비카트 폼 대처하기(네이버 폼 서비스 종료 결정) (0) | 2023.07.07 |
| 카페24 문자(SMS) 디비카트 연동 설정하기 (2) | 2022.10.11 |
| 페이스북 전환 API(Conversion API) 설정하기 (0) | 2022.09.19 |
| 호스팅kr(hostingkr) CNAME 레코드 설정하기 (0) | 2021.10.29 |
