정보실

웹학교

정보실

html <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>


요소 기본 순서

  1. <meta>
  2. <title>
  3. <link>
  4. <style>
  5. <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">


Twitter


<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&amp;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&amp;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>


검색엔진 구조화 데이타는 다양한 분류가 있습니다.


페이지 정보

조회 101회 ]  작성일19-10-11 16:11

웹학교