Issue
특정 페이지 링크를 공유할 때 사이트 정보가 없어서, 해당 페이지의 title, description, image를 추가해달라는 요청이 들어왔다.
Problem
- 동적 페이지마다 생성되는 meta 정보는 있는데 메인페이지 등 몇몇 페이지가 없음
- 레거시 코드를 보니 프로젝트를 모노레포 방식으로 변경하며 나뉘어져 있음
- nuxt로 된 페이지는 되어있고, next로 된 페이지에 meta 정보가 없음
- meta 정보를 넣었는데 title, description은 노출이 되나 이미지 노출이 안됨
Solution
- open graph object는 SVG image를 지원하지 않음
- 공통 이미지를 aws로 관리중이라 s3 접속하여 객체 업로드(png or jpg)
- 업로드해도 이미지 반영이 안되어 확인해보니, aws 원본주소는 바로 적용이 되나 route된 도메인 주소는 반영되는데 시간이 걸림
- CloudFront에서 무효화 처리를 추가(캐시를 쌓지 않고 바로 반영)
- 그래도 카톡에서 반영이 안되어서 'kakao developers 공유 디버거'에서 url을 입력하여 캐시 초기화를 해줌(잘 반영됨)
- 반영된 ogimage(1200*630px) 양 옆에 여백이 생겨 '카카오톡 비즈니스 가이드'에 권장하는 비율(2:1)로 디자이너에게 요청 후 해결
What I Learn
- CloudFront에서 캐시 무효화 하는 방법과 이유를 알게 됨
- CloudFront가 캐시를 무효화하는 방법
- CloudFront는 콘텐츠에 대한 요청을 받으면 캐시를 확인하여 요청된 콘텐츠의 복사본이 이미 있는지 확인한다.
- 그렇다면 캐시된 복사본을 사용자에게 반환한다.
- 캐시된 복사본이 없거나 캐시된 복사본이 오래된 경우 원본 서버에서 콘텐츠를 요청하고 향후 요청을 위해 캐시한다.
- 그러나 원본에서 콘텐츠가 변경되면 서버에서 CloudFront는 캐시된 버전이 만료될 때까지 사용자에게 캐시된 버전의 콘텐츠를 계속 제공할 수 있다.
- 사용자가 최신 콘텐츠를 받을 수 있도록 CloudFront는 캐시 무효화를 위한 몇 가지 메커니즘을 제공한다.
- 개별 파일 또는 디렉터리 무효화 : 개별 파일 또는 디렉터리를 무효화할 수 있다. 캐시에서 특정 파일 또는 디렉터리를 제거하도록 CloudFront에 요청을 전송한다. 이렇게 하면 사용자가 요청할 때 최신 버전의 콘텐츠를 받을 수 있다.
- 모든 파일 무효화 : 캐시에 있는 모든 파일을 무효화해야 하는 경우 요청을 보낼 수 있다. 이는 웹사이트 디자인을 업데이트하거나 새 서버로 마이그레이션하는 등 웹사이트를 크게 변경할 때 유용하다.
- CloudFront 캐시 무효화를 사용해야 하는 이유
- CloudFront는 사용자가 최신 콘텐츠를 받을 수 있도록 캐시를 무효화한다. 콘텐츠는 인터넷에서 자주 변경되며 콘텐츠를 캐싱하면 원본 서버의 부하를 줄이고 성능을 향상시킬 수 있다. 그러나 캐시된 콘텐츠가 자주 업데이트되지 않으면 사용자가 오래된 콘텐츠를 수신하여 사용자 경험이 저하될 수 있다. 캐시를 무효화하면 사용자가 요청할 때 최신 콘텐츠를 받을 수 있으므로 사용자 경험이 향상되고 오류나 불일치의 위험이 줄어든다.
- 요약하면 CloudFront는 캐시를 무효화하여 사용자가 최신 콘텐츠를 받을 수 있도록 한다. 이것은 개별 파일이나 디렉토리 또는 전체 캐시를 제거하여 수행된다. CloudFront는 캐시 무효화를 통해 사용자가 최신 콘텐츠를 받을 수 있도록 하여 사용자 경험을 개선하고 오류 또는 불일치의 위험을 줄인다.
- Open Graph 메타 태그 사용 시 발생하는 이슈들을 해결할 수 있게 됨
og:title
: 이 태그는 소셜 미디어 플랫폼에 표시되어야 하는 웹 페이지의 제목을 지정한다. 이 제목은 일반적으로 더 큰 텍스트로 표시되며 사용자가 공유 콘텐츠를 접할 때 가장 먼저 보게 되는 경우가 많다.
og:description
: 이 태그는 종종 제목 아래에 표시되는 웹 페이지에 대한 간단한 설명을 지정한다. 이 설명은 컨텍스트를 제공하고 사용자가 콘텐츠를 클릭하도록 유도하는 데 사용된다.
og:image
: 이 태그는 공유 콘텐츠의 썸네일로 사용된다. 이 이미지는 일반적으로 제목 및 설명과 함께 표시되며 콘텐츠를 시각적으로 더 매력적으로 만드는 데 도움이 된다.
og:url
: 이 태그는 표준 공유 콘텐츠가 웹사이트의 올바른 페이지와 연결되어 있는지 확인하는 데 사용되는 웹페이지의 URL이다.