[HTML] META 태그

- Meta태그란

  - 문서의 정보를 설명하는 HTML head 태그 사이에 위치하는 태그

  - 언어셋 설정, 렌더링, 뷰포트, SEO 최적화 등을 설정할 수 있는 태그

 

- Meta 태그 기본 구조

  - <meta />

 

- Meta 태그의 속성

  - http-equiv : 웹 브라우저가 서버에 명령을 내리는 속성이며 name을 대신해서 사용이 가능

                         웹 서버에 전송 시에 의미를 가짐

  - content : meta 정보의 내용을 가짐

  - name : meta 정보의 이름을 지정을 할 수 있으며, 설정하지 않을 시에 http-equiv와 같은 기능

 

- 주로 쓰이는 Meta 속성

  - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    -> 문자 인코딩을 설정하는 태그

  - <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

    -> 웹 브라우저의 호환성을 설정하는 태그

       - IE=edge : IE 8 이상을 호환하는 설정하는 태그(권장)

  - <meta name="viewport" content="width=device-width, inital-scale=1.0,user-scalable=yes" />

    -> 모바일에서 최적화를 위한 Meta 태그

        - width = "device-width" : 디바이스 너비에 만큼 자동으로 너비를 설정

        - inital-scale = 1.0 : 확대/축과가 되지 않고 원래 값으로 설정, 0~10 사이의 값을 가짐

        - user-scalable = yes : 화면 축소 가능 여부를 설정이 가능

 

 - 검색엔진 최적화(SEO)

    - 검색 결과를 상위 노출 할 수 있도록 설정

  1. 홈페이지 키워드 설정

    - <meta name="keywords" content="키워드1, 키워드2, 키워드3...">

  2. 홈페이지 설명 설정

    - <meta name="description" content="설명.....">

   3. 로봇 설정

    - <meta name="robots" content="index, follow"> -> 기본 설정

      - index : 해당 페이지를 수집 대상으로 설정

      - follow : 해당 페이지를 포함한 링크가 되어 있는 페이지를 수집 대상으로 설정