최근 예전에 만들었던 프로젝트 코드를 정리하면서 큰 고민 없이 써왔던 html 코드가 신경 쓰이기 시작했다. 그래서 이번 기회에 한 번쯤 정리해두고 싶었던 메타데이터에 대해 정리해 보기로 했다. 참고로 메타데이터란 일련의 데이터를 정의하고 설명해 주는 데이터를 의미한다.
먼저, HTML 문서의 구조를 보면,
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
<!doctype html> 로 이 문서가 HTML 문서임을 나타내고, <html> 태그 안에 <head> 요소와 <body> 요소가 위치해 있는 것을 확인할 수 있다.
<head> 요소는 실제 화면에 보이는 부분은 아니지만, 검색 결과에 노출될 키워드, 홈페이지에 대한 설명 등을 담고 있으며, <body> 요소는 실제로 페이지에 표시될 콘텐츠가 포함되는 부분이다.
위 예제의 <head> 안에 있는 <meta charset="utf-8" /> 은 문서의 문자 인코딩 설정을 UFT-8 (전 세계에서 사용되는 대부분의 문자를 포함)로 지정한다는 뜻이며, <title> 태그는 브라우저 탭에 표시될 페이지의 제목을 나타낸다.
그럼 이제 자주 쓰이는 메타데이터에 대해 알아보자.
많은 <meta> 태그는 name과 content 속성을 가지며, 예시는 아래와 같다.
<!--콘텐츠 제작자-->
<meta name="author" content="Yeseul Choi" />
<!--콘텐츠에 대한 간략한 설명(검색 결과 제목 밑에 뜨는 내용)-->
<meta
name="description"
content="HTML의 head 요소 공부를 위한 공간입니다." />
<!--웹 페이지 관련 키워드 나열-->
<meta
name="keywords"
content="html, head, meta, seo" />
(참고로 HTML의 주석은 <!-- 와 --> 로 묶어서 작성하면 된다.)
head 부분에 콘텐츠 관련 키워드들을 적절히 포함시키면 검색엔진 최적화(SEO), 즉 검색엔진에서 해당 페이지가 더 많이 표시되도록 할 수 있다.
실제 여러 사이트들을 살펴보면,
이와 같이 meta 태그가 실제로 어떻게 쓰이는지 살펴볼 수 있다.
보다 보면 다른 요소들은 필요할 때마다 찾아 쓰면 될 것 같은데, 한 가지 눈에 띄는 요소가 있다.
바로 오픈 그래프(Open Graph Data)이다. 오픈 그래프란 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. Twitter에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있다.(예시 2의 <meta name="twitter:url" content="https://www.naver.com/">과 같은 부분)
주요 오픈 그래프 속성은 다음과 같다.
| og:url | 페이지의 표준 url |
| og:site_name | 사이트의 이름 |
| og:title | 콘텐츠의 제목 |
| og:description | 콘텐츠에 대한 간략한 설명 |
| og:image | 미리보기로 표시될 이미지 |
| og:type | 콘텐츠 미디어의 유형. 기본값은 website. |
| og:local | 리소스의 언어. 기본값은 en_US. 한국어는 ko_KR |
이러한 오픈그래프를 잘 설정하면,
위와 같이 링크를 공유할 때 더 적절히 정보를 표시해 줄 수 있다.
[출처 1] HTML 문서의 구조
HTML 시작하기 - Web 개발 학습하기 | MDN
HTML 기본 사항을 둘러 보셨기를 바랍니다.
developer.mozilla.org
[출처 2] head 태그에는 무엇이 있을까? HTML의 메타데이터
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN
HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 메타데이터(작성
developer.mozilla.org
[출처 3] 메타데이터
https://terms.naver.com/entry.naver?docId=1224192&cid=40942&categoryId=32840
메타데이터
데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터. 속성정보라고도 한다. 대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따
terms.naver.com
'HTML & CSS' 카테고리의 다른 글
| 노마드 코더 코코아톡 클론코딩 복습용 정리(2) (0) | 2022.12.13 |
|---|---|
| 노마드 코더 코코아톡 클론코딩 복습용 정리(1) (0) | 2022.11.14 |
댓글