안녕하세요 나리보스입니다 :)

최근 단톡방에서 공유받는 URL들을 보면서 메타태그에 대해 모르시거나 어려워 하시는 분들을 위해  쉽게 이해하실 수 있게 정리를 해봤습니다.

웹사이트나 랜딩 등 헤더(header) 라는 부분을 들어보셨을테죠

그부분에 속한 태그중 한가지가 메타태그 입니다.

html 파일을 하나 만들어 보았습니다.

title에 Document라는 텍스트가 있습니다.

이렇게 되어져 있는 페이지를 공유할때 카카오톡에서 어떻게 보여질까요?

title 부분에 들어간 텍스트가 제목으로 보여집니다 :)

이 부분을 간단하게 수정해 보겠습니다.

title 부분에 Document 대신 '메타태그' 라는 텍스트가 들어갔습니다.

수정 후 카카오톡에서는 어떻게 보여질까요?

제목 부분에 '메타태그' 라는 텍스트가 들어가져서 보여집니다.

이때 이미지도 하단 설명도 보이지가 않네요.

그렇다면 아이보스는 공유할때 어떻게 보여질까요?

타이틀과 이미지 설명까지 예쁘게 보여집니다 :)

아이보스 소스를 보면 다양한 메타태그들이 있습니다.

여기서 이미지와 타이틀 하단 설명을 제가 만든 파일에 붙여보도록 하겠습니다.

이렇게 메타태그를 설정하게 되면 어떻게 보여질까요?

짠 아이보스와 동일하게 메타태그가 나옵니다 :)

페이스북에서는 어떻게 나올까요?

역시나 이쁘게 태그가 설정되어 나옵니다 

꼭 확인해야되는 메타태그중 3가지를 알려드리겠습니다.

사이트를 제작하고 운영하며 놓칠 수 있는 부분 꼭 확인해 보세요 :) 

★TIP ★

메타 태그를 수정해도 카카오톡에서 반영이 안됩니다ㅠㅠ

그럴땐

https://developers.kakao.com/docs/cache 

이곳에서 URL 입력 후 캐시를 삭제해 주세요 :D