메타 태그를 통한 SEO 최적화: HTML 기본 구조와 <meta> 데이터 이해하기

카테고리 없음

메타 태그를 통한 SEO 최적화: HTML 기본 구조와 <meta> 데이터 이해하기

꿀둥지1 2023. 6. 26. 02:27

안녕하세요! 꿀둥지입니다.

블로그를 운영하면서 SEO 최적화에 대해 들어봤을 것입니다. 그 중에서도 최적화를 위한 기술적인 부분인 <meta> 를 활용하는 방법도 있다는 걸 알고계시는 분들도 많을 겁니다.

하지만, 메타 데이터가 도대체 무엇인지, 어떻게 넣어야 하는지 제대로 알지 못하는 경우가 많습니다. 이 글에서는 "어떻게 하시면 됩니다!"라는 방향보다는 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> 데이터

제목 태그 (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 최적화의 과정에 이해를 드리는데는 큰 도움이 되셨으리라 생각합니다.

오늘 글은 마무리 하도록 하겠습니다!

꿀둥지였습니다.