back

Google+ 에 멋지게 인용되기 #2

11년 전 작성

이 글은 시리즈 글의 일부입니다.

이전 글에서 Google+에 인용(Google+ snippet)될 때 보여질 페이지 정보를 구성하는 방법에 대해 정리한 바 있습니다. 글을 작성하고 실제 블로그를 운영하면서 Google+에 인용을 하는데 구글 측에서 설명하는 바와는 달리 내용과 이미지 모두 제대로 인용되지 않는 문제를 확인했습니다. 예를 들어, 아래처럼 본문에 이미지가 있음에도 제대로 인용이 되지 않거나 심지어는 글까지 인용되지 않는 문제도 있었습니다.

이미지

다른 일로 한참을 미뤄두다가 사외 교육을 받을 일이 생겨 시간적 여유가 허락되는 덕에 몇 가지 실험으로 진행한 내용을 정리해 두었습니다.

일반적으로 이미지가 없는 페이지는 인용되는 데 문제가 없다는 점을 고려하여 아래와 같은 요인들이 영향을 주리라 의심하고 실험을 진행했습니다.

  • 본문 내 글의 길이나 비율
  • 사진 해상도
  • 사진 파일 크기
  • 포스트 내 사진 개수

테스트 과정에서 이미 인용을 시도한 페이지의 경우 다시 요청이 없는 것으로 봐서는 구글에서 snippet 생성 페이지에 대해 일정 시간 캐시를 유지하는 듯 하여 매번 새로운 글을 작성해 테스트 해야 했습니다.

실제로는 변인 통제를 위해 각 경우마다 실험을 했지만 구구절절 나열하자니 귀찮아서(블로그에 글 적는게 생각보다 귀찮더군요) 유의미한 결과만 나열하겠습니다.

  • 예상했던 부분이지만, 사진과 함께 나오는 본문의 길이나 분량, 비율 등은 글이나 사진이 올바르게 인용되는 부분과 무관했습니다.
  • 본문에 인용된 사진 해상도를 전체적으로 줄인 결과 글과 사진 모두 올바르게 인용되었습니다.
  • 사진 해상도를 유지하는 대신 JPEG 파일의 품질을 줄이는 경우에도 글과 사진 올바르게 인용되었습니다.
  • 사진 해상도나 품질을 조절하지 않아도 본문에 인용되는 사진 개수를 줄인 결과 (종종) 올바르게 인용되었습니다.

이를 바탕으로 제가 추정한 바는 이렇습니다. 해당 페이지에 대한 정보를 보여주기 전에 데이터를 준비하는 과정에서 타임아웃을 걸어두는 것으로 보입니다. 처음 제 예상은 본문 텍스트를 가져오고 페이지 내 이미지를 링크를 따라 가져오다가 타임아웃이 걸리면 가져온 내용만으로 snippet을 구성할 것으로 알았으나 특이하게도 이미지를 포함한 페이지 전체 내용 다 가져와야 snippet을 구성하는 것으로 보입니다. 이는 실험 과정에서 발생하는 서버 로그에서도 확인할 수 있습니다.

이미지

위의 로그는 사진 한장만 작은 사이즈로 하고 나머지 몇 장은 큰 사이즈로 했을 경우의 로그입니다. 로그를 살펴보면 본문과 작은 크기 사진은 올바르게 가져갔지만 큰 사진(1MB 내외)을 가져가는 도중 타임 아웃이 걸린 것으로 보이고(서버 대역폭을 조절해 일부러 느리게 가져가도록 하였습니다) 이후 문서 제목 만으로 snippet을 생성하였습니다. 분명, 본문 텍스트와 사진 1개를 확보하였음에도 해당 내용을 바탕으로 snippet을 만들지 않은 것이지요.

이미지

반면 위는 사진을 모두 작은 크기로 대체하여 snippet이 올바르게 생성되었을 때의 로그입니다. 이 경우에는 snippet이 본문 텍스트와 이미지를 포함하여 올바르게 생성되었습니다.

고로 의도한 대로 Google+ snippet을 작성하기 위해서는 정해진 시간 안에 포스트의 전체 내용을 전달해 주는 것이 중요합니다.

그렇다면 저처럼 홈 서버라서 서버 성능이 좋지 않거나 블로그 본문에는 여전히 고화질의 이미지를 사용하고 싶은 경우에도 Google+ snippet은 제대로 만들고 싶다면 어떻게 해야 할까요? (욕심도 많으셔...) 로그에서 확인할 수 있듯이 구글이 snippet을 위해 페이지 자원을 가져갈 때는 https://developers.google.com/+/web/snippet/나 http://www.google.com/feedfetcher.html를 user agent에 포함하고 있습니다. 이를 통해 미리 저화질/고화질 첨부 이미지를 준비해 두었다가 첨부 이미지 접근시 Google+ snippet 용으로 오는 접근은 저화질로 조정된 이미지를 제공하도록 하는 것도 한가지 방법이 될 수 있습니다.

참고로, express에서 user agent 정보는

req.headers['user-agent']

를 통해서 접근할 수 있습니다.

아직 해당 내용을 이 블로그 엔진에 적용하지는 않았지만 여유가 되면 적용해 볼까 합니다. 적용 후 그 과정을 바탕으로 또 포스팅 하나 하면 되겠네요. ^^