lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />

    
    <title>코드프렌즈 | 가장 실용적인 소프트웨어 학습 플랫폼</title>

    
    <meta
      name="description"
      content="코딩은 어렵고 특별한 기술이 아니에요. 실생활 문제를 해결하는 실용적인 코딩을 배워 보세요!"
    />
  </head>

  <body>
    <h3>HTML head 태그를 확인해 보세요</h3>
  </body>
</html>

# SEO 메타 태그 - title, description

SEO는 "Search Engine Optimization"의 약자로, **검색 엔진 최적화**라고 합니다. 간단히 말하면, 웹사이트가 검색 엔진에 더 잘 노출되도록 하는 기법을 뜻합니다.

SEO 작업에서 `title`과 `description`는 검색 결과에 노출될 웹페이지의 제목과 설명을 표시한다는 점에서 특히 중요합니다.

<br />

## 1. title 태그

`title` 태그는 웹 페이지의 제목을 정의합니다. 이 제목은 웹 브라우저의 탭에 표시되고, 검색 엔진 결과에도 제목으로 표기됩니다.

코드프렌즈를 검색 엔진으로 검색하면 `코드프렌즈 | 가장 실용적인 소프트웨어 학습 플랫폼`이라는 제목이 나오는데, 이것이 바로 코드프렌즈의 `title` 태그에 해당하는 내용입니다.

### 예시:

```html title="title 태그 예시"
<head>
  <title>웹 개발 기초 학습하기</title>
</head>
```

<br />

## 2. description meta 태그

`description` meta 태그는 웹 페이지에 대한 간단한 설명을 정의합니다.

description(설명)은 검색 결과에서 페이지 제목 아래에 짧은 문구로 표시되기 때문에, 신중하게 작성해야 합니다.

### 예시:

```html title="description meta 태그 사용 예시"
<head>
  <meta name="description" content="웹 코딩 입문을 위한 기초 학습 자료" />
</head>
```

<br />

## 참고

- 검색 엔진은 웹서비스 내 모든 페이지의 `title`과 `description`이 페이지의 성격을 반영해 다르게 설정되는 것을 선호합니다.