트위터에서 디스코urse 링크의 이미지 미리보기 우선순위는 어떻게 되나요?

포럼 링크를 트위터에 게시할 때, 해당 링크로 연결된 게시글에 이미지가 하나 이상 포함되어 있으면, 트위터의 스레드 미리보기에 해당 이미지(또는 스레드의 첫 번째 이미지)가 섬네일로 표시된다는 것을 알고 있습니다.

또한, 사이트 설정에서 "카테고리 이미지"를 섬네일로 표시할 수 있다는 것과 “트위터 요약 대형 이미지” 옵션이 있다는 내용도 읽었습니다. 하지만 포럼 게시글 본문에 이미지가 없는 경우, 트위터에서 섬네일로 보이는 것은 텍스트 미리보기 옆에 있는 중앙에 아이콘이 있는 기본 회색 이미지뿐이라, 후자의 두 가지 옵션이 실제로 작동하는 모습을 한 번도 본 적이 없습니다.

따라서 트위터에서 주제 섬네일로 표시되는 이미지를 어떻게 제어할 수 있을까요?

도움을 주시면 감사하겠습니다.

참고: 트위터 API 키는 저장되어 있고, 트위터 로그인도 정상적으로 작동하고 있습니다.

안녕하세요,

이와 관련된 설정이 여러 가지 있습니다.

  1. opengraph image
  2. twitter summary large image
  3. category logo image
  4. 게시물 첫 번째 이미지

opengraph image는 기본값입니다. 이 설정만 해두면 게시물이나 카테고리 이미지가 없는 경우 여기에 설정한 이미지가 표시됩니다.

twitter summary large image를 설정하면 Twitter에서 opengraph image를 덮어씁니다. 즉, Twitter에서는 opengraph image 대신 이 이미지가 표시됩니다.

카테고리 로고 이미지와 게시물 첫 번째 이미지는 항상 다른 설정보다 우선합니다.


우선순위:

  1. 게시물 첫 번째 이미지 및 카테고리 로고 이미지
    (없을 경우) :arrow_down_small:

  2. twitter summary large image
    (없을 경우) :arrow_down_small:

  3. opengraph image
    (없을 경우) :arrow_down_small:

  4. large icon

(제가 맞다면)


설정 방법

opengraph image와 twitter summary large image는 여기서 설정할 수 있습니다: /admin/site_settings/category/branding


카테고리 로고 이미지는 해당 카테고리의 설정에서 ‘Images’ 탭으로 이동하여 설정합니다.


Twitter 테스트

이미지가 없는 게시물 링크를 twitter summary large image 설정과 함께 공유하면 :arrow_down_small:

Screenshot 2022-12-01 at 10.24.55

이미지가 있는 게시물 링크를 twitter summary large image 설정과 함께 공유하면 :arrow_down_small:

이미지가 없는 게시물 링크를 공유하되, twitter summary large image는 없고 opengraph image만 설정한 경우

category logo image가 포함된 카테고리 링크를 공유하면

opengraph image나 기타 설정 없이 사이트 링크를 공유하면


도움이 되셨으면 좋겠습니다 :slightly_smiling_face:

그래서 이 문제로 고생하고 있습니다. 두 개의 게시물이 다르게 동작하는데, 그 이유를 알 수가 없습니다. 한 게시물은 트위터에 원박스(Onebox) 미리보기 이미지를 표시하고, 다른 게시물은 twitter_summary_large _image를 표시합니다.

이 게시물은 예상대로 작동합니다.
https://community.abs-consulting.com/t/welcome-to-issue-65-of-the-abs-devops-scm-e-newsletter/22

이 게시물은 예상대로 작동하지 않습니다.
https://community.abs-consulting.com/t/devsecops-platforms-help-smbs-scale-as-they-grow/113

로버트님, 환영합니다 :wave: :slight_smile:

두 항목 모두에 대해 일반 원박스(onebox)를 확인했습니다:


네. 그 부분은 잘 동작합니다. 하지만 소셜 네트워크에 공유하면 다른 동작을 합니다.

각 웹사이트는 미리보기 표시 시 썸네일로 사용할 이미지를 선택하는 고유한 방식을 가지고 있습니다.

보통 메타 태그가 이미지를 지정하며, 이것이 우선적으로 선택됩니다.

질문자의 링크에는 이러한 태그가 없으므로, 각 웹사이트는 자체 기준에 따라 페이지 HTML에서 이미지를 선택합니다.

Discourse가 구체적으로 어떤 기준으로 이미지를 선택하는지는 알 수 없습니다. 심지어 다양한 HTML 부분으로 구성된 복합 이미지를 생성할 수도 있습니다. :person_shrugging:

네, 이해가 됩니다. 하지만 두 게시글이 동일한 방식으로 동작할 거라고 기대했어요. 혹시 Discourse나 Twitter가 onebox가 표시한 링크를 파싱한 뒤, Discourse 게시글이 아닌 해당 링크에서 메타 태그를 찾고 있는 건가요? 그렇다면 첫 번째 게시글이 메타 태그를 정의한 웹페이지를 가리키는 반면, onebox가 참조하는 두 번째 게시글은 그렇지 않아서 그런 차이가 생기는 걸 설명할 수 있겠네요.

여기서 말씀하시는 것이 Discourse 게시글에 '메타 태그’가 없다는 건가요, 아니면 onebox가 참조하는 링크에 '메타 태그’가 없다는 건가요?

제가 말하는 것은 바로 이것입니다. 공유하는 페이지에는 트위터, 페이스북, 디스코드, 디스커스 등 대부분의 플랫폼에서 사용될 적절한 메타 태그가 포함되어 있어야 합니다. :slight_smile:

이것에 대해 배우기 좋은 자료라고 생각합니다:

문제를 해결할 수 있었던 것 같습니다. 설정을 변경해야 했는데요, ‘파일 >> 원격 이미지 로컬 다운로드’ 옵션을 활성화했습니다. 테스트를 위해 토픽 생성을 비활성화한 후, 다시 활성화하고 중복 토픽을 생성했습니다. 그 다음 두 토픽의 썸네일 이미지를 확인했습니다. 하나는 로컬 이미지 저장소를 참조하고 있었고, 다른 하나는 링크의 원격 이미지를 참조하고 있었습니다.

이어서 각 토픽을 소셜 네트워크에 공유해 보았는데, 미리보기가 작동하는 링크드인을 선택했습니다. 로컬 이미지 저장소를 사용하는 경우, 링크드인 미리보기가 제 커뮤니티의 로컬 이미지를 가져옵니다. 반면, 다른 경우(원격 이미지)에는 링크 사이트의 썸네일 이미지가 아니라 설정에서 opengraph_image를 제공합니다.

따라서 링크를 공유할 때 onebox의 미리보기 이미지를 소셜 네트워크에 전달하려면 ‘파일 >> 원격 이미지 로컬 다운로드’ 설정을 활성화해야 하는 것으로 보입니다.