수색…
소개
HTML 문서의 메타 태그는 설명, 키워드, 작성자, 수정 날짜 및 약 90 개의 다른 필드를 포함하여 문서에 대한 유용한 정보를 제공합니다. 이 항목에서는 이러한 태그의 용도와 용도에 대해 설명합니다.
통사론
-
<meta name="metadata name" content="value"> -
<meta http-equiv="pragma directive" content="value"> -
<meta charset="encoding label">
비고
메타 태그는 HTML 문서의 메타 데이터를 설정하는 데 사용되는 HTML 태그입니다. 메타 태그는 head 요소에 있어야합니다. 페이지에는 여러 개의 메타 태그가있을 수 있습니다.
메타 태그 keywords 는 일반적으로 로봇에서 사용되지 않습니다. 대부분의 검색 엔진은 웹 페이지의 콘텐츠와 맞는 키워드를 결정합니다. 즉, 키워드 메타 태그를 더 이상 포함하지 말아야한다는 내용은 없습니다.
페이지의 메타 데이터는 브라우저 (예 : 문서의 크기 조정) 및 검색 엔진 (Google, Yahoo !, Bing)에서 사용하는 웹 크롤링 스파이더에서 주로 사용됩니다.
이 스펙은 <meta name> 과 함께 사용되는 표준화 된 메타 데이터 이름 과 <meta http-equiv> 와 함께 사용하기위한 표준화 된 메타 데이터 프라그마 지시어 를 제공합니다. 그러나 인터넷을 통한 많은 서비스 (웹 크롤러, 저작 도구, 소셜 공유 서비스 등)는 메타 데이터의 일반적인 확장 점으로 <meta name> 형식을 사용합니다. 이 중 일부는 스펙의 wiki 페이지에 나열되어 있습니다.
문자 인코딩
charset 속성은 HTML 문서의 문자 인코딩을 지정하며 유효한 문자 인코딩 (예 : windows-1252 , ISO-8859-2 , Shift_JIS 및 UTF-8 )이 필요합니다. UTF-8 (유니 코드)은 가장 널리 사용되며 새로운 프로젝트에 사용해야합니다.
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
모든 브라우저는 항상 <meta charset> 양식을 인식하지만, 어떤 이유로 여러분의 페이지가 유효한 HTML 4.01이어야하는 경우 다음을 대신 사용할 수 있습니다.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
브라우저가 인식 할 수있는 모든 문자 인코딩 레이블을 보려면 인코딩 표준을 참조하십시오.
자동 새로 고침
5 초마다 페이지를 새로 고치려면 head 요소에 다음 meta 요소를 추가하십시오.
<meta http-equiv="refresh" content="5">
주의! 이것이 유효한 명령이지만 사용자 경험에 부정적인 영향을주기 때문에 사용하지 않는 것이 좋습니다. 페이지를 너무 자주 새로 고치면 페이지가 응답하지 않을 수 있으며 종종 페이지 상단으로 스크롤됩니다. 페이지의 일부 정보를 지속적으로 업데이트해야하는 경우 페이지의 일부만 새로 고침하여 훨씬 더 좋은 방법이 있습니다.
모바일 레이아웃 제어
일반적인 모바일 최적화 사이트는 다음과 같이 <meta name="viewport"> 태그를 사용합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport 요소는 사용중인 장치를 기반으로 페이지 크기 및 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.
위의 예에서, content="width=device-width 브라우저가 자신의 화면 폭에 페이지의 폭을 렌더링된다는 것을 의미합니다. 해당 화면 인 경우 그래서 480px wide 브라우저 창이 될 것입니다 480px wide . initial-scale=1 은 초기 줌 (이 경우 1은 줌을 의미하지 않음)을 나타냅니다.
이 태그가 지원하는 속성은 다음과 같습니다.
| 속성 | 기술 |
|---|---|
width | 장치의 가상 뷰포트의 너비입니다. 값 1 : 480 과 같이 device-width 또는 실제 너비 (픽셀 단위) |
height | 장치의 가상 뷰포트의 높이입니다. 값 2 : 600 과 같이 device-height 또는 실제 너비 (픽셀 단위) |
initial-scale | 페이지가로드 될 때의 초기 확대 / 축소입니다. 1.0은 확대 / 축소하지 않습니다. |
minimum-scale | 방문자가 페이지를 확대 할 수있는 최소 금액입니다. 1.0 은 확대 / 축소하지 않습니다. |
maximum-scale | 방문자가 페이지를 확대 할 수있는 최대 금액입니다. 1.0 은 확대 / 축소하지 않습니다. |
user-scalable | 장치가 확대 및 축소 할 수있게합니다. 값은 yes 또는 no 입니다. 아니요로 설정하면 사용자가 웹 페이지를 확대 할 수 없습니다. 기본값은 yes입니다. 브라우저 설정은이 규칙을 무시할 수 있습니다. |
노트:
1 width 속성은 픽셀 ( width=600 ) 또는 장치 화면의 물리적 너비를 나타내는 device-width ( width=device-width )로 지정 될 수 있습니다.
2 마찬가지로 height 속성은 pixels ( height=600 ) 또는 장치 화면의 물리적 높이를 나타내는 height=device-height device-height ( height=device-height )로 지정할 수 있습니다.
페이지 정보
application-name
페이지가 나타내는 웹 응용 프로그램의 이름을 제공합니다.
<meta name="application-name" content="OpenStreetMap">
웹 응용 프로그램이 아닌 경우 application-name 메타 태그를 사용하면 안됩니다.
author
페이지 작성자 설정 :
<meta name="author" content="Your Name">
단 하나의 이름 만 주어질 수 있습니다.
description
페이지 설명을 설정하십시오.
<meta name="description" content="Page Description">
description 메타 태그는 다양한 검색 엔진에서 검색 할 목적으로 웹 페이지의 색인을 생성하는 데 사용할 수 있습니다. 일반적으로 메타 태그에 포함 된 설명은 검색 엔진 결과의 페이지 / 웹 사이트의 기본 제목 아래에 나타나는 간단한 요약입니다. Google은 일반적으로 설명의 처음 20-25 단어 만 사용합니다.
generator
<meta name="generator" content="HTML Generator 1.42">
문서를 생성하는 데 사용 된 소프트웨어 패키지 중 하나를 식별합니다. 마크 업이 자동으로 생성되는 페이지에만 사용됩니다.
keywords
검색 엔진 키워드 설정 (쉼표로 구분) :
<meta name="keywords" content="Keyword1, Keyword2">
keywords 메타 태그는 검색 엔진에서 웹 페이지와 관련된 검색어를 알기 위해 사용되기도합니다.
엄지 손가락으로 말하면, 색인을 위해이 메타 태그를 사용하는 대부분의 검색 엔진은 처음 ~ 20 단어 만 색인을 생성하기 때문에 너무 많은 단어를 추가하지 않는 것이 좋습니다. 가장 중요한 키워드를 먼저 넣어야합니다.
로봇
여러 주요 검색 엔진이 지원하는 robots 속성은 검색 엔진 스파이더가 페이지를 색인 할 수 있는지 여부와 페이지의 링크를 따라야하는지 여부를 제어합니다.
<meta name="robots" content="noindex">
이 예제는 모든 검색 엔진이 페이지를 검색 결과에 표시하지 않도록 지시합니다. 허용되는 다른 값은 다음과 같습니다.
| 가치 / 지침 | 의미 |
|---|---|
all | 태만. index, follow 동일합니다. 아래 참고 사항을 참조하십시오. |
noindex | 페이지의 색인을 생성하지 마십시오. |
nofollow | 이 페이지의 링크를 따르지 마십시오. |
follow | 페이지의 링크를 따라갈 수 있습니다. 아래 참고 사항을 참조하십시오. |
none | noindex, nofollow . |
noarchive | 이 페이지의 캐시 된 버전을 검색 결과에 사용 가능하게 만들지 마십시오. |
nocache | Bing과 같은 일부 로봇에서 사용되는 noarchive 동의어. |
nosnippet | 검색 결과에이 페이지 스 니펫을 표시하지 마십시오. |
noodp | 검색 결과의 제목 또는 스 니펫에 대해 Open Directory 프로젝트 에서이 페이지의 메타 데이터를 사용하지 마십시오. |
notranslate | 검색 결과에서이 페이지의 번역을 제공하지 마십시오. |
noimageindex | 이 페이지에서 이미지의 색인을 생성하지 마십시오. |
unavailable_after [RFC-850 date/time] | 지정된 날짜 / 시간 이후에 검색 결과에이 페이지를 표시하지 마십시오. 날짜 / 시간은 RFC 850 형식 으로 지정해야 합니다 . |
참고 : 명시 적으로 index 정의하거나 follow 하거나, 유효한 값은 필요하지 않습니다. 모든 검색 엔진은 명시 적으로 그렇게 할 수 없다면 그렇게 할 수 있다고 가정합니다. robots.txt 파일이 작동하는 방식과 유사하게 검색 엔진은 일반적으로 허용되지 않는 사항만을 찾습니다. 검색 엔진이 할 수없는 일만 언급하면 우연히 모든 검색 엔진이 동일한 방식으로 index, ..., noindex 지지 않는 반대 (예 : index, ..., noindex 없음)를 방지 할 수 있습니다.
전화 번호 인식
iOS와 같은 모바일 플랫폼은 전화 번호를 자동으로 인식하여 tel: link로 변환합니다. 이 기능은 매우 실용적이지만 ISBN 코드 및 기타 번호를 전화 번호로 감지하는 경우가 있습니다.
모바일 Safari 및 기타 WebKit 기반 모바일 브라우저에서 자동 전화 번호 인식 및 서식을 해제하려면 다음 메타 태그가 필요합니다.
<meta name="format-detection" content="telephone=no">
소셜 미디어
Open Graph는 사이트의 헤드 마크 업에 포함 된 일반 정보를 확장하는 메타 데이터의 표준입니다. 이를 통해 페이스 북과 같은 웹 사이트는 웹 사이트에 대한 더 깊고 풍부한 정보를 구조화 된 형식으로 표시 할 수 있습니다. 사용자가 Facebook에서 OG 메타 데이터가 포함 된 웹 사이트에 대한 링크를 공유하면이 정보가 자동으로 표시됩니다.
페이스 북 / 오픈 그래프
<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: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->
페이 스북 / 인스턴트 기사
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">
<!-- The style to be used for this article -->
<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">
자동 재전송
경우에 따라 웹 페이지에 자동 리디렉션이 필요할 수 있습니다.
예를 들어, 5 초 후 example.com 으로 리디렉션하려면 다음을 입력하십시오.
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
이 줄은 지정된 웹 사이트 (이 경우 5 초 후 example.com 됩니다.
리디렉션 전에 시간 지연을 변경해야하는 경우 ;url= 앞에있는 숫자를 변경하면 시간 지연이 변경됩니다.
웹 앱
웹 응용 프로그램이나 웹 사이트에서 응용 프로그램 바로 가기 아이콘을 장치의 홈 화면에 추가하도록 설정하고 Android 용 Chrome의 "홈 화면에 추가" 메뉴 항목 을 사용하여 전체 화면 "응용 프로그램 모드"로 응용 프로그램을 시작하게 할 수 있습니다.
아래 메타 태그는 웹 앱을 전체 화면 모드 (주소 표시 줄 제외)로 엽니 다.
Android Chrome
<meta name="mobile-web-app-capable" content="yes">
IOS
<meta name="apple-mobile-web-app-capable" content="yes">
메타 태그의 상태 표시 줄 및 주소 표시 줄에 대한 색상을 설정할 수도 있습니다.
Android Chrome
<meta name="theme-color" content="black">
IOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">