[#TIL] 간과할 수 있는 META TAG

meta tag (메타 태그)
HTML에 적용되는 특성, 기본정보를 작성하는 태그이다.

<meta charset="UTF-8">
<meta 
	name="viewport" 
	content="width=device-width, 
    initial-scale=1.0"
    />

<meta charset="UTF-8" />
→ 5초 있다가 링크로 향하는 
다양한 다국어를 입력하는 방식 
charset 글자집합(uni = universal)
    
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="author" content="choi">
<meta name="reply-to" content="eyewhy@naver.com">
<meta name="generator" content="notepad++">
<meta name="date" content="2015-01-03ㅆ09:00+09:00">
<meta name="copyright" content="(c)2021 choi">

→ 5초 있다가 다음사이트 링크로 향하는
<meta 
	http-equiv="refresh" 
    content="5,
	url='http://www.daum.net' " 
    />


<meta name="keywords" content="galaxy, s8, 스마트폰, 삼성폰">
→ exo, bts 가 콘텐츠에 넣으면 
품질지수가 떨어져서 keyword 남용(abusing) 하면 검색이 안됨

<meta name="description" content="카메라 성능이 향상된 galaxy s8">

<meta name="robots" content="all">
→ content는 
모두 따가라 index, follow  / 
수집하지마 noindex,nofollow = none / 
robots 권고사항 robots /


<meta name="robots" content="ALL"> 
→ 모든 로봇의 방문을 허용

<meta name="robots" content="googlebot"> 
→ 구글로봇만 방문 허용

<meta name="robots" content="none"> 
→ 로봇방문을 허용하지 않음


<meta 
	name="viewport" 
    content="width=device-width, 
    initial-scale=1.0, 
    minimum-scale=1.0, 
    maximum-scale=1.0, 
    user-scalable=yes , 
    viewport-fit=cover"
    >
→ 
반응형 창 자체 / 
사용자 디바이스 너비를 맞춰라, 
그러되 초기의 스케일을 100퍼센트로, 화면에 딱맞춰라 / 
width=320 320px 너비에 기기에서만 
최적화 콘텐츠가 320일 시 무조건 뷰포트를 320에 맞춰라

OG (Open Graph)
사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성

<!-- 필수는 og 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

<!--Naver 블로그, 카카오톡 미리보기 설정-->
<meta property="og:title" content="콘텐츠 제목" /> 
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" /> 
<meta property="og:title" content="웹사이트 이름" /> 
<meta property="og:description" content="웹페이지 설명" />

출처 : https://seons-dev.tistory.com/entry/html-Meta-OG