HTML 문서 메타데이터 마스터하기 - SEO 최적화

소개

이 랩에서는 HTML <head> 태그를 사용하여 HTML 문서를 만드는 방법을 배웁니다. <head> 태그는 사용자에게 보이지 않는 웹 페이지에 대한 메타데이터 및 기타 정보를 제공하는 데 사용됩니다. HTML 문서에 대한 <head> 태그를 생성하는 데 필요한 단계를 살펴보겠습니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 중급 레벨의 실험이며 완료율은 78%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

HTML 문서 생성

먼저, index.html이라는 파일에 HTML 문서를 생성해 보겠습니다.

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

HTML 문서에 제목 추가

<title> 태그는 웹 페이지의 제목을 정의하는 데 사용됩니다. <head> 태그 안에 위치해야 합니다. HTML 문서에 <title> 태그를 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

HTML 문서 제목 수정

"My Awesome Webpage" 텍스트를 다른 내용으로 변경하여 HTML 문서의 제목을 수정해 보겠습니다. "My Awesome Webpage" 텍스트를 원하는 제목으로 바꾸십시오.

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

문자 인코딩 추가

문자 인코딩은 브라우저에서 문자가 표시되는 방식을 정의하는 데 사용됩니다. <meta> 태그를 사용하여 문자 인코딩을 정의할 수 있습니다. 다음 <meta> 태그를 <head> 태그 안에 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

HTML 문서에 CSS 스타일 추가

<head> 태그 안에 <style> 태그를 사용하여 웹페이지에 CSS 스타일을 제공할 수 있습니다. 다음 <style> 태그를 <head> 태그 안에 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

외부 스타일시트에 링크 추가

<link> 태그를 사용하여 외부 CSS 스타일시트를 HTML 문서에 연결할 수도 있습니다. styles.css라는 새 파일을 만들고 다음 CSS 스타일을 추가하십시오.

h1 {
  color: red;
}

그런 다음, <head> 태그 안에 다음 <link> 태그를 사용하여 이 스타일시트를 HTML 문서에 연결하십시오.

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Base URL 추가

<base> 태그는 HTML 문서에서 사용되는 모든 상대 URL 에 대한 기본 URL 을 제공하는 데 사용됩니다. <head> 태그 안에 <base> 태그를 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

요약

이 랩에서는 HTML <head> 태그를 사용하여 웹 페이지에 대한 메타데이터 및 기타 정보를 제공하는 방법을 배웠습니다. <title> 태그를 사용하여 HTML 문서의 제목을 정의하고, <meta> 태그를 사용하여 문자 인코딩 및 기타 메타 정보를 정의하며, <style> 태그를 사용하여 CSS 스타일을 제공하고, <link> 태그를 사용하여 외부 스타일시트를 연결하고, <base> 태그를 사용하여 모든 상대 URL 에 대한 기본 URL 을 제공할 수 있습니다.