xtring.dev

[HTML] <meta /> 그게 뭐야? - HTML 파헤치기 본문

Front-End/HTMLL & CSS

[HTML] <meta /> 그게 뭐야? - HTML 파헤치기

xtring 2021. 1. 29. 13:25
반응형

 

 

<meta />  meta tag

  meta tag🔖는 description, keywords, author, 기타 메타데이터 정의에 사용됩니다. 메타 데이터는 브라우저와 검색엔진의 키워드(keyword) 등에 사용됩니다. meta tag에 다양한 정의를 통해 웹 사이트에 다양한 정의와 설명을 할 수 있습니다. 

 

  HTML 문서의 <head></head> 사이에 위치할 수 있으며 semantic 태그이며 Empty element입니다. 

 

 

 

 

🤓  대표적인 예들을 살펴봅시다.

  charset 속성은 브라우저가 사용할 문자셋을 정의합니다.

<meta charset="utf-8">

 

 

  keywords 속성을 사용하면 SEO(검색엔진 최적화)에 도움을 줄 수 있습니다. keywords를 정의함으로서 검색엔진의 필터에 우선으로 걸리게 해줄 수 있죠.

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

 

 

  rotbots은 검색로봇(검색엔진)에 대한 명령을 지정할 수 있습니다. 지정할 명령들은 ,(콤마)로 구분할 수 있습니다.

<meta name="robots" content="noindex, nofollow" />

content 속성은 아래와 같은 것들이 있습니다.
 - all(default) : index, follow를 지정한 것과 같습니다.
 - none : noindex, nofollow를 지정한 것과 같습니다.
 - index : 페이지를 수집 대상으로 합니다.
 - follow : 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 합니다.
 - noindex : 페이지를 수집대상에서 제외합니다.
 - nofollow : 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않습니다.

이 외에도 웹 표준에서는 인정하지 않는 속성들이 있습니다.
 - noarchive : 해당 페이지를 캐시하지 않습니다.
 - noimageindex: 페이지에 포함된 이미지를 검색 대상에서 제외합니다.
 - noimageclick : 그 페이지에 포함된 이미지의 링크를 방지합니다.

  

 

  description은 웹페이지를 설명합니다.

<meta name="description" content="Web tutorials on HTML and CSS">

 

 

  author는 웹페이지의 저자를 명기합니다.

<meta name="author" content="Mark Hwang">

 

 

  http-equiv 속성을 통해 웹페이지를 30초 마다 Refresh 할 수도 있습니다. 또 다른 정의 방법도 있습니다.

<meta http-equiv="refresh" content="30">

 

 

 

  이 외에도 meta tag에는 다양한 속성을 정의할 수 있습니다!

 

 

 

 

 

📗 Ref.

developer.mozilla.org/ko/docs/Web/HTML/Element

poiemaweb.com/html5-tag-basic

반응형

'Front-End > HTMLL & CSS' 카테고리의 다른 글

[HTML] 시맨틱 웹(Semantic Web)이란? - HTML의 기본 중 기본  (0) 2021.01.29
[HTML] HTML 글로벌 어트리뷰트(HTML Global Attribute)가 뭐야? - HTML 파헤치기  (0) 2021.01.29
[HTML] HTML의 빈 요소(Empty Element)? - HTML 파헤치기  (0) 2021.01.29
[CSS] 무적의 레이아웃 세팅하기 Flex - 무엇이든 만들 수 있는 Flexbox  (0) 2020.03.10
'Front-End/HTMLL & CSS' Related Articles more
Comments