08. og는 이야기
클릭하라 하지 말고, 클릭하게끔 하라
지난 SEO7-첫만남 포스팅에서 웹페이지 내 Meta를 통해 포털(네이버,구글) 검색결과 중 제목(Title)과, 설명(Description)을 우리가 원하는 문구로 변경하는 방법을 알아 보았습니다.
이번에는 Meta 중 알아 두시면 바로 써 먹을 수 있는 og 이야기 즉, 오픈그래프(open graph)에 대해 설명 드리려 합니다. 오픈그래프는 페이스북에서 만든 프로토콜(약속) 인데요. 혹시 여러분께서 포털에서 뉴스를 보다가 공유하고 싶은 정보가 있어 링크를 페이스북에 copy & paste 한다거나, 온라인쇼핑을 하다가 괜찮은 상품이 있어 친구에게 카톡으로 보낼 때, 아래 첨부된 화면처럼 URL을 보냈을 뿐인데 미리보기 화면을 보신 적이 있으신가요?
open graph이와 같이 미리보기 화면을 구성할 수 있게 해 주는 Meta를 오픈그래프라고 합니다. 오픈그래프의 원리는? 내가 원하는 정보의 URL을 복사한 후 카톡창에 붙여넣는 순간 카톡에서 일하는 크롤러가 잽싸게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 카톡창에 미리보기 형식으로 구성해 주는 방식 입니다
카톡창에 URL을 붙여넣고 미리보기가 조금 늦게 보여지는 이유가?..크롤러가 정보를 수집해서 디자인에 맞게 보여주는 데 시간이 필요하기 때문입니다.(크롤러가 무엇인지 확인하시려면 시리즈02.내홈페이지를 누가 가져간다고?? 를 참고해 주세요) 5G시대에는 거의 실시간으로 보이겠죠?^^, 그런데 어떤 URL의 경우는 미리보기가 안보이는 경우도 있는데, 그 이유는 해당 웹페이지에 오픈그래프 Meta가 없기 때문입니다
오픈그래프의 미리보기가 중요한 이유는? 정보를 공유할 때 URL로만 구성된 TEXT보다 잘 정돈된 이미지/제목/내용으로 구성된 미리보기가 클릭률이 높기 때문입니다. 만약, 여러분이 홈페이지 운영자이고, 카톡이나 페이스북 공유이벤트를 준비하신다면 필수적으로 오픈그래프를 작성 하셔야 합니다. 그래야 방문자가 +1 이라도 더 유입될 수 있습니다.
마지막으로 오픈그래프를 적용하는 방법을 아래 이미지를 보면서 설명드릴께요
미리보기 화면에 이미지를 보여주시려면 A박스, 제목을 입력 하시려면 B박스, 설명을 넣으시려면 C박스에 있는 오픈그래프 소스를 나의 웹페이지 소스코드에 복붙 하셔서 나의 웹페이지에 맞게 수정하시면 됩니다.
open garahp meta수정 후 나의 오픈그래프가 잘 작성 되었는지? 아래 URL에서 확인[디버그]도 가능 합니다.
디버그확인 URL https://developers.facebook.com/tools/debug/sharing/
만약, 개발지식이 있으시거나 개발자가 주위에 계시다면? 아래 페이스북 개발자 사이트를 방문하셔서 다양한 형태의 오픈그래프를 활용해 보셔도 좋습니다. 페이스북 개발자 사이트 오픈그래프 URL http://ogp.me/?
도움이 되셨으면 좋겠습니다
감사합니다
PS) 크롤러가 정말 많은 일을 하죠?^^
미니시리즈 10부작 SEO
01.돈 버는 SEO
02. 내 홈페이지를 누가 가져간다고?
03. SEO로 신규고객 30배 증가
04. SEO의 시작은 디자인!
05.사랑에 빠진 크롤러
06.삼각관계
07.첫만남
08.og는 이야기
09.내 웹페이지 포털 실시간반영
10.내 말이 아닌 남의 말
[번외편]SEO의 역습
