검색엔진의 로봇의 경우 사이트에 메타데이터가 설정되어 있지 않으면 웹사이트의 내용을 크롤링하여 보여준다. 대체적으로 이상하게 노출된다고 생각하면 된다.
위와 마찬가지로 웹사이트의 내용을 그대로 긁어 보여주기 때문에 사이트의 정체성을 나타내기가 힘들다, 그럼 로봇이 수집할 수 있게 뭐를 설정해야 한단 말인가?
html의 기본 메타태그인 title, description은 기본적으로 잡아주는게 좋다. 많은 로봇들이 해당 데이터를 기본정보로 크롤링한다. (네이버-콘텐츠 마크업)
그렇다면 SNS 공유, 메신저 공유(라인, 페이스북, 카카오톡)의 경우는 어떤식으로 노출되는 걸까? 이에 대한 방법중 대중적인 방법이 페이스북의 OpenGraph 프로토콜이다. (Open Graph)
OpenGraph란?
HTML 문서의 풍부한 메타데이터를 다양한 사람들이 통일해서 작성할 수 있도록 정의 해놓은 프로토콜이다. 페이스북이 웹페이지의 다양한 내용들을 풍부하게 소셜내에서 사용하고 표현하려고 기존의 기술을 참고하여 단순성을 고려하여 만들게 되었다.
와 그럼 모든 사이트, 페이지가 전부 OpenGraph로 메타데이터를 작성하겠구나!... 아니다 페이스북외에도 자체적인 프로토콜을 가진 곳도 있다 예를들어 Twitter이다.(Twitter - Cards)
트위터에서의 공유는 우선적으로 자체 메타데이터를 참고하고 없으면, OpenGraph를 참고한다, 또한 구글에는 OpenGraph가 작성되어 있지 않다! 놀랍게도 다른 Meta태그 또한 존재하지 않는다. title만 존재할 뿐이다.
이렇듯 자체 프로토콜도 있고, 추가를 아예 안하는 사이트, 페이지들도 있지만 OpenGraph는 세계적으로 유명한 '통일된 메타데이터'를 위한 프로토콜이니 많은 노출 및 정확한 정보를 위해서라면 추가해주자!
사용방법
사용방법은 기본적인것만 설명하고 나머지는 해당 사이트를 참고하길 바란다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
기본 메타데이터로는 4개를 지원한다.
- og:title - 그래프에서 표현되는 객체의 제목(페이지, 사이트의 제목이 될 수 있다)
- og:type - 객체의 종류 (예를들어 video.movie, shop.toy 등 - 참고)
- og:image - 객체의 이미지 URL (http, https를 포함하는 풀 URL로 작성해야함)
- og:url - 객체의 표준 URL (http, https를 포함하는 풀 URL)
위의 기본 메타데이터는 다음과 같이 작성할 수 있다.
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
테스트
필자는 크롬 확장 프로그램인 Meta Debugger와 Open Graph Preview 그리고 페이스북 공유 디버거로 테스트를 진행한다.
Meta Debugger는 작성한 메타데이터가 무엇인지, 어떠한 stylesheet가 적용되는지 개발자도구에서 자세하게 확인할 수 있다.
Open Graph Preview는 OpenGraph로 작성된 메타데이터가 각종 벤더사이트에서 어떻게 표현되는지 미리볼수있는 도구다.
페이스북의 공유 디버거는 페이스북에서의 공유 형태, 누락된 데이터( 페이스북에 맞춘), 각종 메타데이터 정보를 자세히 확인 할 수 있다.
적용 후
위와 같이 작성하고 사이트, 페이지에 반영하고 검색엔진이나, SNS에 노출시켜보면 반영이 바로 될까? 아니다
이는 캐싱과 관련이 있다. 크롤러가 미리 사이트들에 방문하여 정보를 수집해서 캐싱해두는데 각 로봇, 검색엔진마다 갱신주기도, 유효기간도 다르다.
체크해본 결과 포털검색은 몇일 내지는 몇 주단위로 넘어가게 됐는데, SNS나 메신저 공유의 경우는 몇시간 내로 반영되기도 했다.
크롤러의 접근 확인 방법은 운용하는곳 마다 다르므로 확인 할 필요가 있는데, 네이버의 경우 (searchadvisor.naver.com/guide/seo-basic-firewall)에서 가이드 하고 있다. 참고바란다.
'IT Tip' 카테고리의 다른 글
| 컴퓨터 화면 녹화 하는 방법 - 윈도우 10 기본기능 (0) | 2021.02.17 |
|---|---|
| 윈도우10 배경화면 이어지게 설정 (0) | 2021.02.03 |
| 윈도우10 스카이프(Skype) 삭제하기 (2) | 2020.09.25 |
| Netgear 공유기 DHCP 임대시간 변경하기(R7800) (1) | 2020.01.05 |
| Netgear 공유기 Telnet 활성화 하기(R7800) (2) | 2020.01.05 |