메타 태그에 대해 알아보자
By Sera on
검색 엔진 마케팅을 위해 필요한 것은? 바로 메타 태그이다. 그 외에도 웹페이지의 올바른 메타 태그로 인해 문서의 대략적인 내용을 알 수가 있으니 이보다 중요한 것은 없다. 메타 태그의 종류는 다양하지만, 이번 장에서는 자주 쓰는 메타 태그와 어떻게 사용해야 하는지 알아보자.
검색 엔진
<meta name="robots" content="noindex, nofollow" />
- noindex : 검색 결과에 현재 페이지를 표시 하지 않는다.
- nofollow : 현재 페이지의 링크를 따라가지 않는다.
- noarchive : 검색결과에 저장된 페이지 링크를 표시하지 않는다.
- All(기본값) : 색인 생성, 게재에 제한이 없다
- Non : noindex, nofollow와 같다
- index : 수집대상으로 한다.
- Follow : 링크가 걸린 곳을 수집대상으로 한다.
X-UA-Compatible (브라우저 호환성)
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
5초 뒤에 다른 페이지로 이동
<meta http-equiv="refresh" content="5;url=http://www.naver.com">
모든 디바이스에서 사이트가 잘 보이도록 뷰포트 설정
- content=”width=device-width” 웹페이지의 가로를 모바일 가로사이즈에 맞춘다
- initial-scale=1 화면을 초기화 할 때 배율
- maximum-scale=1 손가락을 핀치하여 화면 확대. (1=확대X, 2=두 배 확대, 3=세 배 확대)
- minimum-scale=1 손가락 핀치하여 화면 축소. (1=축소X, 0.5=50% 축소)
- user-scalable=no 확대/축소 가능 여부. (maximum-scale=2, minimum-scale=0.5로 해놓고 user-scalable=no 하면, 확대 안되니 주의바람)
- target-densitydpi=medium-dpi 안드로이드의 경우 사이트가 어떤 화면크기에 맞추어 개발되었는지를 명시.
사용자가 뷰포트를 확대/축소 하는것을 막는 것은 개인적으로 별로 좋아하지 않는다. 나이 드신 분들은 어떻게 보라고! 늬들은 나이 안 먹냐!
그래서 디자인에 화면 확대/축소(+/-)기능이 없는 경우에는 뷰포트 확대를 넣는다. 반응형 웹에서 핀치를 잘못하면 레이아웃이 깨질 가능성이 있으니 되도록이면 디자인에 화면 확대/축소 기능을 넣고 있다.
특히, 반응형 웹을 할 경우에는 무조건 뷰포트 설정을 해줘야 한다. 그렇지 않을 경우 피씨 화면이 모바일에서 그대로 보이게 되어 몽골인만 볼 수 있는 글씨 크기로 변한다.
<!DOCTYPE html>
<html lang="ko"><!--문서의 언어. 국문(ko), 영문(en), 일문(ja), 중국(ch)-->
<head>
<meta charset = "UTF-8"><!--문자 인코딩-->
<meta name="author" content="문서의 저자">
<meta name="keywords" content="검색 엔진을 위한 키워드">
<meta name="description" content="검색 결과에 표시되는 웹 페이지에 대한 설명">
<meta name="Copyright" content="저작권">
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="Title" content="홈페이지 제목">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/script.js"></script>
</head>
<body>
<!--내용-->
</body>
</html>
내가 귀찮아서 그러는게 아니고, 그 외 필요한 메타 태그는 검색해서 사용하는 것이 좋다.
Explore more like this
브라우저에서 사용할 수 있는 사이즈는 뭐가 있을까?
2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고,...
CSS변수선언
변수는 대소문자를 구분하며 변수값은 하위 요소에 상속된다. CSS에서 변수를 선언할 때는 :root라는 가상선택자를 최상위 엘리먼트에 선언하여 모든 요소에서 변수를 사용할 수 있도록 한다.(대표적으로 부트스트랩) 각 요소에 변수를 지정해도 상관은 없지만,...