메타태그
1. 메타태그
[메타태그란?(1)]
- 뜻
: <meta> 로 작성하는 HTML 태그로 메타데이터로써 데이터를 설명하는 데이터를 말함
- 특징
: <head> 안에 문서를 설명하는 <meta> 를 넣습니다. 메타 태그는 닫는 태그가 없음
[메타태그 사용예시1(2)]
1)웹페이지에 설정하는 메타태그
: 한 번 설정하면 변경할 일이 거의 없는 것한 번 설정하면 변경할 일이 거의 없는 것
<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" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.[메타태그 사용예시2(3)]
2)사이트를 설명하는 데 사용하는 메타 태그
: 사이트 설명 또는 링크 미리 보기에서 보는 이미지와 설명에 필요, name과 content를 이용해 표시
- 구글
- 페이스북
- OG 태그는 아래와 같이 사용하고, OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta property="og:OOO" content="XXXX">
- 트위터
- Twitter 태그도 아래와 같이 OOO자리에는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta name="twitter:OOO" content="XXXX" >
