웹페이지 링크 썸네일 생성

코드깎는 노인·2021년 8월 4일
0

html code

<!-- HTML Meta Tags -->
<meta name="description" content="설명">

<!-- Facebook Meta Tags / 페이스북 오픈 그래프,카카오톡 방식과 동일 -->
<meta property="og:url" content="https://www.test.net">
<meta property="og:type" content="test">
<meta property="og:title" content="Daum">
<meta property="og:description" content="설명">
<meta property="og:image" content="https://picsum.photos/id/237/200/300">

<!-- Twitter Meta Tags / 트위터 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="제목">
<meta name="twitter:description" content="설명">
<meta name="twitter:image" content="https://picsum.photos/id/237/200/300">

<!-- Google / Search Engine Tags / 구글 검색 엔진 -->
<meta itemprop="name" content="이름">
<meta itemprop="description" content="설명">
<meta itemprop="image" content="https://picsum.photos/id/237/200/300">

카카오톡 적용시 주의할점

  • 메타태그 수정시 https://developers.kakao.com/tool/clear/og 에서 캐시를 삭제해야 카카오톡에 즉시반영.아니면 업데이트후 수 시간 걸림

  • og:url 태그에 다른 주소를 설정하면, 해당 주소를 스크랩 합니다. 호출 주소와 동일한 주소로 설정하거나 og:url 태그를 제거한다.

  • 웹 서비스가 80,443 포트에서 동작하고 있는지 확인한다. 보안상의 이유로 80,443 포트만 스크랩을 허용함.

  • 웹 서버에 요청시 응답코드로 200 OK가 잘 나오고 있는지 확인. 웹 브라우져에서 테스트할 경우 301,302 응답은 알 수 없으니 curl 이나 다른 REST 툴을 이용하시는게 좋다.

  • 200 OK 가 나오지 않을 경우 웹서버에서 user-agent 등을 검사하는 부분이 없는지 확인. 스크랩봇은 facebookexternalhit/1.1;kakaotalk-scrap/1.0 user-agent 를 사용.
    위의 방법으로 200 응답(response)이 나오더라도 JavaScript나 meta 태그를 사용함으로써 다른 페이지로 이동시키는 부분이 없는지 확인. 이렇게 페이지 내에서 redirection 이 발생하면 스크랩이 올바르게 되지 않음. 스크랩용 html 태그들을(og:url 등의 태그) redirection 을 발생시키는 페이지에도 삽입해주면 스크랩이 잘 동작.

  • 웹 서버에 요청 후 받은 reponse의 HTTP header에 content-type 이 올바른지 확인. content-type:text/html 으로 되어있지 않은 경우 스크랩이 안될 수 있음.

웹서비스가 8080포트로 동작하고 있다면 ngingx,apache등을 통해 리버스 프록시로 80/443포트로 들어오도록 설정한다.

profile
내가 볼려고 만든 블로그

0개의 댓글