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 property="og:title" content="웹사이트 제목" />
    <meta property="og:description" content="웹사이트 설명" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/my-web-page" />
    <meta property="og:site_name" content="웹사이트 이름" />
    <meta property="og:image" content="https://picsum.photos/200/300" />
  </head>

  <body>
    <h1>웹사이트 제목</h1>
    <p>
      Open Graph를 활용해 소셜 미디어에 URL 미리보기 이미지와 설명을 표시해
      보세요.
    </p>
    <img src="https://picsum.photos/200/300" alt="대표 이미지" />
  </body>
</html>

# SEO 심화 - 오픈그래프(Open Graph)

웹 페이지를 인스타그램, 페이스북과 같은 소셜미디어에 표현하는 `Open Graph`에 대해 알아보겠습니다.

오픈 그래프는 영화의 제목, 주요 배우, 간략한 줄거리와 함께 이미지를 표현하는 영화 포스터와 같습니다.

Facebook에서 개발한 Open Graph 프로토콜(통신규약)은 소셜 미디어에 웹페이지의 제목, 설명, 이미지와 같은 메타데이터를 제공하고, 링크의 미리보기 이미지를 보여줄 때 사용합니다.

<br />

## 주요 Open Graph 태그

### 1. `og:title`

웹 페이지의 제목을 정의합니다.

```html title="웹사이트 제목"
<meta property="og:title" content="웹사이트 제목" />
```

<br />

### 2. `og:description`

웹 페이지의 간단한 설명을 정의합니다.

```html title="웹사이트 설명"
<meta property="og:description" content="웹사이트 설명" />
```

<br />

### 3. `og:type`

웹 페이지의 종류(예: website, article)를 정의합니다.

```html title="웹사이트 종류"
<meta property="og:type" content="website" />
```

<br />

### 4. `og:url`

웹 페이지의 정확한 주소(URL)를 지정합니다.

```html title="웹사이트 주소"
<meta property="og:url" content="https://example.com/my-web-page" />
```

<br />

### 5. `og:site_name`

웹사이트의 이름을 정의합니다.

```html title="웹사이트 이름"
<meta property="og:site_name" content="웹사이트 이름" />
```

<br />

### 6. `og:image`

- 링크 미리보기 이미지 URL을 지정합니다.

```html title="웹사이트 미리보기 이미지"
<meta property="og:image" content="https://example.com/my-image.jpg" />
```

Open Graph는 Facebook에서 개발한 프로토콜로, 웹 페이지를 소셜 미디어에서 공유할 때 더 잘 표현할 수 있도록 메타데이터를 제공합니다. 이를 통해 소셜 미디어에서 링크의 미리보기 이미지와 같은 정보를 보여줄 수 있습니다.

### Open Graph는 웹 페이지를 소셜 미디어에서 더 잘 표현하기 위해 메타데이터를 제공하는 프로토콜이다.

SEO 심화 - 오픈그래프(Open Graph)

주요 Open Graph 태그

1. og:title

2. og:description

3. og:type

4. og:url

5. og:site_name

6. og:image

Open Graph는 웹 페이지를 소셜 미디어에서 더 잘 표현하기 위해 메타데이터를 제공하는 프로토콜이다.

1. `og:title`

2. `og:description`

3. `og:type`

4. `og:url`

5. `og:site_name`

6. `og:image`