HTML <meta> name 속성
정의와 사용법
name 속성은 메타데이터의 이름을 정의합니다.
name 속성은 content 속성 의 값의 이름을 나타냅니다.
을 사용하여 name 와 content 속성은 문서에 메타데이터를 정의하기 위해 이름/값 쌍을 사용할 수 있는 속성입니다. 그 중에서도name 속성은 메타데이터의 유형을 나타내며 content 속성은 값을 제공합니다.
아래 표는 몇 가지 предопределенные типы метаданных.
주의:설정되면 http-equiv 속성설정되면 name 속성.
힌트:HTML5는 <meta> 태그를 통해 뷰포트(웹의 사용자가 볼 수 있는 영역)를 제어할 수 있는 방법을 도입했습니다(아래의 '뷰포트 설정' 예제를 참조하세요).
예제
name 속성을 사용하여 HTML 문서에 대한 설명, 키워드, 작성자를 정의합니다. 또한, 페이지의 크기와 다른 장치에 대한 확대 비율을 제어하는 뷰포트를 정의합니다：
<head> <meta name="description" content="무료 Web 강의"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
문법
<meta name="value">
속성 값
| 값 | 설명 |
|---|---|
| application-name | 페이지가 대표하는 Web 애플리케이션의 이름을 정의합니다. |
| author |
문서 작성자의 이름을 정의합니다. 예를 들어： <meta name="author" content="YK Investment"> |
| description |
페이지 설명을 정의합니다. 검색 엔진은 이 설명을 검색 결과에 표시할 수 있습니다. 예를 들어： <meta name="description" content="무료 Web 강의"> |
| generator |
문서 생성을 위해 사용되는 소프트웨어 패키지 중 하나를 정의합니다(수필 페이지에 사용되지 않습니다)。 예를 들어： <meta name="generator" content="FrontPage 4.0"> |
| keywords |
페이지와 관련된 키워드 목록을 쉼표로 구분하여 정의합니다. 페이지의 내용에 대해 검색 엔진에 알립니다. 힌트:항상 키워드를 지정해야 합니다(검색 엔진이 페이지를 분류하기 위해 필요합니다). 예를 들어： <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | 비주얼 필드(웹 페이지의 사용자가 볼 수 있는 영역)를 제어합니다。 |
설명
표에 나열된 여섯 가지 사전 정의된 메타데이터 유형 외에도 메타데이터 확장을 사용할 수 있습니다. 이 페이지를 방문하여 자주 업데이트되는 확장 목록을 확인할 수 있습니다：
http://wiki.whatwg.org/wiki/MetaExtensions
일부 확장은 많이 사용되지만, 다른 확장은 매우 제한적인 용도로 사용되며 거의 사용되지 않습니다. robots 메타데이터는 전자에 해당합니다. HTML 문서 작성자는 이를 통해 검색 엔진이 문서를 어떻게 다루는지 알려줄 수 있습니다. 예를 들어：
<meta name="robots" content="noindex">
이 메타데이터 유형은 대부분의 브라우저가 인식하는 세 가지 값이 있습니다：
- noindex - 이 페이지를 인덱싱하지 마세요
- noarchive - 이 페이지를 아카이브나 캐시에 저장하지 마세요
- nofollow - 이 페이지의 링크를 통해 검색을 계속하지 마세요
사용 가능한 메타데이터 확장은 많지 않으며, 개발자는 온라인 청화서를 읽어보는 것이 좋습니다. 자신의 프로젝트에 사용할 수 있는 것들을 확인해 보세요。
훌륭
검색 엔진이 내용을 어떻게 분류하고 등급을 매기는지 알려주는 가장 중요한 방법은 과거에는 keywords 메타데이터를 사용하는 것이었습니다. 현재 검색 엔진은 keywords 메타데이터에 대한 중요성이 많이 줄었습니다. 이는 그것이 페이지 내용과 관련성의 가상을 만들기 위해 악용될 수 있기 때문입니다. 제작자가 내용이 검색 엔진의 시각에서 어떻게 좋게 바뀌기를 원한다면, 그들이 제공하는 조언을 사용하는 것이 가장 좋습니다. 대부분의 검색 엔진은 웹 페이지나 전체 웹사이트를 최적화하는 가이드를 제공합니다.
구글：검색 엔진 최적화 (SEO) 신수 가이드
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
百度：百度 검색 엔진 최적화 가이드
비주얼 필드 설정
비주얼 필드는 웹 페이지의 사용자가 볼 수 있는 영역입니다. 장치에 따라 다릅니다 - 휴대폰에서 컴퓨터 화면보다 작습니다。
모든 웹 페이지에 다음 <meta> 요소를 포함해야 합니다：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
브라우저에 페이지 크기와 확대 비율을 제어하는 방법에 대한 설명을 제공합니다.
width=device-width 페이지의 너비를 설정하여 장치의 화면 너비를 따릅니다(장치에 따라 다릅니다).
initial-scale=1.0 브라우저가 페이지를 최초로 로드할 때 초기 확대 수준을 설정하는 부분입니다.
이는 뷰포트 메타 태그를 사용하지 않은 웹 페이지 예제입니다. 동일한 웹 페이지에 뷰포트 메타 태그를 추가한 예제와 함께 제공됩니다:
힌트:이 페이지를 모바일 또는 태블릿에서 볼 때, 아래 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
우리의응답형 웹 페이지 디자인 - 뷰포트 강의뷰포트에 대해 더 많이 배우세요.
브라우저 지원
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 지원 | 지원 | 지원 | 지원 | 지원 |
