토픽에서 외부 공개 이미지의 meta og:image 소스를 덮어쓰기?

기본적으로 플러그인 작성자 @merefield와 제가 이 문제에 대해 논의한 내용을 여기서 볼 수 있습니다.

그는 Discourse 팀에 이 작업을 요청하도록 권고했습니다.

저는 항상 제 사이트에서 외부 CDN 이미지를 사용하며, 로컬 업로드나 오브젝트 스토리지에 업로드하지 않습니다. 로컬 또는 S3 버킷에 이미지를 저장하는 것은 비용이 너무 비싸기 때문입니다.

현재 제 메타 og:image 태그가 이러한 이미지를 가져오지 못하는 것을 확인할 수 있습니다. 예를 들어 이 토픽을 참고하세요: How Many Carbs on Keto? - How To Discuss

이미지는 실제로 IMG SRC로 외부 공개 URL에서 로드됩니다. 하지만 소셜 미디어 오픈 그래프는 항상 제 사이트 로고를 폴백 이미지로 표시하는데, 이는 좋지 않은 상황입니다.

이러한 Discourse의 핵심 동작 때문에, 토픽 목록 미리보기 플러그인이 감지하는 썸네일 이미지에서도 이러한 이미지를 볼 수 없습니다.

외부에서 업로드한 이미지를 강제 사용하도록 메타 og:image 태그를 어떻게 오버라이드할 수 있을까요?

소셜 미디어 사이트에서 공유할 때 제 사이트 포럼 로고 대신 실제 토픽 이미지가 보이도록 하려면: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fhowtodiscuss.com%2Ft%2Fis-yoga-a-good-workout%2F28043

토픽 페이지에 이 라인을 강제 추가해 보았습니다.

<meta property="og:image" content="https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />

하지만 페이지 소스를 확인했을 때 og:image 태그는 여전히 폴백으로 제 사이트 로고를 사용하고 있으며, 이 토픽에 이미지가 없다고 인식하고 있습니다. :frowning:

어떤 토픽의 첫 번째 게시물에 있는 첫 번째 이미지가 외부 공개 URL에 호스팅되어 있더라도 메타 og:image 태그에 의해 가져와져야 합니다. 현재는 이미지가 제 자체 서버에 업로드된 경우에만 가져오는데, 많은 사용자들이 이미지 호스팅 비용을 감당할 수 없어 직접 호스팅하는 것이 불가능합니다. Discourse 팀이 이러한 변경을 허용해 주시면 매우 도움이 될 것입니다.

@Bcat도 그의 포럼에서 동일한 문제를 겪고 있습니다.

2개의 좋아요

Discourse 코어는 주제 썸네일로 'uploads’를 사용하는 것만 지원합니다. 로컬 또는 S3에 호스팅될 수 있지만, 반드시 Discourse에 업로드되어야 합니다. “원격 이미지를 로컬로 다운로드” 사이트 설정을 사용하면 핫링크된 이미지를 자동으로 업로드 파일로 변환할 수 있습니다.

불행히도 Discourse에서 이 동작을 변경할 계획은 없습니다.

3개의 좋아요

S3에 호스팅된 경우, 어떻게 Discourse에 업로드되는 것일까요? S3는 Discourse가 아니므로, 이미지를 호스팅하기 위한 공개 서버이기도 합니다. 3rd party 무료 이미지 공개 CDN의 원격 이미지를 사용할 경우에도 누구나 접근할 수 있으며, S3도 마찬가지입니다. 그렇다면 왜 Discourse는 공개 이미지 URL을 주제 썸네일로 사용하는 것을 허용/지원하지 않는 것일까요?

예를 들어, 이 URL https://global.discourse-cdn.com/meta/optimized/3X/7/1/71abcfa01874c32497d638b372f94c7b9fc021e4_2_1380x718.png 은 방금 meta discourse에 업로드한 사진이며, 이는 공개 이미지 호스팅 URL입니다. 그리고 제 이미지 URL은 https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500 와 같은 형태입니다.

