안녕하세요! 꿀둥지입니다.
블로그를 운영하면서 SEO 최적화에 대해 들어봤을 것입니다. 그 중에서도 최적화를 위한 기술적인 부분인 <meta> 를 활용하는 방법도 있다는 걸 알고계시는 분들도 많을 겁니다.
![](https://blog.kakaocdn.net/dn/kGxra/btslcCkPLlw/KvPrJJx0SeRAMLxzByMf71/img.png)
하지만, 메타 데이터가 도대체 무엇인지, 어떻게 넣어야 하는지 제대로 알지 못하는 경우가 많습니다. 이 글에서는 "어떻게 하시면 됩니다!"라는 방향보다는 html을 구조와 개념을 알아보고 meta기능의 이해를 돕기위한 내용을 포스팅하고자 합니다.
HTML의 기본 구조
HTML은 블로그 글을 작성하고 표시하는 데 사용되는 언어입니다. HTML언어를 보면 정말 복잡해 보이지만 크게는 <html> </html>의 사이에 <head></head> 와 <body></body> 두 구조로 되어있습니다.
[html의 기본구조]
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<!-- 내용이 여기에 들어갑니다 -->
</body>
</html>
<!DOCTYPE html> 선언
대체로 보통의 유저들이 수정하지 않는 태그이지만, 이해를 돕기위해 간단하게 설명드리겠습니다!
<!DOCTYPE html>은 HTML 문서의 형식 지정하는 태그입니다.
HTML 문서의 형식을 `<!DOCTYPE html>`로 지정하는 것은 HTML5를 사용한다는 의미입니다. HTML5는 현재 웹 페이지 작성에 가장 널리 사용되는 HTML 버전이자 가장 최신 웹 기술이니 예외 상황이 거의 없이 고정되게 사용한다고 생각하시면 되겠습니다.
<html> 태그
HTML 문서의 루트 요소는 HTML 문서의 최상위 요소를 말합니다. 이 요소는 <html> 태그로 표현되며, 모든 HTML 문서의 시작점이 됩니다. <html> 요소 HTML 문서의 전체 내용을 감싸고 있으며, <head>와 <body> 요소를 포함하고 있습니다. 이 또한 저희가 수정하지 않는 태그로 어떤 역할만 하는지 이해해주시면 되겠습니다.
<head> 태그
이 글의 핵심이 되는 요소입니다.
<head> 요소는 HTML 문서의 메타(meta)데이터, 스타일 시트, 스크립트 등을 정의하는 부분입니다. 이 요소는 웹 페이지의 설정과 정보를 정의하는 데 사용됩니다. <head> 요소에는 여러 가지 요소들이 포함될 수 있습니다.
[head]의 기본 구조
<head>
<title>웹 페이지 제목</title>
<meta name="description" content="웹 페이지에 대한 간단한 설명">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<style>
/* 내부 스타일 시트 */
body {
background-color: #f1f1f1;
}
</style>
</head>
주요한 <head> 요소들은 다음과 같습니다:
<title>
웹 페이지의 제목을 정의합니다. 이는 브라우저 탭에 표시되거나 검색 결과에서 페이지의 제목으로 표시됩니다.
<meta>
저희가 중점적으로 다룰 메타 데이터 요소입니다. 일반적으로 웹 페이지의 내부 동작이나 SEO에 영향을 미치지만, 독자들에게 직접적으로 보여지지는 않습니다. 예를 들어, <meta> 요소는 웹 페이지의 제목, 설명, 키워드 등을 정의할 수 있습니다.
예를 들어,
<meta name="description" content="웹 페이지에 대한 간단한 설명">과 같이 사용하여 페이지의 간단한 설명을 웹검색엔진에 제공할 수 있습니다. 자세한 내용은 나중에 다시 자세히 설명드리겠습니다.
<link>
우리가 잘 알고 있는 블로그의 스킨 또는 테마와 연관된 부분으로 외부 스타일 시트, 폰트 파일 등의 외부 리소스를 연결합니다. 주로 CSS 파일을 연결하는 데 사용됩니다. 이는 <meta>와 다르게 독자들에게 보여지는 부분으로 블로그의 첫인상과도 같습니다.
<script>
JavaScript 코드를 포함하거나 외부 스크립트 파일을 연결합니다. 페이지에 대한 동적인 기능을 추가할 수 있습니다. 예를들어 ppt에서 구현하는 요소의 이동, 사이즈 변경, 색상 변경, 페이드 인/아웃 등의 에니메이션 효과라고 생각하시면 됩니다.
기타 메타데이터나 설정과 관련된 요소들: 예를 들어, Open Graph Protocol 태그, favicon 설정 등 다양한 요소들이 있습니다.
이러한 <head> 요소들은 웹 페이지의 설정, 검색 엔진 최적화, 접근성, 외부 리소스 연결 등을 다루는 데 사용됩니다. <head> 내에 있는 각 요소들은 제가 작성한 요소의 순서대로 나열이 되어있지만, 순서가 바뀐다고 크게 영향을 주지는 않는다고 합니다.
<body> 태그
<body> 태그는 실제로 표시되는 콘텐츠를 정의하는 데 사용됩니다. 블로그 글의 내용은 주로 <body> 태그 내에 작성됩니다. 예를들어 제가 작성하는 컨텐츠가 <body>에 포함이 됩니다.
구글 서치 콘솔과 <meta> 데이터
<meta> 데이터는 <head>태그 공간에 포함된 요소입니다. 메타 데이터는 검색 엔진에 블로그 글에 대한 정보를 제공하며, SEO에 중요한 역할을 합니다.
특히, 구글 서치 콘솔에서 주는 메타 태그를 등록하는 행위는 검색 엔진에게 웹 페이지에 대한 추가 정보를 제공하는 것을 의미합니다. 이를 통해 검색 엔진은 해당 페이지를 더 잘 이해하고 색인화할 수 있으며, 사용자에게 더 정확하고 유용한 검색 결과를 제공할 수 있습니다.
그리고 구글 서치 콘솔에서 주는 메타 태그는 주로 사이트 소유권 확인을 위한 HTML 태그인 "인증 메타 태그"를 포함합니다. 이 태그를 웹 페이지의 <head> 섹션에 추가함으로써 구글은 해당 웹 페이지의 소유자임을 확인하고, 구글 서치 콘솔에서 해당 웹 페이지와 관련된 데이터와 통계를 제공할 수 있게 됩니다.
다음은 추가적인 메타 데이터의 주요 기능들을 나열해보겠습니다.
가장 일반적으로 사용되는 메타 태그는 다음과 같습니다:
제목 태그 (Title Tag):
`<title>` 태그는 웹 페이지의 제목을 정의합니다. 이 제목은 검색 결과 페이지에 표시되는 링크의 제목으로 사용되며, 검색 엔진이 페이지의 주제를 이해하는 데 중요한 역할을 합니다. <meta>의 요소는 아니지만 검색 엔진에 영향을 주는 요소입니다.
예시: `<title>블로그 제목 - 블로그 주제</title>`
메타 설명 태그 (Meta Description Tag):
`<meta name="description" content="메타 설명 내용">` 태그는 웹 페이지의 간단한 요약 설명을 제공합니다. 이 설명은 검색 결과 페이지에서 해당 페이지에 대한 요약으로 표시되며, 사용자들에게 페이지의 내용을 미리 알려주는 역할을 합니다.
예시: `<meta name="description" content="간편한 요리 레시피와 신선한 재료로 맛있는 요리를 즐기세요.">`
메타 키워드 태그 (Meta Keywords Tag):
`<meta name="keywords" content="키워드1, 키워드2, 키워드3, ...">` 태그는 페이지와 관련된 주요 키워드를 정의합니다. 그러나 이 태그는 검색 엔진의 랭킹에 큰 영향을 주지 않으며, 대부분의 검색 엔진에서는 무시하거나 거의 사용하지 않는다고 합니다.
예시: `<meta name="keywords" content="간편 요리, 레시피, 요리법, 건강한 요리">`
글맺음
메타 태그와 구글 서치 콘솔의 사용은 검색 엔진 최적화 (SEO)에 중요한 역할을 합니다. 이를 통해 웹 페이지의 가시성과 검색 결과에서의 노출성을 향상시킬 수 있으며, 웹 사이트의 성능과 블로그 글을 읽는 독자들에게 편리함을 줄 수 있습니다.
제가 쓰다보니 너무 어렵게 써서 이번에는 글이 너무 어려웠을지 않았나는 생각이듭니다. 그렇지만 html과 <meta>랄 통한 SEO 최적화의 과정에 이해를 드리는데는 큰 도움이 되셨으리라 생각합니다.
오늘 글은 마무리 하도록 하겠습니다!
꿀둥지였습니다.