Recommended Minimum
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 위의 3 가지 메타 태그는 *반드시* head 내에 먼저 있어야합니다. 다른 head 내용은 이 태그 *뒤에* 와야합니다. -->
<title>Page Title</title>- meta charset : 웹 사이트의 인코딩을 정의합니다. utf-8이 표준입니다.
- meta name = "viewport" : 모바일 반응과 관련된 뷰포트 설정
- width = device-width : 모바일 친화적 인 페이지에 적합한 장치의 물리적 너비 (축소 대신)를 사용함을 의미합니다.
- initial-scale = 1 : 초기 확대 / 축소, 1은 확대 / 축소 없음을 의미합니다.
Elements
유효한
<head>요소를 포함 meta, link, title, style, script, noscript,와 base.이러한 요소는 웹 기술에서 문서를 인식하고 렌더링하는 방법에 대한 정보를 제공합니다. 예 : 브라우저, 검색 엔진, 봇 등
<!-- 문서 제목 -->
<title>Page Title</title>
<!-- 문서 내에 포함 된 모든 상대 URL에 사용될 기본 URL -->
<base href="https://example.com/page.html">
<!-- 외부 CSS -->
<link rel="stylesheet" href="styles.css">
<!-- 내부 CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--no JS alternative--></noscript>Meta
<meta charset="utf-8"> <!-- set character encoding for the document -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 위의 3 가지 메타 태그는 *반드시* head 내에 먼저 있어야합니다. 다른 head 내용은 이 태그 *뒤에* 와야합니다. -->
<!-- 리소스가 로드되는 위치를 제어할 수 있습니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 가능한 한 문서의 초기에 배치하십시오. -->
<!-- 이 태그 아래의 컨텐츠에만 적용됩니다. -->
<!-- 웹 응용 프로그램의 이름 (웹 사이트가 응용 프로그램으로 사용되는 경우에만 사용해야 함.) -->
<meta name="application-name" content="Application Name">
<!-- 페이지에 대한 간단한 설명 (최대 150 자) -->
<!-- *일부 상황*에서는 이 설명이 검색 결과에 표시된 스니펫의 일부로 사용됩니다. -->
<meta name="description" content="A description of the page">
<!-- 검색 엔진 크롤링 및 색인 생성 동작 제어 -->
<meta name="robots" content="index,follow,noodp"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<!-- Google에 '사이트 링크 검색 창 표시 안함'을 알림 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 이 페이지에 대한 번역을 제공하지 않도록 Google에 알립니다. -->
<meta name="google" content="notranslate">
<!-- Google Search Console의 소유권 확인 -->
<meta name="google-site-verification" content="verification_token">
<!-- 웹 사이트 구축에 사용 된 소프트웨어의 이름을 짓는 데 사용됩니다. (예 : WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- 사이트 주제에 대한 간략한 설명 -->
<meta name="subject" content="your website's subject">
<!-- 매우 짧은 (10 단어 이하) 설명. 주로 학술 논문 용 -->
<meta name="abstract" content="">
<!-- 전체 도메인 이름 또는 웹 주소 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 사이트 콘텐츠를 기준으로 일반 연령 등급 부여 -->
<meta name="rating" content="General">
<!-- 리퍼러(referrer) 정보 전달 방법을 제어 할 수 있습니다. -->
<meta name="referrer" content="no-referrer">
<!-- 가능한 전화 번호의 자동 감지 및 형식을 사용하지 않도록 설정합니다. -->
<meta name="format-detection" content="telephone=no">
<!-- 'off'로 설정하여 DNS 프리 패치를 완전히 선택 해제합니다. -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 클라이언트 식별을 위해 클라이언트 웹 브라우저에 쿠키를 저장합니다. -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 특정 프레임에 표시 할 페이지를 지정합니다. -->
<meta http-equiv="Window-Target" content="_value">
<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 국가 코드 (ISO 3166-1): 필수, 주(state) 코드 (ISO 3166-2): 선택; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->Meta: 권장하지 않는 사항
다음은 채택률이 낮거나 권장되지 않는 메타 속성입니다.
<!-- 문서 언어를 선언하는 데 사용되지만 잘 지원되지는 않습니다. <html lang="">를 사용하는 것이 더 낫습니다. -->
<meta name="language" content="en">
<!-- Google은 Bing을 스팸의 지표로 간주합니다. -->
<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">
<!-- 어떤 검색엔진이든 사용하지 않습니다. -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
<!-- 스팸 봇이 이메일 주소를 쉽게 수집 할 수있는 방법 제공합니다. -->
<meta name="reply-to" content="email@example.com">
<!-- <link rel = "author"> 또는 humans.txt 파일을 사용하는 것이 더 좋습니다. -->
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
<meta name="owner" content="">
<!-- 검색 봇에게 일정 기간 후에 페이지를 다시 방문하도록 지시합니다. 대부분의 검색 엔진이 웹 페이지를 다시 크롤링 할 때 임의의 간격을 사용하기 때문에 이 기능은 도움이 되지 않습니다. -->
<meta name="revisit-after" content="7 days">
<!-- 일정 시간이 지나면 사용자를 새 URL로 보냅니다. -->
<!-- W3C는 이 태그를 사용하지 않을 것을 권하며, 대신 서버 측에서 301 리디렉션을 사용하는 것을 권합니다. -->
<meta http-equiv="refresh" content="300; url=https://example.com/">
<!-- 웹 사이트의 주제를 설명합니다. -->
<meta name="topic" content="">
<!-- 웹 사이트의 회사 또는 목적에 대한 간략한 요약 -->
<meta name="summary" content="">
<!-- keywords 메타 태그와 기능이 동일하여 사용되지 않는 태그 -->
<meta name="classification" content="business">
<!-- URL과 같은 기능입니다. 오래 되었으며, 지원되지 않습니다. -->
<meta name="identifier-URL" content="https://example.com/">
<!-- keywords 태그와 유사한 기능 -->
<meta name="category" content="">
<!-- 웹 사이트가 모든 국가 및 언어로 표시되는지 확인합니다. -->
<meta name="coverage" content="Worldwide">
<!-- coverage 태그와 동일합니다. -->
<meta name="distribution" content="Global">
<!-- 인터넷에서 어떤 사용자가 액세스 할 수 있는지 제어합니다. -->
<meta http-equiv="Pics-label" content="value">
<!-- 케시 컨트롤 -->
<!-- 케시 컨트롤은 서버사이드에서 컨트롤하는 것이 더 낫습니다. -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">Link
<!-- 중복되는 콘텐츠 문제들을 방지합니다. -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
<!-- 이전에는 아이콘 링크 앞에 포함되었지만 더 이상 사용되지 않습니다. -->
<link rel="shortlink" href="https://example.com/?p=42">
<!-- 현재 문서의 AMP HTML 버전에 대한 링크 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- CSS 스타일 시트를 가리킨다. -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- 웹 응용 프로그램과 관련된 정보를 담고있는 JSON 파일에 대한 링크 -->
<link rel="manifest" href="manifest.json">
<!-- 문서 작성자에 대한 링크 -->
<link rel="author" href="humans.txt">
<!-- 링크 컨텍스트에 적용되는 저작권 선언문을 나타냅니다. -->
<link rel="copyright" href="copyright.html">
<!-- 문서가 다른 언어를 통해 컨텐츠를 제공할 시 다른 언어로 된 문서의 위치에 대한 참조를 제공합니다. -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 저자 또는 다른 사람에 대한 정보 제공 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 현재 문서에 대한 아카이브 링크가 포함 된 문서의 링크를 제공합니다. -->
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">
<!-- 계층 구조에서 최상위 리소스에 대한 링크 -->
<link rel="index" href="https://example.com/" title="DeWitt Clinton">
<!-- 문서의 시작점을 지정합니다. -->
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
<!-- 현재 문서가 위치해있는 시퀀스의 이전 리소스로 연결됩니다. -->
<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
<!-- 자체 참조 제공 - 문서에서 여러 참조가 있는 경우 유용합니다. -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
<!-- 일련의 문서를 정의 (첫 번째, 다음, 이전 및 마지막 문서) -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="previous" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">
<!-- 타사 서비스를 사용하여 블로그를 관리 할 때 사용됩니다. -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- 다른 WordPress 블로그가 귀하의 WordPress 블로그 또는 게시물에 링크되면 자동으로 주석을 사용합니다. -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- 사이트에서 링크 할 때 URL에 알립니다. -->
<link rel="webmention" href="https://example.com/webmention">
<!-- 외부 HTML 파일을 현재 HTML 파일에서 로드합니다. -->
<link rel="import" href="component.html">
<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds(구독) -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->Icons
<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->
<!-- Icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">Facebook Open Graph
Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. More about Facebook Open Graph Markup
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">Twitter Card
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. More about Twitter Cards
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">Twitter Privacy
If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. More about Twitter privacy options.
<!-- disallow Twitter from using your site's info for personalization purposes -->
<meta name="twitter:dnt" content="on">Browsers / Platforms
Apple iOS
<!-- 스마트 앱 배너 -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 가능한 전화 번호의 자동 감지 및 형식을 사용하지 않도록 설정합니다. -->
<meta name="format-detection" content="telephone=no">
<!-- 홈 스크린에 추가합니다. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Title">
<!-- 터치 아이콘 -->
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
<!-- iOS 8+ no longer support precomposed, only apple-touch-icon is required -->
<!-- 대부분의 경우, `head`에 있는 180x180x 크기의 터치 아이콘 하나로 충분합니다. -->
<!-- 당신이 유일한 아이콘을 원한다면 다른 아이콘 크기를 활용하십시오. -->
<!-- 디바이스에 의해 결정됩니다. -->
<link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">
<!-- Startup Image ( 더 이상 사용되지 않음 ) -->
<link rel="apple-touch-startup-image" href="path/to/startup.png">
<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">Google Android
<meta name="theme-color" content="#E64545">
<!-- 홈 스크린에 추가합니다. -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 자세한 내용: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">Google Chrome
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
<!-- 번역 프롬프트 사용 중지 -->
<meta name="google" value="notranslate">Microsoft Internet Explorer
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Windows Phone에서 IE 10의 링크 강조 표시 비활성화 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
<meta name="application-name" content="Contoso Pinned Site Caption">
<meta name="msapplication-tooltip" content="Example Tooltip Text">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-allowDomainApiCalls" content="true">
<meta name="msapplication-allowDomainMetaTags" content="true">
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
<meta name="msapplication-square150x150logo" content="path/to/logo.png">
<meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
<meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
<meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
<meta name="msapplication-task-separator" content="1">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
<meta name="msapplication-window" content="width=1024;height=768">