lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

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

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

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

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

 

## 주요 Open Graph 태그

Open Graph 메타 태그는 웹 페이지의 소셜 미디어 미리보기를 제어하는 데 사용됩니다.

주요 Open Graph 메타 태그는 다음과 같습니다.

### og:title

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

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

 

### og:description

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

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

 

### og:type

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

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

 

### og:url

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

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

 

### og:site_name

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

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

 

### og:image

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

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

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

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