제 URL도 공개적으로 호스팅된 이미지인데, 왜 Discourse가 제 이미지를 선택하지 않는 것일까요? 크롤러나 오픈 그래프 크롤러의 관점에서 두 이미지 소스가 모두 공개적으로 호스팅된 URL이므로, 이 둘을 모두 사용하도록 설정해 주십시오.

이미 이 설정을 켜 두었습니다.

그런데 왜 제 핫링크된 이미지가 주제 썸네일로 사용되지 않는 것일까요?

또한 이 파일 설정에서 jpg/jpeg 업로드를 비활성화했습니다.

저장 공간 절약을 위해 사용자가 제 서버에 이미지를 직접 업로드하는 것을 방지하기 위해 이 설정을 비활성화했습니다.

포럼이 매우 커지면 이렇게 많은 이미지를 관리하는 것이 매우 어려워질 것입니다.

제가 원하는 것을 달성할 수 있는 해킹/트릭이 있을까요? 저는 단순히 og:image 메타 태그를 오버라이드하여 주제에서 핫링크된 이미지를 사용하도록 강제하고 싶습니다. 어떻게 하면 간단히 이걸 이룰 수 있을까요? 주제 페이지에 이 핫링크 이미지 src를 og:image로 사용하도록 강제하기 위해 넣을 수 있는 HTML 코드가 있을까요?

아니면 제 사이트의 에 코드를 한 줄 추가하여, Discourse가 주제 썸네일을 감지하지 못할 경우 로고 이미지로 폴백되는 기본 동작을 방지하거나 이 og:image 메타 태그 라인을 단순히 제거할 수 있을까요?

아래 라인을 제 주제 페이지 게시글 편집기에 추가해 보았습니다.

<meta property="og:image" content="https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />

하지만 어떤 이유로인지, 제 주제 페이지의 소스 코드를 볼 때 이 코드가 렌더링되지 않습니다. 왜 그런 것일까요?

이것을 시도해 본 페이지는 Is yoga a Good workout - How To Discuss 입니다.

제가 이 1번을 우선순위로 두려면, 제 페이지에 og:image 메타 태그가 2개 있을 때 제 커스텀 og:image 메타 태그만 선택하여 사용하도록 어떻게 해야 할까요?

이렇게 설정하면 됩니다:

Discourse가 S3 버킷에 접근하여 사이트에 표시할 수 있도록 이미지를 최적화할 권한이 없기 때문입니다. 또한 Discourse는 링크가 항상 작동한다는 것을 보장할 수 없습니다. 버킷 소유자가 파일을 삭제할 수 있기 때문입니다.

제가 의도한 것은 제 Discourse가 다른 제3자 무료 CDN 이미지 사이트의 S3 버킷에 액세스할 권한이 없다는 뜻인가요?
브라우저에서 이미지에 액세스할 수 있다면 Discourse도 액세스할 수 있으며, 실제로 Discourse는 핫링크를 통해 공유하는 이미지의 최적화를 이미 수행하고 있습니다. 따라서 이 기능이 반드시 필요하다고 생각합니다.

위에서 Discourse CDN 비교에 대한 제 답변을 업데이트했으니 확인해 주세요.

대량으로 이미지를 호스팅하는 가장 저렴한 다른 방법은 무엇이라고 추천하시나요? 제 사이트가 수백만 개의 토픽, 즉 수십억 개의 이미지를 갖추게 되면 Discourse 사이트 백업이 점점 커져 관리/확장/마이그레이션이 매우 어렵고 비용이 많이 들기 때문에 우려됩니다. 그런 경우 어떻게 해야 할까요?

해당 파일을 관리하고 최적화할 권한이 없습니다.

이 기능이 정말 필요하시다면, Marketplace 게시판에 게시하여 해당 기능을 개발해 줄 플러그인 개발자를 찾는 것이 최선의 방법입니다.

감사합니다. 같은 기능을 코어 또는 플러그인을 통해 구현하기 위해 유료 토픽을 열었습니다.

이 주제는 5시간 후 자동으로 닫혔습니다. 더 이상 새로운 답변을 작성할 수 없습니다.