(웅팁꿀팁) 네이버 웹마스터도구 'Open Graph 제목, Open Graph 설명이 없습니다.' 1분 해결법

본인의 티스토리를 네이버 웹마스터 도구에 등록을 하였지만 네이버 웹마스터 도구의 '사이트 최적화'에서는

아래의 사진과 같이 '사이트 Open Graph 제목' 또는 '사이트 Open Graph 설명'이 없다는 안내와 함께 반갑지 않은 빨간색 엑스가 표시되는 경우가 있습니다.

티스토리를 운영하고 계신 여러분들은 1초라도 빨리 빨간 엑스를 초록색 체크로 바꾸고 싶은 욕구(?)가 생기시리라 생각이 되는데요 !

오늘의 웅팁꿀팁에서는 도대체 사이트의 Open Graph의 제목과 설명이 무엇이길래 수집을 하지 못하고 있는 건지,

어떻게 하면 사이트 Open Graph를 추가할 수 있는지 함께 알아보도록 하겠습니다 !

OG 태그(Open Graph Tag)란 무엇인가?

---

OG 태그는 Open Graph Tag의 줄임말로써 페이스북으로부터 시작된 규약입니다.

여러 사이트 및 콘텐츠들은 대부분 URL을 통해 공유가 되는데, 공유가 될 때 사이트 및 콘텐츠들을 표기하는 방식을 관리할 수 있는 것이 바로 이 OG 태그입니다.

OG 태그를 사용하지 않을 시 각 사이트의 봇(크롤러)들이 내부의 경험적 접근법을 사용하여 사이트를 분석 및 요약하여 가장 현실성 높은 추측을 내리지만,

OG 태그를 사용할 경우 이러한 정보들을 명시적으로 지정하여 사이트 및 콘텐츠들을 가장 최적화된 품질로 표시될 수 있게 합니다.

쉽게 말해 네이버, 구글 등에서 사이트를 검색을 하거나 URL을 통한 공유를 할 때 시 검색 결과에 노출되거나 공유되는 내용을 OG 태그를 통해 지정할 수 있는 것입니다.

하지만 추가적으로 본인의 티스토리에 OG 태그를 추가하지 않을 경우 OG 태그는 당연히 존재하지 않기에 네이버 웹마스터 도구에서도 수집하지 못하게 됩니다.

OG 태그 살펴보기

---

html

<meta property="og:url"                content="https://ungdoli0916.tistory.com" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="즐거'웅' 인생" />
<meta property="og:description"        content="오늘 하루도 충실하게 '나'로 살아가는, 웅이의 즐거운 인생 이야기 " />
<meta property="og:image"              content="https://tistory4.daumcdn.net/tistory/3031640/skin/images/logo.svg" />

og:url

티스토리 URL을 지정합니다.

og:type

사이트 및 콘텐츠의 타입을 지정합니다. (website 또는 app 등)

og:title

해당 사이트의 명(제목)을 지정합니다.

og:description

해당 사이트를 설명하는 내용을 지정합니다. (제목 아래의 설명으로 반영됩니다.)

og:image

사이트를 소개하는 썸네일 이미지를 지정합니다. (http:// 부터 시작하는 절대 주소로 저장하셔야 반영됩니다.)

내 티스토리에 Open Graph 제목, 설명 추가하는 방법

---

1. 아래의 태그를 복사(Ctrl+C) 합니다.

<meta property="og:url"                content="input_1" />
<meta property="og:type"               content="input_2" />
<meta property="og:title"              content="input_3" />
<meta property="og:description"        content="input_4" />
<meta property="og:image"              content="input_5" />

2. 본인의 티스토리 관리자 페이지에서 '스킨편집'을 클릭한 후 'html 편집'을 클릭합니다.

3. HTML 소스에서 <meta> 태그의 아랫부분에서 붙여넣기(Ctrl+V)합니다.

4. 각 태그의 content 부분을 본인의 티스토리에 맞게끔 수정한 후 '적용' 버튼을 클릭합니다.

(변경해야 하는 내용의 입력 내용이 궁금하신 분들은 클릭하시어 'OG 태그 살펴보기'의 내용을 확인해주시길 바랍니다.)

5. 네이버 웹마스터도구의 '사이트 최적화'로 들어가 Open Graph 제목과 설명이 정상적으로 반영되어있는지 확인합니다.

(반영까지는 다소 시간이 소요될 수 있으며 사이트맵을 새로 만드신 후 재등록하신다면 보다 빠른 반영을 확인하실 수 있으며, 사이트맵을 만들어 등록하는 방법은 아래의 이미지를 클릭하시면 해당 포스팅을 확인하실 수 있습니다.)

하지만 OG 태그는 필수록 등록할 필요는 없으며 등록하지 않는다고 해서 검색 결과에 영향을 끼치지는 않기에

보다 깔끔하게, 그리고 효과적으로 내 티스토리를 노출시키기 위한 하나의 방법이 될 수 있기에

해당 내용을 적용하시고 싶으신 분들은 적용 방법이 어렵지 않으니 순서대로 반영해보신다면 검색 최적화에는 분명 도움이 되리라 생각됩니다.

혹시나 OG 태그를 적용하시면서 궁금하신 부분이 있으시거나 잘되지 않으시는 분들은 언제든지 댓글 또는 이메일(ungdoli0916@naver.com)을 보내주시면 확인하여 답변드릴 수 있도록 하겠습니다.

그럼 이상으로, 네이버 웹마스터도구에서 Open Graph 제목과 설명이 없을 때 추가하는 방법에 대한 웅팁꿀팁의 포스팅을 마치겠습니다.

감사합니다 :D