지난 일주일 정도 볼랜드포럼 개편 작업을 하면서 추가로 한 작업들중 하나, Facebook Friendly. 페이스북에 볼랜드포럼의 글을 링크로 올렸을 때, 내용 요약이 잘 표시되게 하고 또 썸네일 이미지가 잘 표시되도록. 이건 신경 안써도 원래는 페이스북이 알아서 기본적으로 잘 되어야 하는 건데, 실제로는 잘 되게 하기가 생각보다 쉽지 않다.
지난 여러달 동안 짬짬이 이래저래 뒤져보고 테스트했던 결과로 알게 된 것들. 페이스북은 물론 링크의 내용 요약과 썸네일을 자동으로 가져오려고 애를 쓴다. 하지만 최근의 웹페이지들은 글과 그림을 html로 표현하는 방식이 워낙에 많이 다르기 때문에, 페이스북이 자동으로 판단하는 데에는 한계가 있다.
그래서 페이스북이 링크의 내용 요약과 이미지들을 제대로 판단하도록 기준을 제시할 방법이 있는데, 그게 meta 태그를 이용하는 방법. 페이스북에 올릴 링크의 웹페이지에서 페이스북에 정보를 더 잘 제공하려면. 먼저 내용요약의 경우는
이런 식으로 태그를 추가해준다. 이 태그는 head 태그 내에 있어야 한다. 이건 비교적 간단.
썸네일 이미지는 좀 더 복잡하다. 페이스북 링크의 썸네일로 올라갔으면 하는 이미지는 역시 meta 태그로
이런 식으로 추가해주면 된다. 그런데, 내용 요약과 달리 이미지는 크기가 몇 메가 이상으로 아주 커질 수도 있기 때문에 몇가지 이슈가 발생한다.
페이스북이 이미지의 크기가 얼마 이상이면 썸네일로 받아들이지 않는다 이런 기준은 없지만, 어쨌든 이미지가 너무 크면 거의 실패한다. 엔지니어로서의 경험적인 느낌으로 보자면, 아마도 페이스북은 이미지를 썸네일로 가져오려고 시도하다가 일정 시간이 지나면 포기하는, 즉 타임아웃 방식을 쓰고 있는 것으로 보인다. 이건 다시 말하면, 페이스북 서버와 해당 웹페이지의 서버 사이의 네트워크 거리가 멀 수록, 밴드위스가 좁을 수록 이미지 추출에 실패할 가능성이 높아진다는 얘기다.
아마도 페이스북에서 링크 정보를 추출하는 기능은 서버가 따로 있는 것으로 추측되는데, 일반 페이스북 페이지를 가져오는 서버와 별도의 서버인 것으로 생각되며, 링크 정보 추출 서버는 적어도 한국 혹은 한국에서 가까운 네트워크 위치에는 없는 것으로 보인다. 그렇게 추측하는 이유는, 일반적인 기능들의 서버 반응 속도와 링크 추출시의 반응 속도가 너무 상이하기 때문이다. 어쨌든, meta 태그로 이미지를 친절하게 지정해주더라도 이미지 파일 크기가 많이 크거나 네트워크 거리가 멀 경우 이미지가 제대로 추출되지 않는다.
그래서, 페이스북에 올리는 링크에 대해 이미지가 쏙쏙 잘 나오도록 하려면, 원본 이미지 대신 축소한 썸네일을 제공할 필요가 있다. 페이스북 측의 최신 지침에 따르면 154x154 픽셀 사이즈를 권장하고 있고, 또 가로/세로의 비율이 3배가 넘으면 안된다고 하고 있다. 물론 이게 완전히 강제 규정은 아니고, 다만 이보다 많이 더 커지면 이미지 추출이 실패할 가능성이 커진다.
이런 배경 때문에... 이번에 볼랜드포럼 개편 작업을 하면서 이런 부분들을 염두에 두어 기능을 개선하거나 추가했다. 당연히 게시판의 글읽기 페이지에서는 meta 태그로 내용 요약과 이미지 지정을 해줬고, 내용 추출시에도 순수 텍스트만으로 잘 나오도록 기능을 개선했다. 특히 이미지를 위해서는, 아예 게시판에 글을 올릴 때 첨부파일이 이미지이면 그에 대해 154x154 크기의 썸네일을 생성해두고 글 읽기 페이지에서 meta 태그로 그 썸네일을 지정해줬다. 결과는 대성공. 내용 요약과 썸네일이 아주 잘 나오고 있다. 삽질의 보람이 느껴지는 순간. ㅋㅋㅋㅋ
한가지 자잘한 팁을 제시하자면, 페이스북의 링크 정보는 캐시가 되기 때문에, 최근 며칠 이내에 동일 URL을 먼저 페이스북에 올린 사람이 있을 경우 페이스북은 해당 주소의 웹페이지를 다시 파싱하지 않고 이전에 캐시된 것을 돌려준다. 예를 들어 언론사의 기사 페이지들은 시간이 지나면서 제목이나 내용이 수정되는 경우가 있는데 이럴 때 최초 추출되었던 시점에 캐시된 정보만 나오게 된다. 이럴 때 강제로 정보를 다시 가져오도록 하려면 페이스북 디버거 페이지를 이용하면 된다.
http://developers.facebook.com/tools/debug
이 페이스북 디버거의 부수적인 용도 한가지는, 웹페이지 정보 추출이 한번 실패했을 때도 계속 재시도할 수 있다는 점이다. 이미지가 너무 커서 이미지 추출이 실패했을 경우에 여러번 다시 시도하다보면, 두 서버간의 네트워크 연결이 우연히 빨라지는 시점에 이미지 추출이 성공하는 경우가 있다. 예를 들면, 이전에 난 무려 40~50회를 반복해서 3메가가 넘는 되는 이미지를 제대로 추출하게 만든 적도 있다. 엄청난 삽질. 그래서, 자신이 직접 관리하는 페이지이고 자주 페이스북에 링크를 올릴 거라면, 위와 같은 페이스북 프렌들리 작업을 해주는 것이 더 좋겠다.
