메타 엘리먼트
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
메타 엘리먼트는 HTML 문서의 `
` 섹션 내에 위치하며, 웹 페이지에 대한 메타데이터를 제공하는 데 사용되는 HTML 요소이다. 이 요소는 HTTP 헤더 정보를 제공하거나, 페이지의 문자 인코딩, 키워드, 설명 등을 지정하는 데 활용된다. 메타 엘리먼트는 `name`, `http-equiv`, `charset` 등의 속성을 통해 다양한 기능을 수행하며, 검색 엔진 최적화(SEO)에도 영향을 미친다. 특히, `keywords` 속성은 과거 검색 엔진에서 사용되었으나 현재는 그 중요성이 감소했으며, `description` 속성은 검색 결과 페이지에 표시되어 클릭률에 영향을 줄 수 있다. HTML5에서는 시맨틱 웹을 위한 요소들이 도입되면서 메타 태그를 대체할 수 있는 방법도 제시되고 있다.
더 읽어볼만한 페이지
- HTML 태그 - HTML 요소
HTML 요소는 HTML 문서의 기본 단위로서, 시작 태그와 종료 태그, 그리고 콘텐츠를 포함하며, 일반 요소, 원시 텍스트 요소, 빈 요소로 나뉘고 콘텐츠 범주에 따라 포함 가능한 콘텐츠 종류가 결정된다. - HTML 태그 - 폼 (HTML)
HTML 폼은 웹 페이지에서 사용자로부터 정보를 수집하여 서버로 전송하는 요소로, 텍스트 입력, 체크 상자, 라디오 버튼 등 다양한 컨트롤을 제공하여 사용자 인터랙션을 가능하게 한다. - 웹 1.0 - 전화 접속
전화 접속은 공중 교환 전화망을 통해 모뎀과 전화선으로 인터넷에 연결하는 방식으로, 1980년대부터 사용되었으나 광대역 인터넷의 등장으로 2000년대 이후 사용이 줄어 현재는 제한적으로 사용되며 사라지는 추세이다. - 웹 1.0 - 자바 애플릿
자바 애플릿은 웹 페이지에서 실행되는 자바 기반 프로그램으로, 웹 상호작용성을 높였으나 기술적 문제와 웹 표준 기술 발전에 따라 쇠퇴하여 사용이 중단되었다. - 검색 엔진 최적화 - 전환율
- 검색 엔진 최적화 - 검색 엔진 결과 페이지
검색 엔진 결과 페이지(SERP)는 사용자의 검색어에 대한 결과 페이지로, 자연 검색 결과와 유료 광고를 포함하며, 검색 엔진들은 다양한 기능을 통해 검색 결과를 강화하고 사용자의 검색 의도에 맞는 정보를 제공하기 위해 노력한다.
| 메타 엘리먼트 | |
|---|---|
| 일반 정보 | |
| 유형 | HTML 요소 |
| 설명 | 문서의 메타데이터를 나타냄 |
| 사용 위치 | `` 요소 내부 |
| 콘텐츠 모델 | 비어 있음 |
| W3C 정의 | HTML5 |
| MDN 정의 | MDN Web Docs |
| 속성 | |
| charset | 문서의 문자 인코딩을 선언 |
| content | http-equiv 또는 name 속성과 관련된 값 |
| http-equiv | HTTP 헤더 필드를 흉내냄 |
| name | 문서의 메타데이터 이름 |
| 예시 | |
| 문자 인코딩 지정 | `` |
| 뷰포트 설정 | `` |
| 설명 제공 | `` |
| 키워드 제공 | `` |
| 저자 표시 | `` |
| 리프레시 | `` |
2. 사용 예제
`meta` 요소는 일반적으로 `name` 속성과 해당 HTML 페이지를 설명하는 `content` 속성으로 구성되어 문서의 메타데이터를 지정한다. `name` 속성과 `content` 속성은 "이름-값" 쌍을 이루며, 다양한 정보를 표현하는 데 사용된다. `name` 속성의 값 사용은 기본적으로 자유로우나, 일부 용법은 HTML 표준으로 규정되어 있으며, WHATWG 위키의 [https://wiki.whatwg.org/wiki/MetaExtensions MetaExtensions] 페이지에서 관련 정보가 수집되고 있다.
다음은 다양한 `meta` 태그 사용 예시이다.
- 페이지 설명 (`description`): 페이지 내용을 간략하게 요약하여 검색 결과 등에 표시될 수 있다. 하위 섹션 `description` 속성에서 더 자세히 다룬다.
- 키워드 지정 (`keywords`): 페이지의 핵심 주제어를 나타낸다. 과거 검색 엔진 최적화에 중요하게 여겨졌으나, 현재 대부분의 검색 엔진은 이를 중요하게 고려하지 않는다. 하위 섹션 `keywords` 속성에서 더 자세히 다룬다.
- 작성자 정보 (`author`): 문서 작성자를 명시한다.
- 문자 인코딩 지정 (`charset`): HTML5에서는 `charset` 속성을 사용하여 문서의 문자 인코딩을 지정한다. 이는 웹 브라우저가 페이지 내용을 올바르게 해석하도록 돕는다. 하위 섹션 HTTP 헤더 정보 제공에서 관련 내용을 더 자세히 다룬다.
- 기타 정보: 위치 정보(예: 우편번호) 등 다양한 메타데이터를 지정할 수 있다.
이러한 메타 태그 정보는 각 사용자 에이전트 (예: 웹 브라우저, 웹 크롤러)에 의해 해석되며, 지원 수준은 사용자 에이전트마다 다를 수 있다.[32] 지원되지 않는 메타 태그는 단순히 무시된다.[33]
2. 1. HTTP 헤더 정보 제공
`` 요소의 `http-equiv` 속성은 HTML 페이지가 웹 서버에서 클라이언트로 제공될 때, 실제 콘텐츠보다 먼저 전송되어야 하는 HTTP 헤더 정보를 지정하는 데 사용된다.[36][37] 이는 웹 서버가 보내는 실제 HTTP 헤더를 대체하거나 보완하는 역할을 할 수 있다.예를 들어, 아래 코드는 `Content-Type`이라는 HTTP 헤더 값을 `text/html`로 지정하여 해당 문서가 HTML 문서임을 나타낸다.
```html
```
또한, 문서의 문자 인코딩을 지정하는 데에도 `http-equiv` 속성이 사용될 수 있다. 다음 예시는 해당 페이지의 텍스트 인코딩이 UTF-8임을 명시하며, 웹 페이지가 다양한 언어 환경에서 올바르게 표시되도록 하는 데 중요하다.
```html
```
HTML 4.01까지는 위와 같이 `http-equiv` 속성을 사용하여 문자 인코딩을 지정했으나, HTML5에서는 더 간결한 `charset` 속성이 표준으로 도입되었다.[40][41] 웹 브라우저들은 이전부터 `charset` 속성을 비공식적으로 지원해왔기 때문에, HTML5 표준으로 정식 채택된 것이다. HTML5 방식은 아래와 같다.
```html
```
이 방식은 응답 헤더
Content-Type:을 대체하여 미디어 유형과 UTF-8 문자 인코딩을 나타낸다.`http-equiv` 속성은 문자 인코딩 외에도 다양한 HTTP 헤더 정보를 제공하는 데 사용될 수 있다. 예를 들어, 페이지의 만료 시간을 지정하여 브라우저의 캐시 동작을 제어할 수 있다.
```html
```
이 태그는 브라우저에게 해당 페이지가 명시된 시간 이후에는 유효하지 않으므로, 그때까지 캐시된 버전을 사용할 수 있음을 알려준다. HTML 4.01 명세는 웹 서버가 이 정보를 파싱하여 실제 HTTP 응답 헤더로 설정할 수 있도록 허용했지만,[25] 실제로 이 기능을 구현한 HTTP 서버는 거의 없다.[26] 대신, 사용자 에이전트(웹 브라우저)가 마치 실제 HTTP 헤더를 받은 것처럼 이 정보를 해석하고 동작한다.
또한, 페이지의 기본 언어를 지정할 수도 있다. 다음 예는 페이지의 콘텐츠 언어가 일본어임을 나타낸다.
```html
2. 2. 검색 엔진 최적화 (SEO)
메타 요소는 웹 페이지에 대한 정보를 제공하며, 검색 엔진이 페이지를 올바르게 분류하는 데 사용될 수 있다. 이 때문에 메타 요소는 마케팅 연구 분야인 검색 엔진 최적화(SEO)의 주요 관심사가 되었으며, 사용자의 웹사이트가 검색 엔진 결과에서 더 높은 순위를 차지하도록 다양한 방법이 연구되어 왔다.1990년대 중반, 구글과 같은 현대적인 검색 엔진의 콘텐츠 분석 기능이 등장하기 전까지, 검색 엔진들은 웹 페이지를 정확하게 분류하기 위해 메타데이터에 크게 의존했다. 웹마스터들은 올바른 메타 요소를 갖추는 것의 상업적 중요성을 빠르게 파악했다. 그러나 현재 검색 엔진 커뮤니티 내에서는 메타 태그의 가치에 대해 의견이 분분하다. 일부는 가치가 없다고 주장하는 반면, 다른 일부는 여전히 중심적인 역할을 한다고 주장한다. 많은 이들은 명확한 답은 없지만, 해를 끼치지는 않으므로 만약을 위해 사용한다고 결론짓는다. 구글은 `content`, `robots`, `google`, `google-site-verification`, `content-type`, `refresh`, `google-bot`과 같은 특정 메타 태그를 지원한다고 명시하고 있다.[2]
주요 검색 엔진 로봇은 페이지 순위를 결정할 때 많은 요소를 고려하며, 메타 태그는 그중 일부에 불과하다. 또한, 대부분의 검색 엔진은 순위 결정 규칙을 자주 변경한다. 구글은 순위 규칙을 48시간마다 업데이트한다고 밝힌 바 있어, SEO에서 메타 태그의 정확한 역할을 파악하기는 어렵다.
=== `keywords` 속성 ===
`keywords` 속성은 1995년 웹 검색 엔진인 인포시크와 알타비스타 등에 의해 널리 사용되면서 인기가 급증하여 가장 일반적으로 사용되는 `meta` 요소 중 하나가 되었다.[3] 이 속성은 ``와 같은 형태로 해당 페이지의 핵심 키워드를 명시하여 검색 엔진의 색인 생성을 돕기 위한 목적이었다.
그러나 오늘날 `keywords` 속성이 주요 검색 엔진의 순위에 어떤 영향을 미치는지에 대한 합의는 없다. 과거에는 페이지 내용 자체에서도 발견되는 키워드를 메타 태그에 포함하면 순위에 영향을 미친다는 추측이 있었으나, 이 속성은 검색 엔진 최적화를 위한 편법으로 남용되는 경우가 많아 검색 엔진들은 점차 이 정보를 신뢰하지 않게 되었다.
구글과 관련하여, 2007년 4월 검색 엔진 최적화 분야의 전문가들은 `keywords` 메타 속성에 키워드를 포함하는 것이 순위 결정에 거의 또는 전혀 관련이 없다고 결론 내렸다.[4] 2009년 9월, 구글의 맷 커츠는 구글이 더 이상 `keywords` 메타 태그를 고려하지 않겠다고 공식 발표했다.[5]
반면, 야후!는 한때 검색 순위 개선을 위해 다른 요소와 함께 키워드 메타 태그를 지원한다고 주장했다.[6] 이후 야후!는 키워드 메타 태그를 여전히 색인화는 하지만, 순위 결정 알고리즘에서는 가장 낮은 중요도를 부여받는다고 입장을 수정했다. 즉, 문서 본문이나 다른 섹션에 동일한 단어를 포함하는 것이 메타 키워드를 사용하는 것보다 순위에 더 효과적이라는 의미이다.[8] 2012년 9월, 구글은 뉴스 게시자를 위해 `news_keywords`라는 별도의 메타 태그를 고려할 것이라고 발표했으나[9], 현재는 이마저도 더 이상 고려하지 않는다.[10]
=== `description` 속성 ===
`keywords` 속성과 달리, `description` 속성은 야후!와 빙과 같은 대부분의 주요 검색 엔진에서 지원된다. 구글 역시 페이지 자체에 대한 정보가 요청될 때(예: `related:` 쿼리 사용) 이 태그를 사용한다. `description` 속성은 `` 형태로 웹 페이지 콘텐츠에 대한 간결한 설명을 제공한다.
이를 통해 웹 페이지 작성자는 검색 엔진이 페이지 콘텐츠를 기반으로 자동으로 생성하는 설명보다 더 의미 있고 매력적인 설명을 검색 결과 목록에 제공할 수 있다. 이 설명은 종종 검색 엔진 결과 페이지(SERP)에 표시되어 사용자의 클릭률(CTR)에 영향을 줄 수 있다. 효과적인 `title` 태그와 `description` 메타 태그 작성은 클릭률을 높이는 긍정적인 신호가 될 수 있다.
하지만 구글은 `description` 메타 요소를 직접적인 순위 결정 요소로 인식하지 않는다. 따라서 해당 요소에 목표 키워드를 포함하는 것이 사이트 순위를 직접적으로 높이는 데 도움이 되지는 않는다. W3C는 이 설명 메타 태그의 길이를 구체적으로 지정하지 않지만, 거의 모든 검색 엔진은 160자 미만의 일반 텍스트로 작성할 것을 권장한다.
=== 검색 엔진의 입장 및 활용 ===
구글은 HTML 키워드 또는 메타 태그 요소를 색인 생성에 직접 사용하지 않는다. 구글의 연구 이사였던 모니카 헨징어(Monika Henzinger)는 2002년에 "현재 우리는 메타데이터가 조작될 수 있다는 두려움 때문에 이를 신뢰하지 않는다"라고 언급한 바 있다.[20] 다른 검색 엔진들도 시스템을 속이는 것으로 간주되는 웹사이트(예: 동일한 메타 키워드를 과도하게 반복하는 행위)에 불이익을 주는 기술을 개발했다. 현재는 대부분의 검색 엔진이 메타 키워드 요소를 완전히 무시할 가능성이 높다.
하지만 구글은 사이트 링크를 검색 결과에 표시하기 위해 다른 메타 관련 요소를 사용한다. 예를 들어, HTML 문서의 `
3. 4. `robots` 속성
robots 속성은 여러 주요 검색 엔진에서 지원하며,[12] 검색 엔진 스파이더(로봇)가 해당 웹 페이지를 색인할지 여부와 페이지 안에 있는 링크를 따라갈지 여부를 제어하는 데 사용된다. 이 속성에는 쉼표로 구분하여 하나 이상의 값을 지정할 수 있다.- `noindex`: 검색 엔진이 이 페이지를 색인하지 않도록 지시한다.
- `nofollow`: 검색 엔진이 이 페이지에 있는 링크를 따라가지 않도록 지시한다. 즉, 링크된 페이지로 이동하여 크롤링하는 것을 막는다.
- `noarchive`: 검색 엔진이 페이지의 보관된 사본(캐시)을 저장하지 않도록 지시한다.
- `nosnippet`: 검색 결과 목록에 페이지 내용의 일부(스니펫)를 표시하지 않도록 요청한다.[13]
이처럼 메타 태그는 웹사이트 관리자가 검색 엔진에게 특정 콘텐츠를 색인하지 않도록 요청하는 효과적인 방법 중 하나이다.[14]
3. 5. 기타 속성
`'language'` 속성은 검색 엔진에게 웹사이트가 어떤 자연어(예: 영어, 스페인어 또는 프랑스어)로 작성되었는지 알려준다. 이는 일반적으로 언어 이름을 나타내는 IETF 언어 태그이다. 이 속성은 웹사이트가 여러 언어로 작성되었을 때 특히 유용하며, 각 페이지에 포함되어 검색 엔진에게 특정 페이지가 어떤 언어로 작성되었는지 알려줄 수 있다. 사용자 에이전트는 언어 정보를 사용하여 언어에 적합한 글꼴을 선택할 수 있으며, 이는 페이지의 전반적인 사용자 경험을 향상시킨다.HTML 표준에서는 `'name'` 속성의 값으로 다음과 같은 항목을 규정하고 있다[34][35].
- `'application-name'`
- `'author'`
- `'description'`
- `'generator'`
- `'keywords'`
- `'referrer'`
- `'theme-color'`
4. 리디렉션
메타 리프레시 요소는 웹 브라우저가 특정 시간 간격 후에 웹 페이지를 자동으로 새로 고치거나, 지정된 다른 URL로 사용자를 리디렉션하도록 지시하는 데 사용될 수 있다. 예를 들어, ``와 같은 코드는 5초 후에 `https://example.com/`으로 페이지를 이동시킨다.
그러나 메타 요소를 이용한 자동 새로고침 및 리디렉션은 오래전부터 사용이 권장되지 않았으며,[22] 여러 문제점이 지적되어 왔다.[22] W3C는 사용자 에이전트(웹 브라우저 등)가 사용자가 이 기능을 비활성화할 수 있도록 허용해야 하며, 그렇지 않다면 웹 페이지에서 메타 리프레시를 사용하지 말 것을 권고한다.
실제로 일부 웹 브라우저에서는 이 기능을 비활성화할 수 있다. 인터넷 익스플로러의 경우 보안 설정의 기타 범주에서 메타 리프레시를 끌 수 있으며, 모질라 파이어폭스에서는 구성 설정(`about:config`)에서 `accessibility.blockautorefresh` 값을 변경하여 비활성화할 수 있다.[23]
또한, 클라이언트 측 리디렉션 방식은 웹 브라우저의 '뒤로 가기' 버튼 작동을 방해하는 경향이 있다는 지적이 많다. 리디렉션된 페이지에서 뒤로 가기 버튼을 누르면 이전 페이지가 아닌 리디렉션을 유발한 페이지로 돌아가 다시 리디렉션되는 문제가 발생할 수 있다. 다만, 사파리, 모질라 파이어폭스, 오페라 등 일부 최신 브라우저에서는 이 문제가 개선된 것으로 보인다.
마크업을 통한 자동 리디렉션은 서버 측 리디렉션 방식과 비교했을 때 웹 접근성 측면에서도 문제가 있으며, W3C의 웹 콘텐츠 접근성 지침 (WCAG) 1.0의 지침 7.5를 준수하지 않는다.[24] 따라서 웹 접근성과 사용자 경험을 고려할 때, 서버 측 리디렉션을 사용하는 것이 더 권장된다.
5. HTTP message headers
`meta` 요소는 HTML 페이지가 웹 서버에서 클라이언트로 제공될 때 실제 콘텐츠보다 먼저 전송되어야 하는 HTTP 헤더를 지정하는 데 사용될 수 있다. 즉, HTTP 헤더의 일부 기능을 대체할 수 있다.
예를 들어, 아래 코드는 HTTP 응답 헤더 중 `Content-Type` 헤더를 대체하여 해당 문서의 미디어 유형이 `text/html`이고, 문자 인코딩 방식이 UTF-8임을 지정한다.
: ``
HTML5에서는 문자 인코딩 지정을 위해 아래와 같이 더 간결한 방식을 권장한다.
: ``
또한, `http-equiv` 속성을 사용하여 페이지 캐싱과 관련된 정보를 제공할 수도 있다. 아래 예시는 브라우저에게 해당 페이지가 특정 시각(2006년 6월 21일 14:25:27 GMT)에 만료된다는 것을 알려주어, 그 시점까지는 캐시된 페이지를 사용해도 안전함을 나타낸다.
: ``
HTML 4.01 명세에서는 HTTP 서버가 이러한 `meta` 태그를 해석하여 실제 HTTP 응답 헤더로 변환하여 전송하는 것을 선택적으로 허용했지만,[25] 실제로 이 기능을 구현한 웹 서버는 거의 없다.[26] 대신, 웹 브라우저와 같은 사용자 에이전트가 이러한 `meta` 태그를 읽고 마치 실제 HTTP 헤더가 전송된 것처럼 동작을 에뮬레이트하는 방식으로 처리한다.
6. `meta` 요소의 대안
일부 HTML 요소와 속성은 특정 메타데이터를 처리하므로, 이를 'meta' 요소 대신 사용할 수 있다. 예를 들어 title 요소, address 요소, ins 및 del 요소, 그리고 `title` 속성과 `cite` 속성이 있다.[27]
웹사이트 내 주제 접근성을 높이기 위해 'meta' 요소 대신 책의 색인처럼 웹사이트 색인을 만드는 방법도 있다. 미국 색인 협회 웹사이트에서 관련 예시를 찾아볼 수 있다.
1994년 알리웹은 'meta' 키워드 속성과 유사한 정보를 제공하기 위해 색인 파일을 사용하기도 했다.
만약 'meta' 요소의 `content` 속성 값이 URL이라면, `rel` 속성에 적절한 값을 지정한 link 요소를 사용하는 것이 더 나을 수 있다.[27]
언어 지정 방식(HTTP 헤더, 'meta' 요소, 속성 사용)의 장단점 비교는 W3C 문서에서 확인할 수 있다.
7. 속성
meta 요소는 다양한 속성을 사용하여 웹 페이지에 대한 추가 정보, 즉 메타데이터를 정의한다. 주요 속성으로는 `name`, `http-equiv`, `charset` 등이 있다.
`name` 속성은 `content` 속성과 함께 "이름-값" 쌍을 이루어 문서의 내용을 설명하거나 관련 정보를 제공하는 메타데이터를 지정하는 데 주로 사용된다. 예를 들어, 페이지 내용을 요약하여 설명하기 위해 다음과 같이 사용할 수 있다.
어떤 이름을 사용할지는 기본적으로 자유로우나, 일부는 HTML 표준으로 규정되어 있다.
`http-equiv` 속성은 HTTP 헤더와 유사한 지시사항을 HTML 문서 내에 명시하기 위해 사용된다. 이를 통해 웹 서버 설정 변경 없이 문서 자체에서 콘텐츠 유형이나 캐시 제어 방식 등을 지정할 수 있다.
HTML5부터 도입된 `charset` 속성은 문서의 문자 인코딩을 간편하게 명시하는 데 사용된다. 예를 들어 UTF-8 인코딩을 지정하려면 다음과 같이 작성한다.
이는 과거 `http-equiv` 속성을 통해 문자 인코딩을 지정하던 방식을 대체하며, 일반적으로 권장되는 방식이다.
이러한 메타 태그 정보는 웹 브라우저나 검색 엔진 크롤러와 같은 사용자 에이전트에 의해 해석된다. 각 사용자 에이전트는 지원하는 메타 태그의 종류와 해석 방식이 다를 수 있으며[32], 지원되지 않는 메타 태그는 단순히 무시된다[33]. 각 속성에 대한 자세한 내용은 하위 섹션에서 다룬다.
7. 1. `name` 속성
`name` 속성은 `content` 속성과 함께 사용되어 문서의 메타데이터를 "이름-값" 쌍의 형태로 지정한다. 어떤 이름을 사용할지는 기본적으로 자유지만, 일부는 HTML 표준으로 규정되어 있으며, WHATWG Wiki의 [https://wiki.whatwg.org/wiki/MetaExtensions MetaExtensions] 페이지에서 여러 사용 예시를 찾아볼 수 있다.[32] 사용자 에이전트(예: 웹 브라우저, 크롤러)는 이러한 메타데이터를 해석하지만, 지원하지 않는 이름은 무시한다.[33]과거 검색 엔진들은 웹 페이지를 분류하기 위해 메타데이터에 크게 의존했다. 특히 `keywords` 속성은 1995년 검색 엔진인 인포시크나 알타비스타 등이 사용하면서 널리 퍼졌으나[3], 검색 순위를 높이기 위해 관련 없는 키워드를 과도하게 넣는 등 남용 사례가 늘면서 현재 대부분의 주요 검색 엔진은 이 속성을 거의 고려하지 않는다. 2009년 구글은 `keywords` 속성을 더 이상 검색 순위 결정에 사용하지 않는다고 공식적으로 발표했으며[5], 야후! 역시 중요도를 매우 낮게 평가하고 있다.[8] 구글의 모니카 헨징어는 2002년에 이미 "메타데이터가 조작될 수 있다는 우려 때문에 신뢰하지 않는다"고 언급하기도 했다.[20] 다만, 구글은 한때 뉴스 기사에 한해 `news_keywords`라는 이름의 메타 태그를 고려하기도 했으나[9], 현재는 이마저도 사용하지 않는다.[10]
반면, `description` 속성은 페이지 내용에 대한 간결한 설명을 제공하며, 야후!나 빙 등 여러 검색 엔진에서 여전히 활용된다. 검색 엔진 결과 페이지(SERP)에 이 설명이 표시되는 경우가 많아 사용자의 클릭률에 영향을 줄 수 있다. 하지만 구글은 `description` 내용을 직접적인 검색 순위 요소로는 보지 않는다. 일반적으로 160자 내외의 일반 텍스트로 작성하는 것이 권장된다.
구글은 `content`, `robots`, `google`, `google-site-verification`, `content-type`, `refresh`, `google-bot` 등의 특정 메타 태그는 지원한다고 밝히고 있다.[2]
HTML 표준에서는 `name` 속성의 값으로 다음과 같은 표준 메타데이터 이름을 정의하고 있다[34][35]:
- `application-name`: 웹 애플리케이션의 이름.
- `author`: 문서 저작자의 이름. (예: ``)
- `description`: 문서에 대한 짧고 정확한 요약. 검색 엔진 결과에 표시될 수 있다.
- `generator`: 문서를 생성한 소프트웨어의 식별자 (예: "워드프레스"). 사람이 직접 마크업을 작성한 경우에는 사용하지 않는다.
- `keywords`: 문서 내용과 관련된 키워드 목록 (쉼표로 구분). 현재 검색 엔진에서의 중요도는 낮다.
- `referrer`: 사용자가 링크를 통해 다른 페이지로 이동할 때 브라우저가 전송하는 HTTP 리퍼러(Referrer) 헤더 정보를 제어하는 정책을 지정한다.
- `theme-color`: 브라우저 인터페이스 요소(예: 주소 표시줄)의 색상을 제안한다.
이 외에도 스위프타입(Swiftype)과 같은 일부 서비스는 자체적인 메타 태그 확장을 정의하여 사용하기도 한다.[21]
7. 2. `http-equiv` 속성
`http-equiv` 속성은 HTML 문서가 웹 서버에서 클라이언트로 전송될 때, 실제 내용보다 먼저 전달되어야 하는 HTTP 헤더 정보를 명시하기 위해 사용된다. 즉, HTTP 응답 헤더와 동일한 효과를 내는 정보를 HTML 문서 안에 명시할 수 있게 한다.[36][37]예를 들어, 문서의 미디어 유형과 문자 인코딩을 지정하는 데 사용될 수 있다. 아래 코드는 문서의 콘텐츠 타입이 'text/html'임을 나타낸다.
문자 인코딩까지 함께 명시할 수도 있다. 다음 예시는 콘텐츠 타입을 'text/html'로, 문자 인코딩을 UTF-8로 지정한다. 이는 HTTP 응답 헤더의 `Content-Type:` 필드를 대체하는 효과를 가진다.
또한, 페이지의 캐시 만료 시간을 지정하는 데 `expires` 값을 사용할 수 있다. 아래 예시는 브라우저에게 해당 페이지가 특정 시각 이후에는 유효하지 않으므로, 그 시점까지 안전하게 캐시할 수 있음을 알려준다.
HTML 4.01 명세에 따르면, 웹 서버는 이 메타 태그를 해석하여 실제 HTTP 응답 헤더에 포함시킬 수도 있지만,[25] 실제로 이렇게 동작하는 웹 서버는 거의 없다.[26] 대신, 웹 브라우저와 같은 사용자 에이전트가 이 정보를 읽어 실제 HTTP 헤더가 전송된 것처럼 처리한다.
페이지에서 사용된 언어를 명시하는 `Content-Language` 값도 지정할 수 있다. 다음은 페이지의 언어가 일본어임을 나타내는 예시이다.
7. 3. `charset` 속성
`charset` 속성은 대상 HTML 문서의 문자 인코딩 지정을 위해 사용된다[38][39]。다음은 UTF-8을 지정하는 예시이다.이 방식은 HTTP 응답 헤더의 `Content-Type:` 필드를 대체하여 문서의 미디어 유형과 문자 인코딩을 명시하는 효과가 있다.
HTML 4.01까지는 `charset` 속성이 규정되어 있지 않았으며, 문자 인코딩의 지정에는 `http-equiv` 속성을 다음과 같이 사용했다.
그러나, 한편으로는 이것을 올바르게 기술하지 못한 웹 페이지 때문에, 웹 브라우저는 당시부터 `charset` 속성을 인식하게 되었다. 그 결과, HTML5 표준에서는 정식으로 `charset` 속성이 규정되게 되었다[40][41]。
7. 4. `itemprop` 속성
(내용 없음)참조
[1]
웹사이트
HTML meta tag
https://www.w3school[...]
2021-04-22
[2]
웹사이트
Meta tags that Google understands – Search Console Help
https://support.goog[...]
2018-10-15
[3]
간행물
META attributes by count
http://vancouver-web[...]
Vancouver Webpages
1997-06-04
[4]
웹사이트
In 2007, 37 leaders in search engine optimisation concluded that having keywords in the keywords attribute is little to none.
http://sangers.nu/bl[...]
Sanger.nu blog
2008-09-09
[5]
블로그
Google does not use the keywords meta tag in web ranking
http://googlewebmast[...]
Google Webmaster Central Blog
2009-09-21
[6]
웹사이트
How do I improve the ranking of my web site in the search results?
https://web.archive.[...]
Yahoo.com
2008-11-12
[7]
웹사이트
Yahoo Drops The Meta Keywords Tag Also
http://www.seroundta[...]
SEO Roundtable
2009-10-08
[8]
웹사이트
Yahoo's Senior Director of Search Got It Wrong, Yahoo Uses Meta Keywords Still
http://www.seroundta[...]
SEO Roundtable
2009-10-16
[9]
뉴스
A newly hatched way to tag your news articles
http://googlenewsblo[...]
2018-10-15
[10]
웹사이트
Meta news keywords still works ?
https://support.goog[...]
Google Publisher Center Community
2020-03-06
[11]
웹사이트
On-Page Ranking Factors – SEO Best Practices
https://moz.com/lear[...]
2017-04-25
[12]
블로그
Using the robots meta tag
http://googlewebmast[...]
Official Google Webmaster Central Blog
2007-03-05
[13]
웹사이트
Meta Robots Tag 101: Blocking Spiders, Cached Pages & More
http://searchenginel[...]
SearchEngineLand.com
2007-03-05
[14]
웹사이트
If I block Google from crawling a page using a robots.txt disallow directive, will it disappear from search results?
https://developers.g[...]
developers.google.com
2013-07-26
[15]
블로그
Opting Out of Open Directory Listings for Webmasters
http://blogs.msdn.co[...]
Live Search Blog
2006-05-22
[16]
블로그
More control over page snippets
http://sitemaps.blog[...]
Inside Google Sitemaps
2006-07-13
[17]
블로그
Yahoo! Search Weather Update and Support for 'NOODP'
http://www.ysearchbl[...]
Yahoo! Search Blog
2006-10-24
[18]
웹사이트
Better Snippets for your Users
https://developers.g[...]
[19]
블로그
Yahoo! Search Support for 'NOYDIR' Meta Tags and Weather Update
http://www.ysearchbl[...]
Yahoo! Search Blog
2007-02-28
[20]
논문
Perspectives on the Web and Google: [[Monika Henzinger]], Director of Research, Google
Journal of Internet Cataloging
2002
[21]
웹사이트
"
[22]
웹사이트
Welcome to the Virtual Mall!
http://www.w3.org/TR[...]
2018-10-15
[23]
웹사이트
Accessibility.blockautorefresh
https://web.archive.[...]
mozillaZine
[24]
간행물
Web Content Accessibility Guidelines 1.0 – Guideline 7
http://www.w3.org/TR[...]
W3.org
1999-05-05
[25]
간행물
HTML 4.01 Specification
http://www.w3.org/TR[...]
W3.org
1999-12-24
[26]
웹사이트
meta http-equiv – is it sent as part of an HTTP header, or does the client parse the body for meta tags?
https://stackoverflo[...]
Stack Overflow
[27]
웹사이트
The global structure of an HTML document
http://www.w3.org/TR[...]
2018-10-15
[28]
웹사이트
HTML 4.01 Specification
https://www.w3.org/T[...]
2019-06-07
[29]
웹사이트
The global structure of an HTML document
https://www.w3.org/T[...]
2019-06-07
[30]
웹사이트
4.2.5 The meta element
https://html.spec.wh[...]
2019-07-07
[31]
웹사이트
4.2.5 meta要素
https://momdo.github[...]
2019-07-07
[32]
웹사이트
": 文書レベルメタデータ要素"
https://developer.mo[...]
2019-06-07
[33]
웹사이트
Google がサポートしているメタタグ - Search Console ヘルプ
https://support.goog[...]
2019-06-07
[34]
웹사이트
HTML: The Living Standard Developer's Edition 4.2.5.1 Standard metadata names
https://html.spec.wh[...]
2019-10-20
[35]
웹사이트
HTML Standard 日本語訳 4.2.5.1 標準メタデータ名
https://momdo.github[...]
2019-10-20
[36]
웹사이트
content-language【metaタグ】とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.in[...]
2024-05-30
[37]
웹사이트
http-equiv属性とは - IT用語辞典
https://e-words.jp/w[...]
2024-05-30
[38]
웹사이트
HTML Standard 日本語訳
https://momdo.github[...]
2019-08-17
[39]
웹사이트
4.2.5 The meta element
https://html.spec.wh[...]
2019-08-17
[40]
웹사이트
HTML5のFPWDとmeta要素のcharset属性
https://web.g.hatena[...]
2019-08-17
[41]
웹사이트
The Road to HTML 5: character encoding
https://blog.whatwg.[...]
2019-08-17
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com