META OG TAG (정리)

META TAG 란?

META TAG 는 HTML 문서의 내용, 설명, 누가 만들었는지등의 HTML문서를 설명 하는 태그를 말합니다.

OG TAG 란?

SNS나 메신저에 링크를 공유 할때 미리 보기 화면이 나오는데, 그 미리보기 화면을 설정 할 수 있게 해줍니다.

그럼 바로 예시를 보여 드리죠

<meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.5, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta property="og:url" content="http://home.bbwithu.com">
  <meta property="og:title" content="제목">
  <meta property="og:type" content="타입">
  <meta property="og:image" content="이미지URL">
  <meta property="og:description" content="설명">

 

위에 보이는 소스 처럼

<meta property="og:타입" content="값">

메타 태그 설정 하고자 하는 타입을 지정 해주고 content 속성에 타입에 해당되는 값을 넣어주면 됩니다.

가장 중요한 포인트:

각 메신저나 SNS마다 메모리 공간 절약과 빠른 제공을 위해 캐시에 데이터를 저장 해놓습니다.

따라서 개발 소스에 Meta Tag를 수정하여도 바로 적용되지 않습니다.

캐시가 업데이트 될 때 변경된 내용이 적용 됩니다.

적용 되는 시간은 각 메신저나 SNS마다 다르며 짧게는 몇 시간에서 길게는 하루 이상이 걸릴 수 있습니다.