반응형
웹페에지와 관련된 정보를 나타내 주는 메타데이터는 특정 클라이언트나 서비스 종속적인 코드가 존재합니다. 이 중 가장 표준적인 형태의 메타데이터는 title, description, favicon과 같은 기본적인 요소들 외에 og라고 불리우는 open graph를 들 수 있습니다.
페이스북 프리뷰 이미지/정보에 사용되는 메타데이터는 open graph 정보를 토대로 작성이 됩니다. 페이스북은 자체 캐싱 서버를 가지고 있어서 프리뷰 정보를 캐싱처리합니다. 그래서 이전에 이미 공유한 적이 있는 경우 캐싱 데이터를 토대로 프리뷰를 표시합니다. 이같은 페이스북에서 긁어가는 메타데이터 정보를 강제로 갱신하는 방법은 다음 페이스북 쉐어링 디버거를 사용하는 것입니다.
페이스북 쉐어링 디버거
해당 디버거를 통해서 URL을 입력하고, 리스캐닝의 작업을 통해서 메타데이터를 갱신할 수 있습니다. 여기서는 디버깅 기능을 함께 제공하는데, 특정 태그가 누락되었거나 하는 등의 요소를 점검할 수 있습니다. OG 표준에 맞춰서 태그를 입력하는 과정이 필요합니다. 이 과정에서 주의를 해야 하는 요소들은 다음과 같습니다.
- 페이스북 쉐어링 디버거: https://developers.facebook.com/tools/debug/sharing
HTTP or HTTPS
소스코드 상에 기재된 통신 프로토콜을 명확히 하여야 합니다. 예를 들어 HTTPS 통신을 통해서 서비스가 되고 있는데 프리뷰 이미지 주소 등이 HTTP로 되어 있는 경우라면 정보를 제대로 불러 오지 못합니다.
참고자료
- https://www.braveriver.com/blog/how-to-clear-facebook-open-graph-and-twitter-cards-cache-on-demand/
- https://stackoverflow.com/questions/50520989/facebook-error-when-pulling-ogimage
- https://ogp.me/
- https://stackoverflow.com/questions/49718112/open-graph-list-of-global-types
- https://honeypotmarketing.com/facebook-thumbnail-fix/
반응형
'UX 개발 > SEO' 카테고리의 다른 글
[SEO] 웹페이지 프리뷰이미지(썸네일) 디자인가이드 (0) | 2019.12.05 |
---|---|
XML사이트맵의 용도와 만드는 법 파악하기 (0) | 2019.09.27 |