메타 태그(메타 데이터) 살펴보기

🎀 메타 태그란?

<meta> 태그는 웹 페이지에 대한 정보를 나타내어 준다.
웹 페이지에 시각적으로 보이지는 않고 검색 엔진이나 크롤링 할 때 수집된다.
이 때 수집된 정보로 검색 엔진이 웹 페이지의 검색 결과 순위를 매기기도 한다.(SEO 검색 엔진 최적화)

• 사용자가 검색엔진에서 찾고 있는 것을 찾을 수 있도록 도와준다.
• 사용자가 웹사이트를 방문할지 여부를 결정하게 만드는 첫 번째 요소다.
• 선택한 주제, 검색어와 키워드에 대해 페이지 순위가 더 높게 설정되도록 도와준다.

🎀 메타 태그 종류

<meta charset="utf-8">

HTML 문서의 문자 인코딩을 utf-8로 지정한다.
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 함.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">

• name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있다.
• width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.
• initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정한다.
• minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아준다.
• maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아준다.
• user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아준다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드

<meta name="robots" content="noindex">

name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있다.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않는다. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있다.

<meta
    name="description"
    content="파격적인 가격의 상품만 가득한 쇼핑몰"
>

웹 사이트를 설명한다

👇🏼👇🏼
아래 링크에서 open graph 태그 (페이스북 미리보기) 사용법을 확인해 보세요.
https://velog.io/@ooo3289/open-graph-태그-링크-미리보기-설정-meta-태그