워드프레스에 페이스북 오픈그래프 적용방법

페이스북이나 트위터에 URL를 넣으면 해당 URL의 제목이나 이미지, 설명이 붙어 나오게 된다.
예전에 비해 블로그의 글이 RSS리더나 메타 블로그가 아니라 SNS를 통해서 유통되는 경우가 많아서 블로그도 OG태그나 트위터 카드를 적용하면 유툥될때 훨씬 더 있어 보이게 된다. 요즘은 뉴스 기사도 SNS에 보는 경우가 많아서 뉴스 사이트들은 이런 태그들을 다 적용하는것 같다.


유통 이외에 본문에 링크가 그냥 링크만 있는 것이 아니라, 해당 웹 페이지의 대표 사진이 있으면, 글을 좀 더 있어 보이게 해주는 효과도 있다. 그래서 나는 글을 쓸때, 링크를 넣었는데, 해당 링크에 대한 정보가 더 나오고 글을 좀 더 풍성하게 해준다.
이런 기능으로 본다면, 페이스북에서 오픈그래프 태그가 나오기 전에, 이미 오래 전부터 네이버 블로그에는 글감이라는 첨부 기능이 있었다.그냥 링크만 붙이면 되는 것은 아니고, 글감글 첨부라는 형식을 통해서, 네이버에서 제공하는 음악, 책 등을 삽입할 수 있었다.

네이버 블로그의 글감글은 기술적으로는 네이버에서만 되는 자체 스펙이지만, 기획적으로 사용 효과 측면에서 보면 페이스북의 OG 태그와 같다. 람짱은 참 대단하다.
내가 네이버 블로그를 기획/운영할때에 글에 있는 이런 음악과 책과 지도 태그를 이용해서 내서재와 내 블로그를 만들기도 했다.
어쨌든, 내 블로그의 글이 SNS, 심지어 카카톡이나 라인과 같이 채팅앱에 유통될때에도 OG태그가 잘 보이게 하는 것이 좋은데, 워드프레스에는 페이스북 Open Graph태그, 구글+, 트위터 카드태그 등을 자동으로 만들어주는 플러그인들이 있어서 적용하기 쉽다.

워드프레스 플러그인

나는 워드프레스 플러그인 중 ‘Facebook Open Graph, Google+ and Twitter Card Tags‘로 선택했다.
이 플러그인은 페이스북 오픈그래프 태그 뿐만 아니라 트위터카드 태그도 지원하고, 글이 아니라 홈인 경우에는 사이트의 설명과 보여질 이미지를 선택할 수 있다.
설치 하는 방법은 쉽다. 워드프레스 어드민으로 들어가서 플러그인 추가에서 검색해서 바로 설치 할 수 있다.
플러그인을 설치하면 자동으로 웹 페이지 마다 태그를 만들어준다.
페이스북과 트위터 개발자 사이트에 보니 태그가 잘 나오는 테스트 할 수 있는 페이지가 있다.
https://developers.facebook.com/tools/debug/
https://cards-dev.twitter.com/validator
페이스북은 OG 태그를 실시간으로 가져오는 것이 아니라 캐시를 하는 것 같은데, 확인하는 사이트에서 잘 나오지 않으면 [Scrape Again] 버튼을 눌러서 다시 가져오게 하면 된다.
그래도 안나온다면, 워드프레스에서 캐싱을 하는 플러그인을 사용하는지 확인하고, 사용한다면 비활성화시켰다가 다시 활성화 하면 된다. 내경우에는 comet cache wordpress plugin 를 사용하는데 이 플러그인을 껐다가 켜니깐 제대로 나왔다.

블로그 홈 태그 설정

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인은 블로그 홈에 나올 타이틀과 설명을 지정할 수있다.
플러그인 설정에서 아래에 설명을 지정할 수 있고,

대표 이미지를 설정할 수 있다.

이렇게 적용하고 페이스북이나 트위터등의 SNS나 메신저에서는 https://dobiho.com 은 아래와 같이 나오게 된다.

설치형 블로그를 사용하는 사람들이 많이 줄었지만, 그래도 워드프레스를 잘 사용하시는 분들을 위해 찾은 내용을 기록한다.