OpenGraph 태그에 og:image:width, og:image:height, og:image:type 추가

기여 기능
1

phpBB에서 Discourse로 이사를 오다가, Discourse의 OpenGraph 구현에 Facebook이 이미지 표시를 위해 의존하는 중요한 태그가 누락되어 있음을 발견했습니다.

문제점

Discourse의 토픽을 Facebook에 공유할 때 링크 미리보기에 이미지가 표시되지 않습니다. 반면, 같은 포럼의 phpBB 게시물을 공유할 경우 이미지는 올바르게 표시됩니다.

Facebook Sharing Debugger를 사용하여 확인한 결과 다음과 같습니다:

phpBB에는 다음이 포함되어 있습니다:

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta property="og:image:type" content="image/jpeg">

Discourse에는 다음만 포함되어 있습니다:

<meta property="og:image" content="https://example.com/uploads/.../image.JPG" />

디버거에서는 이미지가 올바르게 표시되고 HTTP 200을 반환하지만, Facebook은 차원(dimensions) 및 유형(type) 메타데이터가 없으면 실제 공유 미리보기에 이미지를 표시하지 않습니다.

왜 이것이 중요한가

OpenGraph 프로토콜 사양에 따르면:

og:image 태그에는 og:image:width, og:image:height, og:image:type를 포함한 여러 선택적 구조화 속성이 있습니다.

이들이 기술적으로는 선택 사항이지만, Facebook의 크롤러는 안정적인 이미지 표시를 위해 이러한 태그가 필요하거나 강력히 선호하는 것으로 보입니다. 이는 다양한 출처에 문서화되어 있으며, 모든 Discourse 커뮤니티의 소셜 미디어 공유에 영향을 미칩니다.

제안된 해결책

Discourse는 og:image가 존재할 때마다 다음 세 가지 추가 메타 태그를 자동으로 추가해야 합니다:

  1. og:image:width - 이미지의 실제 픽셀 너비
  2. og:image:height - 이미지의 실제 픽셀 높이
  3. og:image:type - MIME 유형 (image/jpeg, image/png 등)

Discourse는 이미 이미지의 처리와 최적화를 수행하고 있으므로 이 정보에 접근할 수 있으며, OpenGraph 출력에 이를 쉽게 포함시킬 수 있습니다.

영향

이것은 모든 Discourse 사이트의 소셜 미디어 공유를 개선하여, Facebook, LinkedIn 및 OpenGraph 데이터를 소비하는 다른 플랫폼에서 Discourse 콘텐츠가 공유될 때 더 시각적으로 매력적인 공유 링크를 제공하고 참여도를 높일 것입니다.

추가 배경 정보

6개의 좋아요
2

리포트 감사합니다 @shortmort37 :+1: 다음 PR로 수정될 예정입니다

6개의 좋아요
4

이 문제를 해결해 주셔서 감사합니다!

그런데 og:image:type가 포함되지 않는 이유는 무엇일까요? phpBB에서는 포함하고 있습니다.

Dan

3개의 좋아요
6

스펙을 잘못 읽고 선택 사항이라고 생각했기 때문입니다… 하지만 이미지의 너비와 높이도 선택 사항이므로, 이것도 함께 추가하지 않을 이유가 없다고 봅니다.

6개의 좋아요
7

최근 Discourse 업데이트 덕분에 Facebook과의 연동이 상당히 잘되고 있습니다. 정말 감사합니다!

-Dan

4개의 좋아요
8

더 많은 찬사를 보내고 싶습니다. 최근 David Taylor의 훌륭하게 만들어진 “Topic List Thumbnails” 테마 구성 요소를 배포했습니다. 어떤 주제에나 썸네일을 생성할 수 있다는 점이 정말 멋집니다. 게다가 이미지 선언문 끝에 “|thumbnail” 태그를 사용하여 썸네일로 사용할 이미지를 직접 선택할 수 있다는 점도 좋습니다.

아마도 기본 아키텍처가 og:image와 테마 구성 요소 모두에 이 태그를 활용하기 때문일 것입니다. 그런데 썸네일을 변경하니 og:image OpenGraph 속성도 함께 변경되고, 결과적으로 Facebook에 표시되는 내용도 바뀌는 것을 발견하게 되어 정말 기뻤습니다. 한 번에 두 마리 새를 잡은 셈이죠! :zany_face:

정말 훌륭한 작업입니다!
Dan