-
meta 태그 다른 설정 방법제로베이스스쿨 20기 2023. 11. 6. 16:05반응형
메타 태그(Meta tag)란?
하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다.
브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="메타태그 설명"> <meta property="og:type" content="웹페이지 종류 -website"> <meta property="og:title" content="웹페이지 제목"> <meta property="og:url" content="웹페이지의 URL"> <meta property="og:image" content="표시되는 이미지"> <meta property="og:description" content="웹페이지의 설명"> <title>meta tag</title> </head> <body> </body> </html>
메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다
http-equiv ="항목명" - 웹브라우저 서버에 명령을 내리는 속성
- name 속성을 대신해 사용할수 있음
- html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되어있을 때만 의미를 가짐
- content 속성의 정보, 값을 위한 HTTP header를 제공
- html4에서는 문자 설정을 할 때 사용했지만 html5에서는 문 설정 방법이 더욱 간단해졌content = "정보 값" - meta 정보의 내용을 지정
- name 속성과 http-equiv와 연관된 값을 준다name = "정보 이름" - 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능이 된다
메타 태그의 종류
검색 엔진에 의해 검색되는 단어를 지정합니다 meta name="Keywords" content="Web, html, 웹 표준" />. 검색 결과에 표시되는 문자를 지정합니다.meta name="Description" content="Web, html, 웹 표준" /> 검색 로봇 제어 <meta name="Robots" content="noindex, nofollow" /> noindex : 검색 결과에 이 페이지를 표시 하지 않는다. nofollow : 이 페이지의 링크를 따라가지 않는다. noarchive : 검색결과에 저장된 페이지 링크를 표시하지 않는다. All(기본값) : 색인 생성이나 게재에 대한 제한이 없다, 기본값이므로 명시적으로 표시해도 효과 없음 Non : noindex, nofollow와 같다 index : 그 페이지를 수집대상으로 한다. Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다. charset(문자 코드의 종류 설정) <meta charset="UTF - 8" /> Date (날짜- 제작일) <meta name="Date" content="2020-06-05T07:45:37+09:00" /> Content-Script-Type (웹페이지에 쓰인 언어) <meta http-equiv="Content-Script-Type" content="Text/javascript" /> X-UA-Compatible (브라우저 호환성) html<meta http-equiv="X-UA-Compatible" content="IE-edge" />Copy subject (홈페이지 주제 지정) html<meta http-equiv="Subject" content="기술블로그" />Copy title (제목) html<meta http-equiv="Title" content="HTML5 공부" />Copy Author (페이지 작성 제작자명) html<meta http-equiv="Author" content="인파_" />Copy Publisher (제작사) html<meta http-equiv="publisher" content="인파_" />Copy Other Agent (웹 책임자) html<meta http-equiv="Other Agent" content="인파_" />Copy Generator (제작 도구) html<meta http-equiv="Generator" content="Visual Studio Code" />Copy Reply-To / Email (메일 주소) html<meta http-equiv="Reply-To" content="test@gmail.com" /> <meta http-equiv="Email" content ="test@gmail.com" />Copy Filename (파일 이름) html<meta http-equiv="Filename" content="index.html" />Copy Location (위치) html<meta http-equiv="Location" content="위치" /> <meta name=”geo.region” content=”US-MN” /> <meta name=”geo.placename” content=”Minneapolis” /> <meta name=”geo.position” content=”44.980257;-93.270034″ /> <meta name=”ICBM” content=”44.980257, -93.270034″ />Copy Distribution(배포자) html<meta http-equiv="Distribution" content="name" />Copy Copyright (저작권) html<meta http-equiv="Copyright" content="인파_" />Copy Build (제작 년, 월, 일) html<meta http-equiv="Build" content="date" />Copy Last-Modified(제작 년, 월, 일) html<meta http-equiv="Last-Modified" content="Fri, 05 Jul 2020 19:40:40" />Copy imagetoolbar (그림 위 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기) html<meta http-equiv="imagetoolbar" content="no" />Copy Cache-Control / Pragma(캐쉬가 되지 않도록 하기) html<meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Pragma" content="no-chche" />Copy Expires (캐쉬 만료일) html<meta http-equiv="Expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />Copy Refresh (새로고침) html<!-- 60초 마다 새로고침한다! --> <meta http-equiv="refresh" content="60" />Copy Refresh (입력한 주소로 5초 후 이동) html<meta http-equiv="refresh" content="5; url = 주소" />Copy Page-Enter (페이지 들어갈 때 장면 전환 효과) html<meta http-equiv="refresh" content="revealtrans(Duration=1, Transition=12)" />참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN
HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
developer.mozilla.org
반응형'제로베이스스쿨 20기' 카테고리의 다른 글
[내돈내산] 제로베이스 프론트엔 스쿨 부트캠프 후기 (0) 2023.11.23 제로베이스 3~5주차 학습 요약 (0) 2023.11.07 Safari 브라우저에서 크로스 브라우징 하기 (0) 2023.11.06 제로베이스 프론트엔드 스쿨 20기 1개월차 후기 (0) 2023.10.31 HTML5 시멘틱 태그와 웹 표준을 지키는 이유 (0) 2023.10.28