header ads

blogspot blog html code에 og:title는 무슨 뜻?

blogspot blog 유료 또는 무료 테마 html code를 살펴보면 property='og:title'로 선언된 code를 볼 수 있다. 이 code는 무슨 역할을 하는지 알아보았다.


<meta content=' ' property='og:title'/> 코드의 의미는 

오픈 그래프 프로토콜 (Open Graph Protocol) 이라고 한다. 제작사는 Facebook으로 인터넷 웹사이트의 HTML 문서에서 head 내에 있는 meata 태그 중 "og:xxx"가 있는 태그를 찾아서 보여주는 프로토콜이다

오픈 그래프 프로토콜의 사용 용도는

웹사이트가 오픈 그래프 프로토콜을 지원한다면 이 오픈 그래프 프로토콜을 사용하여 웹사이트에 방문하기 전에 무엇을 하는 웹사이트 인지 미리 내용을 알려주는데 사용될 수 있다. 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리 보기 형태로 제공하는 기능을 구현한 것으로  타사 소셜 미디어에 자신의 웹페이지 게시물을 공유하며 공유한 게시물의 내용을 미리 보기 형태로 제공하여 타사 소셜 미디어 구독자가 쉽게 링크된 게시물의 일부 내용을 확인할 수 있도록 하는데 사용된다. 

나의 웹사이트를 타사 소셜 미디어에 공유할 때 유용하게 사용할 수 있다. 


오픈 그래프 프로토콜의 사용 시 장점

1. 주요 소셜 미디어는 대부분 오픈 그래프 프로토콜을 인식합니다.  

2. 웹사이트의 트래픽에 변화를 줄 수 있습니다.

3. 오픈 그래프 태그를 최적화하면 외부 사용자가 콘텐츠를 공유할 때마다 잘 정리된 이미지, 제목, 설명을 팔로우와 공유하게 됩니다.


오픈 그래프 프로토콜의 기본 메타데이터 4 가지 

og:title - 개체의 제목
og:type - 개체의 종류
og:image - 개체를 나타내는 이미지
og:url - 개체의 정식 URL (현재 페이지의 URL) 

*트위터는 이에 더해 자체적인 메타데이터 표기법을 가지고 있습니다. 


나의 웹사이트를 예로 들면 다음과 같이 사용되고 있다.

<meta content='블로그 테마 Html 태그 들여다 보기 ver2 - enjoydo4it - enjoydo4it blog' property='og:title'/>
<meta content='블로그 테마 Html 태그 들여다 보기 ver2 - enjoydo4it - enjoydo4it blog' property='og:image:alt'/>


글을 정리하며

나는 소셜 미디어를 거의 하지 않는다. 단지 블로그만 개설하여 관심사 등을 포스트 하고 있다. 내가 오픈 그래프 태그를 사용한다면 나의 웹사이트의 방문자 증가를 유도하기 위하여 오픈 그래프 태그를 사용해야 한다. 중요한 문제임에는 틀림없지만 지금 현재로서는 특별한 생각이 나지 않는다. 단지 오픈 그래프 프로토콜의 용도를 알게 되어 그나마 다행이다.   

참조 : 나무위키, 오픈그래프프로토콜