워드프레스 사이트 카카오톡 오픈그래프 설정방법

오픈그래프(open graph)는 HTML 문서의 메타정보를 쉽게 표시하기 위해 메타정보에 해당하는 제목, 설명, 문서의 타입 , URL 등의 다양한 요소들에 대해서 통일하여 쓸 수 있도록 정의해놓은 프로토콜입니다. 

 

오픈그래프는 SNS마다 보여지는 디자인이 조금씩 다를 것 같은데, 카카오톡을 기준으로 워드프레스에서 설정하는 방법에 대해 작성하도록 하려 합니다!

 

카카오톡 오픈 그라프는 '이미지, 사이트 타이틀, 사이트 디스크립션, 사이트 URL'로 구성되어 있습니다. 

 

워드프레스 사이트에 카카오톡 오픈그래프 설정 방법

◎ 워드프레스 Head에 메타태그 적어주기

01. 테마 디자인 > 테마 편집기 >  haeder.php 열기

02. head안에 오픈그래프 메타태그 적기

<meta property="og:url" content="링크url" />
<meta property="og:type" content="website" />
<meta property="og:image" content="이미지 url" />
<meta property="og:title" content="타이틀" />
<meta property="og:description" content="설명" />

위에 메타태그를 복사에 head 안에 적어주시면 됩니다. content의 내용은 알맞게 수정해야 합니다!

 

◎ header플러그인 사용하기

워드프레스 php코드를 건드리기 부담스럽거나, 나중에 수정할 때 어디에 썼더라? 하는 경우를 대비해 header를 추가할 수 있는 플러그인을 사용하면 더 편리합니다. 적당한 플러그인을 받아서 위에 메타 태그를 적어주면 됩니다.

 

각 페이지에 오픈그래프 설정하기

웹사이트 전체의 오픈그래프 말고, 특정 페이지만 카톡으로 전달하는 경우 페이지의 오픈 그라프를 따로 설정해줘야 원하대로 나오게 됩니다!

 

◎머핀 빌더 사용하는 워드프레스의 경우

머핀 빌더의 경우 각 페이지 안에서 seo를 설정할 수 있습니다. ( 머핀 외에 다른 빌더들도 SEO가 페이지별로 설정이 가능한 빌더도 있을 듯합니다.) 여기서 오픈그래프에 나오는 이미지와 타이틀, 디스크립션을 설정할 수 있습니다.

 

◎SEO 또는 오픈 그라프 플러그인 사용하기

 

the seo framework는 무료 플러그인이고 설치하면 각 페이지별로 seo를 세팅할 수 있습니다. 여기서 오픈 그라프에 나오는 메타 데이터를 설정할 수 있습니다. 

 

카카오톡 오픈그라프 캐시 삭제 

오픈 그라프를 설정하고 테스트하면서 카톡에 보냈는데, 수정할 일이 있습니다. 이때 캐시를 지워주지 않으면 그전 데이터로 그대로 나옵니다. 이럴 때 캐시를 지우는 방법은 사이트를 접속해 해당 사이트의 주소를 적고 캐시를 삭제해주는 것입니다. 

https://developers.kakao.com/tool/clear/og

카카오계정 로그인

요 사이트에 접속 후 로그인 후!

해당 사이트의 캐시를 초기화합니다.