메타태그
웹 페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보(메타데이터)를 명시하기 위한 목적으로 사용되는 HTML 태그이다.
메타데이터가 뭔데?
데이터를 설명하는 데이터. 즉, HTML 데이터를 설명하는 데이터
좀 더 자세할게 알고 싶다면 다름 링크에서 확인해보자.
https://www.oracle.com/kr/big-data/data-catalog/what-is-a-data-catalog/
메타데이터의 용도
- 구글 검색 페이지에 사이트 설명을 입력해줄 수 있다.
- 페이스북, 카카오, 트위터 등의 SNS 공유시 미리보기
웹 페이지에 설정하는 메타 태그
<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" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있다.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있다.
크롤러? 색인?
사이트를 설명하는 데 사용하는 메타 태그
- 구글 검색 결과, 사이트 설명에 사용
<title>코드잇 | 코딩, 쉬워질 때도 됐다</title>
<meta name="description" content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!">- SNS 공유할 때 링크 미리 보기에 사용
- 페이스북
<meta property="og:image" content="/static/images/brand/og_tag.png">
<meta property="og:title" content="코드잇 | 코딩, 쉬워질 때도 됐다">
<meta
property="og:description"
content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
>
<meta property="og:url" content="https://www.codeit.kr">- 트위터
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/static/images/brand/og_tag.png">
<meta
name="twitter:title"
content="JavaScript 프론트엔드 개발자 - 커리어 강의 | 코드잇"
>
<meta
name="twitter:description"
content="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..."어떻게 사용해야 할까?
메타 태그의 특성
메타 태그에 name으로 설정 가능한 값들
메타 태그 설정 시 주의사항
동적인 OG 태그(Twitter 태그도 동일)
<head>
<meta property="og:title" content={data?.title}>
</head>웹 페이지 데이터 요청 시 HTML이 최초로 만들어지고 난 뒤, 추가로 데이터를 요청하고 받아와서 동적으로 OG 태그를 만드는 것은 불가능하다. 그래서 data?.title 에 해당하는 데이터를 먼저 받고 나서 HTML을 생성해야 한다. 이를 위해서 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달하거나, 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법이 있다.
