<head>안에 들어갈 수 있는 것들
본문
웹문서중 <head>안에 들어갈 수 있는 내용이 계속 늘어나고 있습니다.
웹문서 검색엔진 최적화(SEO)를 위해 계속 관심을 가질 필요가 있습니다.
기본사항
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>페이지제목</title>
요소 기본 순서
- <meta>
- <title>
- <link>
- <style>
- <script>
Meta 들어가는 것들
<!-- 웹문서 인코딩 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 리소스가 로드 되는 위치를 제어할 수 있습니다. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 웹 응용 프로그램의 이름 -->
<meta name="application-name" content="웹학교">
<!-- 페이지에 대한 간단한 설명 (최대 150 자) -->
<meta name="description" content="ReactJS를 포함한 프로그래밍 강좌를 제공합니다.">
<!-- 검색 엔진 크롤링 및 색인 생성 동작 제어 -->
<!-- All Search Engines -->
<meta name="robots" content="index,follow,noodp">
<!-- Google Specific -->
<meta name="googlebot" content="index,follow">
<!-- Google에 '사이트 링크 검색 창 표시 안함'을 알림 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 이 페이지에 대한 번역을 제공하지 않도록 Google에 알립니다. -->
<meta name="google" content="notranslate">
<!-- Google Search Console의 소유권 확인 -->
<meta name="google-site-verification" content="verification_token">
<!-- 웹 사이트 구축에 사용 된 소프트웨어의 이름을 짓는 데 사용됩니다. -->
<meta name="generator" content="그누보드5">
<!-- 사이트 주제에 대한 간략한 설명 -->
<meta name="subject" content="웹프로그래밍 강좌">
<!-- 매우 짧은 (10 단어 이하) 설명. 주로 학술 논문 용 -->
<meta name="abstract" content="">
<!-- 전체 도메인 이름 또는 웹 주소 -->
<meta name="url" content="https://365ok.co.kr/">
<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]">
<meta name="geo.placename" content="city/town">
Link(icon) 들어가는 것들
<!-- IE 11, Chrome, Firefox, Safari, Opera의 경우 -->
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">
<!-- 모든 경우의 favicon을 만들 때 https://realfavicongenerator.net/ -->
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">
Facebook / Open Graph
<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:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
Facebook / Instant Articles
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- 아티클의 웹 버전 URL -->
<link rel="canonical" href="http://example.com/article.html">
<!-- 이 아티클에 사용할 스타일 -->
<meta property="fb:article_style" content="myarticlestyle">
<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">
Google+ / Schema.org
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
OEmbed
<link rel="alternate" type="application/json+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
title="oEmbed Profile: XML">
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">
Apple Safari
<!-- Pinned Site -->
<link rel="mask-icon" href="path/to/icon.svg" color="red">
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">
Google Chrome Mobile (Android Only)
<!-- `manifest`에 연결하고 `manifest` 메타 데이터를 정의합니다. -->
<!-- manifest.json의 예는 아래 링크에서 찾을 수 있습니다. -->
<link rel="manifest" href="manifest.json">
<!-- 웹 페이지를 웹 앱으로 정의하십시오. -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 첫 번째 공식 권장 형식입니다. -->
<link rel="icon" sizes="192x192" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png">
<!-- Apple 접두어가 붙은 형식은 더 이상 사용되지 않습니다. -->
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
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">
App Links
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- 자세한 내용: http://applinks.org/documentation/ -->
중국 브라우저 관련
360 Browser
<!-- 렌더링 엔진을 순서대로 선택 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
QQ Mobile Browser
<!-- 화면을 지정된 방향으로 잠급니다. -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 이 페이지를 전체 화면으로 보여줍니다. -->
<meta name="x5-fullscreen" content="true">
<!-- 페이지가 "응용 프로그램 모드"로 표시됩니다. (전체 화면 등) -->
<meta name="x5-page-mode" content="app">
UC Mobile Browser
<!-- 화면을 지정된 방향으로 잠급니다. -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 이 페이지를 전체 화면으로 보여줍니다. -->
<meta name="full-screen" content="yes">
<!-- '텍스트 모드'인 경우에도 UC 브라우저는 이미지를 표시합니다. -->
<meta name="imagemode" content="force">
<!-- 페이지가 "응용 프로그램 모드"로 표시됩니다. (전체 화면, 제스처 금지 등) -->
<meta name="browsermode" content="application">
<!-- 이 페이지에서 UC 브라우저의 "야간 모드"를 비활성화합니다. -->
<meta name="nightmode" content="disable">
<!-- 데이터 전송을 줄이기 위해 페이지를 단순화합니다. -->
<meta name="layoutmode" content="fitscreen">
<!-- UC 브라우저의 "이 페이지에 단어가 많은 경우 글꼴 크기 조정"기능을 비활성화합니다. -->
<meta name="wap-font-scale" content="no">
구글/네이버 구조화 데이타
예:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "웹학교",
"url": "https://365ok.co.kr",
"sameAs": [
"https://www.youtube.com/c/homepageschool",
"https://tv.naver.com/homepageschool/",
"https://tv.kakao.com/channel/2886987"
]
}
</script>
검색엔진 구조화 데이타는 다양한 분류가 있습니다.
- 이전글RESTful API에 ReactJS 관리 GUI를 추가하십시오. 19.10.11
- 다음글HTML5 Canvas Cheat Sheet 19.10.11