카카오톡으로 사이트 링크를 공유하면 아래 사진처럼 썸네일과 제목, 설명이 미리보기 처럼 나온다. 이를 원하는 이미지와 텍스트로 간단하게 수정할 수 있다.
일단 이것의 원리는 open graph라는 메타태그에 담긴 정보를 소셜네트워크 서비스에서 수집하여 이를 활용해 아래와 같이 미리보기처럼 보여주는 것이다. 카카오톡 외에 페이스북이나 트위터등 다양한 소셜네트워크에서 이용할 수 있고 메타태그 형시기나 이름은 조금씩 다를 수 있다.
한국에서 가장 많이 사용하는 카카오와 네이버에서 사용하는 open graph는 같은 형식이라 한번만 설정해 두면 여러곳에 적용된다.
open graph 설정 전
네이버 블로그에 작성한 글에 걸어둔 이 블로그의 링크는 이렇게 표현되었다. 딱히 아무 설정도 해두지 않아서 그냥 가장 최신 글의 썸네일이랑 정보가 그대로 사용되었다.
open graph 설정 후
이번에는 open graph설정 후 네이버 블로그에 같은 링크를 걸어둔 것인데 썸네일의 크기를 카카오톡에 맞추었더니 조금 짤리긴 하지만 이전 처럼 블로그와 별로 상관없는 정보가 나오거나 하진않고 훨씬 깔끔해 보인다.
카카오톡에서 공유한 모습이다.
설정하는 방법
워드프레스 사이트에 이를 설정하는 방법은 굉장히 간단하다.
일단 메타태그를 삽입하여야 하니 서버에 직접 접속하여 테마의 html파일을 수정하거나 아래의 “insert headers and footers by wpbeginner” 처럼 html 코드를 추가할 수 있는 플러그인을 이용한다.
위 플러그인은 쓸데가 많다. 저번에 네이버에서 워드프레스 블로그를 노출시키지 않기 위한 설정을 할때에도 사용했다.
많은 사람들에게 평가가 좋은 유명한 플러그인이 굳이 어렵게 서버에서 파일을 수정하기보다는 이 플러그인을 활용하는 것을 추천한다.
플러그인을 다운받고 활성화 시키면 관리자페이지의 설정탭에서 플러그인을 사용할 수 있다.
그리고 메타태그는 html의 헤더부분에 삽입하면 된다.
6번째 라인부터 11번째 라인이 open graph를 설정한 코드이다.
아래의 코드에서 “…..”부분을 원하는 대로 설정하면 된다. image를 설정하는 부분에 url은 미디어 탭에서 원하는 이미지를 클릭하면 오른쪽에 File URL이 있고 아래 복사 버튼이 있으니 이를 이용해 이미지를 설정하면 된다.
<meta name="description" content=".....">
<meta property="og:type" content="website">
<meta property="og:title" content=".....">
<meta property="og:description" content=".....">
<meta property="og:image" content=".....">
<meta property="og:url" content=".....">image를 설정하는 부분에 url은 미디어 탭에서 원하는 이미지를 클릭하면 오른쪽에 File URL이 있고 아래 복사 버튼이 있으니 이를 이용해 이미지를 설정하면 된다.
설정은 바로 적용이 되지만 캐시가 저장되어있어서 캐시를 그대로 불러오는등의 이유로 카카오톡이나 네이버에서는 바로 적용이 안될 수 있다. 어제 이 설정을 하고 바로 다음날 글을 쓰는 중인데 적용이 된걸 보니 그래도 몇시간에서 하루정도면 바뀌는게 아닐까 싶다.