구글 드라이브로 오픈 그래프(Open-Graph) 이미지 링크 만들기

오픈그래프에 미리보기 이미지로 넣을 이미지를 등록하기 위해

구글드라이브에 이미지 업로드 후 액세스 권한을 '링크가 있는 모든 사용자'로 설정하여도 접근이 안됨.

 

원인

Google Drive는 이미지 CDN이 아니라서 플랫폼(카카오/네이버/페북/트위터) 크롤러가 직접 이미지를 못 집어오는 일이 많음

 

해결

구글 드라이브에 파일을 올린 후 링크를 아래와 같이 크롤링으로 직접 접근이 가능한 링크로 수정한다.

 

[크롤링 가능한 링크 만드는 법]

공유 링크의 구조는 아래와 같다.
링크에서 "파일 ID"를 찾아 그 아래 '다운로드 링크'의 파일 ID 부분에 넣는다. (따옴표 제외)

공유 링크 원본 >> https://drive.google.com/file/d/"파일 ID "/view?usp=drive_link
크롤링 링크 >> https://drive.google.com/thumbnail?id="파일 ID"

 

 

1. 구글 드라이브에 파일 업로드

 

2. 파일 설정(우측 점 세개) > 추가정보 > 파일정보 > 보안 제한사항 > 액세스 관리 > '링크가 있는 모든 사용자'로 설정

 

3. 파일 설정(우측 점 세개) > 공유 > 링크 복사

 

4. 해당 링크를 og:image 속성의 값으로 넣는다.

 

* 오픈그래프로 '소셜 공유 미리보기' 만들기 

https://vamosdev12.tistory.com/54

 

 

만약, 계속 해서 이미지가 보이지 않는 다면?

 

1. 이미지 사이즈 및 형식 점검

- 아래와 같이 이미지의 사이즈를 직접 지정해준다.

- image URL에 sz로 사이즈 값을 넣어주면 더 좋다.

<!-- 권장: 드라이브 썸네일 엔드포인트 (가로 1200px 요청) -->
<meta property="og:image" content="https://drive.google.com/thumbnail?id=[파일ID]&sz=w1200" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />

 

 

2. 카카오톡(SNS) 캐시 삭제

SNS 크롤러들은 한 번 가져온 미리보기를 캐싱함.

즉, 이전에 설정한 이미지가 계속 표시될 수 있음.

이때 아래 디버깅 도구들을 이용하여 캐시가 없는 상태에서 실제 보여지는 이미지를 확인하고 캐시를 삭제할 수도 있음.

• Facebook: Sharing Debugger
• Kakao: 카카오 디벨로퍼스 디버거
• Twitter: Card Validator

[카카오 디벨로퍼스 디버거 이용 방법]

 

• 로그인
  카카오 디벨로퍼스에 로그인 > 메뉴의 도구 → 디버거 도구(공유 디버거)로 이동
• URL 입력 → 디버그
  미리보기를 확인할 페이지 URL을 입력하고 디버그(스크랩 확인) 버튼을 누릅니다. 이때 카카오가 해당 URL의 OG 태그를 긁어와 미리보기/파싱 결과를 보여줌
• 캐시 초기화(리셋)
  미리보기가 예전 이미지/텍스트로 보이면 캐시 초기화(URL 캐시 초기화) 버튼을 눌러 서버측 캐시를 지웁니다. 이후 다시 디버그를 눌러 갱신 여부를 확인.