오픈그래프 적용 안됨 - opeungeulaepeu jeog-yong andoem

3. 먼저 meta를 동록하기 전 카카오톡에 미리 테스트해보았을 때 메타를 다시 등록하고 배포하여도 카톡에 공유시 이미지나 기타 정보가 변경이 안되었다면, 이는 카카오 서버에 페이지의 정보가 아직 캐싱되지 못한 것입니다. (카카오에서는 빠르면 1시간 이내 최대 24시간 이내에 적용 시간이 걸린다고 합니다.)

카카오 개발 사이트에서 직접 초기화를 할 수 있습니다. 해당되는 사이트를 입력해 초기화 하시면 됩니다

https://developers.kakao.com/tool/clear/og

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

참고 사이트

https://dev-jwblog.tistory.com/48

[HTML] 카카오톡 URL 공유시 미리보기 meta 정보 등록하기

카카오톡을 통해서 어떠한 정보를 공유하기 위해서 URL을 공유하는 일이 많이 있다. 카카오톡에 URL을 공유하게 되면 위의 그림과 같이 썸네일 이미지와 제목, 내용 등을 보여주게 되는데, 이는

사이트 대표 이미지를 수정했는데, 카카오톡 등에서 여전히 기존 대표 이미지가 표시될 수 있습니다. 더 빠른 데이터 로딩을 위한 캐시화가 원인으로, 사용자는 카카오 디벨로퍼스에서 디버거 도구를 사용해 기존 대표 이미지를 삭제해야 새로운 대표 이미지로 정상 표시됩니다.

사용방법

1. 카카오 디벨로퍼스 공유 디버거에 접속합니다.
2. 카카오 계정으로 로그인합니다.

3. URL 입력 칸에 내 도메인 주소를 입력합니다.

   주의: 도메인 주소는 http 또는 https 를 구분하여 입력해 주세요. SSL 보안서버 인증서를 설치했다면 https 로 입력해야 합니다.

   

4. 디버그 버튼을 클릭합니다.
5. 삭제하려는 오픈그래프 정보를 확인하고, 문제가 없다면 캐시 초기화 버튼을 클릭합니다.
6. 대표 이미지를 포함하여 오픈그래프 정보가 초기화 됩니다. 이제 카카오톡 등 카카오 서비스에서 사이트 주소를 입력해 업데이트한 대표 이미지가 표시되는지 확인해 보세요.

7. 만약 초기화에 문제가 있는 경우, 스크랩 결과 열에서 확인할 수 있습니다. 스크랩 결과에 따라 문제를 확인 후 위 3~5번 과정을 다시 시도해 주세요.

   

관련 도움말

오픈그래프는 카카오톡 이외에도 페이스북, 블로그 등에서 사이트 요약정보를 표시할 때 주로 사용되는 기능입니다. 내 사이트 오픈그래프 정보를 수정하려면 다음 도움말들을 참고해 수정해 보세요.

이러한 경우에는 아래 주소에서 해결이 가능하다.

• 페이스북 og태그 초기화 :  https://developers.facebook.com/tools/debug/

공유 디버거 - Facebook for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. �

SNS에서는 URL을 공유하면 그 사이트의 Open Graph를 파싱 해서, 링크의 미리보기 이미지, 제목, 설명 등을 가져옵니다. 카카오톡도 마찬가지로 URL을 공유하면 Open Graph의 내용을 아래와 같이 보여줍니다. 

문제는 오픈그래프를 변경해도 카카오톡은 기존 데이터를 삭제해주지 않으면 변경한 오픈그래프가 보이지 않습니다. 카카오톡에서 오픈그래프를 갱신하고 싶다면, 카카오 개발자에서 제공하는 초기화 도구를 사용해서 OG 캐시를 삭제해줘야합니다.

Kakao Developers - OG 캐시 삭제

