워드프레스에서 효과적인 SNS 공유를 위한 오픈 그래프(Open Graph) 적용법 – Facebook Open Graph, Google+ and Twitter Card Tags 플러그인

Updated on 2017-09-15 by

1. 네이버에서 갑자기 오픈 그래프(Open Graph)를 들고 나오다.

오랬동안 네이버에서 검색이 막혀 있었기 때문에 네이버에 대한 관심이 많이 없지기는 했습니다. 몇년간 네이버에서 유입은 거의 없었죠.
네이버 웹마스터도구도 등록했지만 효과는 없었습니다. 네이버 봇이 크롤링은 해가는데 색에는 전혀 반영이 안되고 있었습니다.

그러다가 네니버 웹마스터도구 등록을 삭제하거나 손을 봐야 겠다고 마음먹고 네이버 웹마스터도구를 살펴보았는데 그 동안 많은 변화가 있었더군요. 그래서 제 사이트는 매우 불성실한 사이트가 되어 있었습니다.

_네이버 웹마스터 최적화 현황

여기를 보면 오픈 그래프(Open Graph)라는 항목이 나옵니다. 그 동안 없었는데 2016년말 네이버가 개편을 하면서 오픈 그래프(Open Graph)를 추가했나봅니다.

가능성은 적어 보이지만 네이버에서 요구하는 사항을 맞추어주기로 했습니다. 그러다보니 오픈 그래프(Open Graph)를 정리해야 겠네요.

2. 오픈 그래프(Open Graph)란?

그러면 도대체 오픈 그래프(Open Graph)란 무엇일까요?

오픈 그래프(Open Graph)는 블로그의 컨텐츠를 페이스북(Facebook) 공유시 타이틀, 이미지, 요약문등을 표현할 때 사용되는 정보를 표현하는 HTML 표현식이니다.
최근에는 페이스북(Facebook) 뿐만이 아니라 많은 SNS에서 활용하고 있지요. 결국 오픈 그래프(Open Graph)는 SNS 공유 시 적절한 정보를 제공하는 HTML 표현식 정보로 컨텐츠의 원활한 정보를 공유하기 위해서는 꼭 포함 시켜야하는 정보라고 정의할 수 있습니다.

일반적으로 페이스북 등에서는 오픈 그래프(Open Graph)를 그대로 적용하고 있고 트위터는 여기에 추가로 더 풍부한 정보를 제공하기위해 변형된 오픈 그래프(Open Graph)를 사용한다고 합니다.

픈 그래프(Open Graph)에 대한 자세한 정보는 The Open Graph protocol를 참고하시기 바랍니다.

▽ 오픈 그래프(Open Graph) 메카니즘 설명,
이미지는링크의 미리보기 제목, 설명, 이미지를 결정하는 open graph 태그 에서 빌려왔다.
여기에서 오픈 그래프(Open Graph)에 대해서 잘 설명해 놓았다.

오픈 그래프(Open Graph) 설명 이미지

3. 워드프레스에서 오픈 그래프(Open Graph) 사용하기 – 오픈그래프(Open Graph) 플러그인

이 오픈그래프(Open Graph)는 Metadata부분에서 등록할 수 있으나 관리의 용이성을 위해서 워드프레스 플로그인을 사용합니다.

플러그인 추가 페이지에서 Open Graph로 검색하면 376개 아이템이 나올 정도로 많은 플러그인들이 나옵니다. (2017년 6월 22일 기준) 그만큼 이 오픈 그래프(Open Graph)가 중요하고 화두가 되었다는 것을 의미하겠지요.

오픈 그래프(Open Graph) 플러그인들

저는 가장 사용자가 많은 Facebook Open Graph, Google+ and Twitter Card Tags를 선택하였습니다.

Facebook Open Graph, Google+ and Twitter Card Tags

3.1. General setting

여기서는 Facebook Open Graph, Google+ and Twitter Card Tags 플러그인의 전반적인 사항을 세팅합니다.

  • Description은 사이트에서 적용된 Description을 사용할 수도 있고 Custom text를 선택해 새로 만들 수 도 있습니다.

  • 공유 시 어떤 이미지를 보여줄지를 선택합니다. Featured Image를 사용할 수 도 있고, 홍보를 위한다면 특정 임지를 계속 보여 줄 수도 있습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅

3.2. 페이스북 세팅

페이스북관련 세팅 화면입니다.
저는기본 세팅 사용했고 페이스북 페이지만 등록해 주었습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅_페이스북 관련

3.3. 트위터 세팅

트위터 관련 세팅 화면입니다.
여기도 기본 세팅을 그대로 유지했습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅_트위터 관련

3.4. G+ 세팅

G+는 거의 사용하지는 않지만 아무튼 있습니다.
여기도 변경하지 않고 기본 세팅 그대로 두었습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅_G+ 관련

3.5. SEO tags 세팅

여기는 SEO관련 사항을 정의하는 곳입니다.
저는 Description을 앞에서 추가했기 때문에 이를 적용했습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅_SEO tag 관련

3.6. 3rd party 관련 세팅

여기서는 Yoast SEO, Woocommerce, SubHeading, Business Directory Plugin과 어떻게 연동할지를 세팅하는 곳인데요. 저는 해당사항이 하나도 없어서 그대로 두었습니다.

Facebook Open Graph, Google+ and Twitter Card Tags 플러그인 세팅_3rd party 관련

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
7 Comments
Oldest
Newest
Inline Feedbacks
View all comments