meta태그 ogimage 적용하기

곽향훈·2023년 5월 22일
1

Trouble Shooting

목록 보기
3/10

Issue

특정 페이지 링크를 공유할 때 사이트 정보가 없어서, 해당 페이지의 title, description, image를 추가해달라는 요청이 들어왔다.


Problem

  • 동적 페이지마다 생성되는 meta 정보는 있는데 메인페이지 등 몇몇 페이지가 없음
  • 레거시 코드를 보니 프로젝트를 모노레포 방식으로 변경하며 나뉘어져 있음
  • nuxt로 된 페이지는 되어있고, next로 된 페이지에 meta 정보가 없음
  • meta 정보를 넣었는데 title, description은 노출이 되나 이미지 노출이 안됨

Solution

  1. open graph object는 SVG image를 지원하지 않음
  2. 공통 이미지를 aws로 관리중이라 s3 접속하여 객체 업로드(png or jpg)
  3. 업로드해도 이미지 반영이 안되어 확인해보니, aws 원본주소는 바로 적용이 되나 route된 도메인 주소는 반영되는데 시간이 걸림
  4. CloudFront에서 무효화 처리를 추가(캐시를 쌓지 않고 바로 반영)
  5. 그래도 카톡에서 반영이 안되어서 'kakao developers 공유 디버거'에서 url을 입력하여 캐시 초기화를 해줌(잘 반영됨)
  6. 반영된 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이다.

0개의 댓글