Appia의 IT세상

[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법 본문

Programming/HTML&CSS

[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법

Appia 2020. 7. 15. 07:25
반응형

[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)

, 메타 데이터(metadata) 입력하는 방법

 

이전 포스팅에서는 HTML에서 사용하는 글자의 스타일(굵기, 이태릭체, 등등)에 대해서 포스팅을 했습니다. 이번 포스팅은 메타 태그(meta tag)에 대해서 살펴보면서, 이 부분을 HTML에 입력하는 방법등에 대해서 살펴보고자 합니다. 

meta Tag

먼저, 메타 태그(meta tag)란, 다양한 방법으로 문서에 추가 정보를 설정할 수 있고 이를 제공하는데 사용합니다. 흔히 작성자, 키워드 목록와 같은 HTML 문서의 속성을 설명하는 Name/Value입니다. 기본적으로 메타 태그(meta tag)는 문서의 실제 모양에 서식에 영향을 미치지 않습니다. 따라서, 메타 태그(meta tag)가 작성되지 않는다고 하더라도 문서에는 아무런 지장이 없습니다. 

 

메타 태그(META Tag)는 <Head> ~ </Head> 사이에 입력이 됩니다. 흔히, Meta Tag에 입력된는 속성은 다음과 같습니다. 

속성 속성 설명
Name 속성의 이름 ( ex. keyword, description... )
content 속성의 값
scheme 속성의 Schema를 명시

 

<키워드 입력 : Keyworkd>

키워드는 문서와 관련된 중요한 키워드를 지정할 수 있습니다. 이는 검색엔진등에 색인화 되기 위해 사용됩니다. 그럼 다음과 같이 예시를 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <meta name = "keywords" content="HTML, keywords, Meta Tag, Metadata, Appia, Tutorial" />
</head>
<body>
    
</body>
</html>
 cs

다음과 같이 name에 "keywords"을 입력하고, value를 content에 입력합니다. 

 

<Description 입력>

문서에 대한 간단한 설명등을 입력할 수 있습니다. 혹자들은 이 부분이 검색 엔진에서 자주 사용된다고 하지만, 저의 경우 작성자의 목적을 입력하거나, 저자가 입력하고 싶은 내용에 대해서 입력하는 부분이라고 생각합니다. 

<head>
    <title>Document</title>
    <meta name = "keywords" content="HTML, keywords, Meta Tag, Metadata, Appia, Tutorial" />
    <meta name = "description"  content="Appia Tutorial for html" />
</head>
 cs

 

<Refresh 기간 설정> 

메타 태그(meta tag)에는 페이지가 자동으로 새로고침이 되는 시간을 설정할 수 있습니다. 간단히 다음과 같은 부분입니다. 

<head>
    <title>Document</title>
    <meta name = "keywords" content="HTML, keywords, Meta Tag, Metadata, Appia, Tutorial" />
    <meta name = "description"  content="Appia Tutorial for html" />
    <meta http-equiv = "refresh" content = "5" />
</head>
 
 cs

 

<Charater Set 설정>

페이지내에 Charater Set을 설정할 수 있는 메타 태그가 존재합니다. 다음 부분을 살펴보겠습니다. 

<head>
    <title>Document</title>
    <meta name = "keywords" content="HTML, keywords, Meta Tag, Metadata, Appia, Tutorial" />
    <meta name = "description"  content="Appia Tutorial for html" />
    <meta http-equiv = "refresh" content = "5" />
    <meta charset="UTF-8">
</head>
 cs

 

<Author 설정>

페이지를 작성한 사람에 대해서 명시 할 수가 있습니다. 

<head>
    <title>Document</title>
    <meta name = "keywords" content="HTML, keywords, Meta Tag, Metadata, Appia, Tutorial" />
    <meta name = "description"  content="Appia Tutorial for html" />
    <meta http-equiv = "refresh" content = "5" />
    <meta name = "author"   content="APPIA Choi" />
    <meta charset="UTF-8">
</head>
 cs

 

위에 언급한 부분외에도 다양한 부분에 대해서 메타데이터(MetaData)또는 메타 태그(meta tag)로 설정할 수 가 있습니다. 이 부분은 문서가 표현되는 부분에 직접적인 영향을 주지는 않지만, 잘 작성해두면 나중에 문서를 분류하거나 파악하는데 도움이 됩니다. 

 

이번 포스팅에서는 [초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법이라는 주제로 포스팅을 해봤습니다. 혹시 궁금하신점이나 문의 사항이 있으시면 댓글 및 방명록에 글 남겨주시길 바랍니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기  (0) 2020.07.19
[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기  (0) 2020.07.17
[초보HTML배우기 03]HTML - 글자 속성 스타일 적용  (0) 2020.07.13
[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성  (0) 2020.07.11
[초보HTML배우기 01]HTML / CSS - 처음시작 및 기본태그(Tag)  (0) 2020.07.09
'Programming/HTML&CSS' Related Articles more
Comments