링크를 게시할 때 표시되는 이미지 업데이트 방법 문의

제품 지원
1

우리는 /admin/site_settings/category/branding 경로 아래의 모든 브랜딩 아이콘을 새 브랜딩에 맞게 업데이트했지만, 링크를 공유할 때(예: Slack 등) 여전히 기존 로고가 표시됩니다. 새 브랜딩을 반영하도록 이미지를 업데이트하려면 이 이미지가 어디에서 설정되는지 알려 주실 수 있나요?

2

Slack에 링크를 게시할 때 Meta에 어떤 아이콘이 사용되는지 간단히 확인해 보았는데, 이유를 알 수 없지만 apple touch icon이 사용되고 있는 것 같습니다(이 부분은 우리가 제어할 수 없다고 생각합니다). 따라서 해당 아이콘을 설정하면 도움이 될 수 있습니다. 설정되어 있지 않으면 large icon으로 폴백되는 것으로 보입니다.

image

이미 해당 아이콘을 업데이트했다면, Slack이 아이콘을 캐시하기 때문에 업데이트가 반영되는 데 시간이 조금 걸릴 수 있습니다.

3

음, 살펴보니 apple touch icon은 비어 있고, 그 아래에 있는 discourse의 주석에는 "비워 두면 large_icon이 사용됩니다."라고 적혀 있습니다. 이미지는 새 로고에서 가져온 흐릿한 이미지로 보이는데, 그렇다면 맞는 것 같습니다.

그보다 위를 보면, 페이지 위쪽에 있는 large_icon도 비어 있고, 그 아래 주석에는 "비워 두면 logo_small이 사용됩니다."라고 되어 있습니다. 이 이미지도 위에서 본 것과 동일한 흐릿한 이미지이므로, 이것도 정상이 맞는 것 같습니다.

페이지 상단 근처의 logo_small에는 새 로고가 입력되어 있었고, 위에서 언급한 흐릿한 이미지들이 이 로고와 일치하므로, 이것도 모두 문제없는 것 같습니다.

이 브랜딩 변경은 몇 달 전 discourse에서 수행되었기 때문에, 자동으로 해결될 slack의 캐싱 문제라고 생각하지는 않습니다. 그래도 slack 게시물 외에 다른 곳에서도 오래된 로고가 표시되는지 내부적으로 물어보겠습니다. 그렇게 하면 최소한 이것이 discourse-slack에 특정한 문제인지 여부를 파악할 수 있을 것입니다.

그동안, 흐릿한 이미지가 표시된다는 점에서 fallback이 작동하고 있는 것처럼 보이지만, discourse가 언급된 대체 아이콘으로 fallback하지 못하는 문제일 수 있다고 생각하시나요?

4

네, 그러면 캐시 문제는 아닐 가능성이 높네요.

테스트했을 때 정상 작동했기 때문에 이것이 문제라고 기대하지는 않지만, 다른 앱의 동작이 관여되면 완벽하게 디버깅하기가 어려운 경우가 많습니다.

일단 apple touch icon을 설정해 보고 문제가 해결되는지 확인해 보세요.

5

슬랙에서만 발생하는 문제임을 배제할 수 있었습니다. Post Inspector 사이트를 이용해 당사 디스커스 링크 중 하나를 입력하면, 구 로고가 표시됩니다.

해당 사이트를 통해 확인해 보니, 구 로고는 https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/standard10/uploads/[ourcompany]/original/1X/[randomfilename.png]에서 제공되고 있습니다.

아마도 디스커스가 정보를 저장하는 데 이 주소를 사용하며, 이 캐시를 삭제하거나 업데이트해야 하는 것 같습니다.

6

아, 해당 링크를 확인해 보니 공식 호스팅 서비스를 이용 중인 고객님이시군요. 사이트 테마에서 head 파일에 meta opengraph 태그를 수동으로 설정한 것으로 보입니다. 이렇게 할 필요는 없으며, 이 부분이 이전 로고가 참조되는 곳으로 추정됩니다.

/admin/customize/themes에서 “HTML/CSS 편집” 섹션 내의 head 영역에서 해당 태그를 제거하시면 문제가 해결될 것입니다.

7

고마워요, 잘 작동했어요!
같은 페이지(admin/customize/themes/2)에서 이미지를 업로드하고 싶다면 "HTML/CSS 편집"을 통해 head 섹션을 수정할 수 있을 것 같아요. 그렇다면 다음 코드 대신 어떤 줄을 사용해야 할까요?
<meta property="og:image" content="https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/standard10/uploads/[ourcompany]/original/1X/[rendomfilename.png]">