URL에 갱신하고 싶은 URL 주소를 넣고 초기화를 하면 끝입니다. 여기까지는 카카오 오픈그래프 캐시 삭제라고 치면 누구나 찾을 수 있는 내용입니다.

블로그에서 알려주는 글을 보면서 초기화를 진행했지만, 제 카톡의 오픈그래프는 바뀌질 않았습니다. 초기화를 하고 10분을 기다리고, 초기화를 하고 20분을 기다린 뒤 채팅을 보내도 이전 오픈그래프가 보여졌습니다. 

물론 채팅방의 설정에 들어가서 대화 내용 삭제, 미디어 파일 삭제, 일반 파일 삭제는 모두 진행한 후에 여러 번 시도를 했지만 모두 실패했습니다. 방법을 찾아도 나오질 않아서 포기하고 휴대폰으로 카카오톡을 보는데, 휴대폰에서는 바뀐 오픈그래프가 제대로 출력되고 있었습니다.

모바일은 채팅방을 삭제한 이후에 오픈그래프가 초기화되었습니다. 하지만 PC카톡은 채팅방을 삭제해도 이전 데이터가 남았던 것 같습니다.

PC카톡은 따로 초기화나 캐시 삭제 방법이 안보였습니다. 그래서 오픈그래프를 초기화하기 위해서 PC카톡을 삭제한 뒤 재설치했습니다. 그러고 나니 바뀐 오픈그래프가 잘 출력되었습니다.

카카오톡 오픈그래프(og) 캐시를 삭제했는데도 변경이 되지 않는다면, 모바일의 경우 채팅방 나가기☛og 캐시 삭제☛10분 기다린 후 URL 재전송을 해보시길 바랍니다. PC 카카오톡의 경우 카카오톡 프로그램을 삭제하고 재설치해서 확인하시길 바랍니다.

이상 쓸데없는 데에 삽질한 사람의 한탄 글이었습니다. 스마트폰 카톡을 조금만 더 일찍 봤어도 뭐가 문제인지 알 수 있었을 텐데, 10분이고 20분이고 계속 기다렸던 게 바보 같네요 ;(

nextjs에서 카카오톡 공유했을 시에,

자꾸 메타태그의 open graph가 적용이 되지 않았다 ㅠㅠ
카카오 데브톡에 올렸지만, 아무리봐도 우리 상황과는 맞지 않는 조언들 뿐이였다...

그래서 결국 팀장님께 요청을 구했고,
meta태그가 적용된 _app.tsx에서 콘솔을 찍어보며 디버깅을 한 결과,

export const WithContextApp = (props: AppProps) => {
  const { loading, error, data } = useQuery(ME, {
    client,
  });
  const me = data?.Me || undefined;
  const isLogined = !!me;


  if (loading) return false;

  return (
    
      
    
  );
};

loading이 true가 뜨면서, return false가 반환되어 html 태그가 아예 적용이 되지 않는다는 것을 깨달았다...
그래서 아래와 같이 수정해보았다.

  const isServerSide = typeof window === "undefined";

  if (!isServerSide && loading) return false;

여기서, typeof window가 undefined라는 것은, window가 서버 사이드에 있다는 걸 뜻한다..
(그래서 변수이름도 isServerSide),,,

(하지만 보통 프론트에서는 undefined가 아니면 not null을 반환한다)

아무튼 그렇게 해서 결국엔 meta태그가 적용되는 것을 알 수 있었고,

HTML 코드가 잘 나오니 meta 태그가 먹혀 미리보기가 생성되는 것을 볼 수 있었다 😭 감격,,,

아 그리고, 올바르게 렌더되고 있는지는
https://developers.facebook.com/tools/debug/?locale=ko_KR
에 가면 내 홈페이지가 어떻게 HTML코드가 렌더되고 있는지 알 수 있다!

주말동안 삽질했는데 해결되어 매우 기쁘다 😆😆
나두 얼른 팀장님처럼... 능력있는 개발자가 되고 싶다 ,,,, 😊