[HTML&CSS] html meta요소 알아보기

<meta name="keywords" content=""> : 이 웹페이지에서 대표되는 키워드를 나열하는 메타태그. 구글 검색엔진에서는 keyword는 검색요소로 포함을 안한다고 함.

<meta name="keywords" content="">

<meta name="description" content=""> : 웹페이지의 설명을 적어놓는 메타태그. 구글 검색엔진에서 이 메타태그 요소를 고려한다고 함. 꼭 쓰면 좋은 메타태그

▶https://support.google.com/webmasters/answer/35624?hl=ko

<meta name="description" content="">

<meta name="author" content=""> : 웹페이지의 저작자를 적음

<meta name="author" content="">

<meta name="generator" content=""> : 웹페이지를 만들 때 사용했던 프레임워크(bootstrap, wordpress)

<meta name="generator" content=""> 

<meta name="robots" content=""> : 검색 로봇이 웹사이트 정보를 수집할 때 참고하는 정보. content에는 index와 follow, all, nofollow, noindex, none 값이 포함될 수 있다.

• index : 웹사이트의 내용을 검색허용하여 로봇이 이 페이지를 인덱싱할 수 있도록 허용하는 속성
• follow : 웹사이트의 링크된 내용까지 로봇이 인덱싱할 수 있도록 허용하는 속성
• all : index, follow 모두 포함
• nofollow : 링크된 내용을 인덱싱하는 것을 허용하지 않음
• noindex : 현재 웹페이지 내용을 허용하지 않음
• none : nofollow와 nofollow 모두 포함

보통은 robot.txt 파일을 통해서 위 정보들을 기입함.

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

og : 카카오톡이나 sns에 웹사이트의 url정보를 보낼 때, url의 썸네일을 대표하는 정보를 제공하는 메타태그. 웹사이트가 런칭되고 서비스를 제공할 때 쓰면 좋음

<meta property="og:title" content="페이지제목"> : 이미지 밑에 제목으로 표시될 내용

<meta property="og:url" content="사이트주소"> : 그 사이트 주소

<meta property="og:image" content="띄울이미지"> : 썸네일 이미지

<meta property="og:type" content="website"> : 웹사이트를 나타냄

<meta property="og:description" content="사이트설명"> : 사이트에 대한 설명

<meta property="og:title" content="페이지제목">
<meta property="og:url" content="사이트주소">
<meta property="og:image" content="띄울이미지">
<meta property="og:type" content="website">
<meta property="og:description" content="사이트설명">

<meta http-equiv="refresh" content="3; url=http://google.com/"> : 사이트에 접속할 시 다른 웹사이트로 일정시간 이후에 이동할 정보를 기입하는 메타태그. url은 이동할 웹사이트 여기서는 구글 사이트, 바로 옆에 3은 3초 후에 사이트를 이동하는 것을 나타낸다.

<meta http-equiv="refresh" content="3; url=http://google.com/">

<meta name="viewport" content="width=device-width,initial-scale=1"> : 모바일에서 반응형 웹페이지를 만들 때, 디바이스의 크기에 맞게 웹사이트의 크기를 조정하는 정보를 기입하는 메타태그

<meta name="viewport" content="width=device-width,initial-scale=1">