페이스북 공유 링크에 이미지가 표시되지 않음 (Open Graph)

주변을 둘러봤지만 답을 찾을 수 없습니다.
테스트로 이 포럼의 일부 주제를 Facebook에 공유해 보았지만, 어떤 경우에도 이미지가 표시되지 않습니다. 발생하는 오류 유형은 다음과 같습니다:

제공된 og:image URL
https://global.discourse-cdn.com/meta/optimized/4X/e/0/4/e04203d665f3ff3540361fdeedb76df8cf37df9b_2_1024x767.jpeg 을(를) 이미지로 처리할 수 없습니다.
파일이 손상되었거나 유효하지 않은 형식일 수 있습니다.
호스트 이름을 유효한 IP 주소로 해석할 수 없습니다.

주제를 공유했을 때 Facebook에서 이미지가 정상적으로 표시되는 분이 계신가요?

도와드리고 싶지만, 여기서 우리가 할 수 있는 개선 사항은 전혀 보이지 않습니다.

URL은 정상적입니다:

페이스북이 Amazon CloudFront에 속한 DNS 이름을 해석할 수 없다면, 이는 페이스북의 문제입니다. 내부적인 문제가 있는 것이겠죠?

아니면 아마존 쪽 문제일 수도 있지만, 그 가능성은 낮습니다.

페이스북 지원팀에서는 이 문제에 대해 어떻게 말하나요?

공유하신 이미지에 대해 좀 헷갈리는 부분이 있습니다…?

제 지식 범위 내에서는 페이스북 "지원팀"이라는 것이 사실상 존재하지 않는 것 같습니다.

하지만 이것은 페이스북의 문제는 아닌 것 같습니다. 제 자체 Discourse 설치 환경에서는 일부 이미지가 정상적으로 표시되므로, 이미지가 정상적으로 작동하게 만드는 프로세스가 무엇인지 알고 싶습니다. 해당 토픽의 첫 번째 이미지가 문제의 원인인가요? 그렇다면 왜 이 포럼의 해당 토픽(그리고 제가 시도해 본 다른 토픽들)은 작동하지 않는 반면, 제 환경에서는 작동한 것일까요?

아마도 이것은 영원히 풀리지 않을 미스터리가 될지도 모르겠습니다.

OP에서 언급하신 바로 그 이미지 URL입니다.

이 과정의 흐름은 다음과 같습니다:

  • 사용자가 주제 URL을 Facebook에 게시합니다.
  • Facebook이 주제 URL을 가져오고 opengraph 태그를 파싱합니다.
  • Facebook이 og:image URL을 식별합니다.
  • Facebook이 og:image URL을 가져오려고 시도합니다.
    • Facebook이 URL의 호스트명을 IP 주소로 변환합니다.
    • Facebook이 해당 IP에 연결합니다.
    • Facebook이 URL을 가져옵니다.

만약 https://global.discourse-cdn.com/meta/optimized/4X/e/0/4/e04203d665f3ff3540361fdeedb76df8cf37df9b_2_1024x767.jpeg라는 URL을 가져오려고 시도하면서 Could not resolve the hostname into a valid IP address.(호스트명을 유효한 IP 주소로 변환할 수 없음)라는 오류가 발생한다면, Discourse는 해당 과정의 경로에 포함되지 않습니다. 이는 Facebook의 서버가 Amazon Cloudfront 호스트명을 변환하려고 시도하는 과정이기 때문입니다.

네, 이제 이해가 됩니다. 감사합니다.

Discourse가 이미지를 선택하고 og:image를 설정하는 방식에 문제가 있는 건 아닌지 궁금했습니다. 하지만 제 Discourse가 작동하고 있다면(비록 100% 완벽하지는 않지만), 아마도 말씀하신 내용에 문제가 있는 것일 수 있습니다.

그래서 제 질문은 여전히 이렇습니다. 선택되는 이미지는 항상 주제(topic)의 가장 위에 있는 이미지인가요? 이것이 Discourse의 기본 동작 방식인가요? 아니면 무작위로 선택되는 건가요? 그리고 이미지가 선택되려면 이미지 크기 등 특정 요구 사항이 있나요? 제가 직접 만든 주제에 이미지를 포함할 때 올바르게 포맷을 지정하고 있는지 확인하고 싶어서요.

이 간략한 문서를 위한 최적의 장소는 아닐 수 있지만, 이미지 마크다운에 |thumbnail 힌트를 사용하여 다른 썸네일을 선택할 수 있습니다:

팁 주셔서 정말 감사합니다. 몰랐습니다.
이미지 크기는 어떻게 되나요? 특별한 요구 사항이 있나요? 아니면 어떤 이미지가든 리사이즈로 인해 변형되더라도 사용되나요?

수정: 이게 컴포넌트라는 걸 방금 알아차렸네요. OpenGraph에서 어떤 이미지가 사용될지 결정하려면 컴포넌트를 설치해야 하는 건가요? 지금 약간 혼란스럽습니다. 죄송합니다.

확신은 없는데, 어떤 이미지가든 사용 가능하고 리사이즈는 소비자가 결정하는 것 같습니다. 예를 들어, 작은 이미지를 try에서 테스트해 보았는데, 해당 Onebox를 확인해 보세요:

https://try.discourse.org/t/testing-some-images-and-thumbnails-hint/1498

실제로 조금 혼란스러운 부분입니다. |thumbnail 로직은 모두 코어에 있으며, 테마 컴포넌트는 단순히 코어가 추가적인 썸네일 크기를 생성하도록 요청하고 주제 목록에서 이를 사용만 합니다. 제가 아는 한 해당 정보가 포함된 유일한 주제였기 때문에 인용문을 붙였습니다.

Facebook Debugger에서 테스트했을 때 몇 가지 오류가 발생했고 이미지가 표시되지 않았습니다.

설명해 주셔서 감사합니다. 저는 확실히 이 컴포넌트를 설치할 것입니다. 특정 카테고리에서 정말로 사용하고 싶은 기능이기 때문입니다. 또한 유사한 컴포넌트인 Topic Cards도 확인해 보았습니다. 이쪽도 자체적인 강점이 있는 것 같습니다.