(웅팁꿀팁) 구글에서 내 티스토리 검색 시 티스토리 설명을 추가하여 검색 최적화하는 방법 (Open Graph 태그 추가)

본인의 티스토리를 구글의 검색 결과에 노출시키기 위해서는 구글 서치 콘솔을 통해 해당 사이트를 등록하여야 노출이 되게 됩니다.

그렇기 때문에 이전의 웅팁꿀팁 포스팅에서는 본인의 티스토리를 구글의 검색 결과에 포함 시키기 위해,

구글 서치 콘솔을 통해 사이트맵을 등록하고 RSS를 등록하는 방법뿐만 아니라 노출이 되지 않는 포스팅은 구글 서치 콘솔의 URL 검사 기능을 통해 추가적으로 노출시키는 방법 또한 살펴보았습니다.

(혹시라도 해당 방법들이 궁금하시거나 아직 적용하시지 않으신 분들은 아래의 이미지를 클릭하시어 해당 포스팅을 확인해주시길 바랍니다.)

이렇게 위에서 안내드리는 방법들을 모두 적용하셨다면 본인의 티스토리가 구글에서 정상적으로 노출이 되지만

이처럼 사이트의 이름과 주소가 표시된 이후, 그 아래에 노출되는 사이트 설명 부분은 본인의 티스토리의 가장 첫 화면의 텍스트를 기본적으로 노출시키게 됩니다.

하지만 이 영역은 티스토리의 HTML 소스에 OG 태그(Open Graph Tag)를 추가함으로써 구글 검색 결과에 노출되는 본인의 티스토리에 대한 정보 등을 노출시키고자 하는 내용으로 설정하실 수 있는데요 !

본인의 티스토리가 "구글 검색 결과에 노출만 되어도 상관이 없다" 하시거나 "지금 노출되는 사이트 설명이 나쁘지 않다" 하시는 분들은 추가적인 작업 없이 그대로 사용을 하셔도 검색이 되고 유입이 되는 과정에 전혀 문제는 발생하지 않지만,

원하지 않는 내용이 노출되거나 해당 영역을 깔끔한 소개글로 노출을 시키고자 하시는 분들은 아래의 내용들을 참고하시어 적용해주신다면 보다 깔끔하고 효과적으로 노출을 시킬 수 있습니다.

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

---

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

여러 사이트 및 콘텐츠들은 대부분 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:// 부터 시작하는 절대 주소로 저장하셔야 반영됩니다.)

티스토리에 OG 태그를 적용하는 방법

---

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 태그 살펴보기'의 내용을 확인해주시길 바랍니다.)

위처럼 OG 태그를 티스토리의 HTML 소스에 추가하게 되면 이후로부터는 적용한 내용으로 구글 검색에 노출되게 됩니다.

하지만 위의 방법대로 잘 적용하였음에도 불구하고 검색 결과에 변화가 없는(반영이 되지 않은) 경우가 발생할 수 있는데요 !

그 이유는 이전에 로드했던 캐싱이 남아있는 것이 원인입니다.

웹 브라우저는 반복적으로 호출되는 특정한 데이터를 리로드 할 시 보다 빠르게 데이터를 공급해주기 위해

캐시 메모리에 임시로 데이터를 저장하게 되는데,

캐싱에는 TTL(Time-To-Live)라는 소멸 시효가 있지만 이 소멸시효가 지나지 않은 경우 아무리 데이터를 변경해도 이전 데이터를 계속해서 불러오기에

실제로는 수정이 되었음에도 불구하고 이전에 임시로 저장된 데이터를 불러오는 경우가 발생할 수 있습니다.

하지만 이와 같은 경우를 대비하여 페이스북에서는 "Sharing Debugger"이라는 기능을 지원하고 있으며,

이 기능을 통해 본인이 적용한 OG 태그가 실제로 잘 반영이 되었는지 즉시 확인하실 수 있습니다.

페이스북의 "Sharing Debugger" 기능을 통해 OG 태그 반영 여부를 확인하는 방법 또한 아래에서 안내 드리도록 하겠습니다.

Facebook for developers를 통해 OG 태그 및 원본 태그 확인하는 방법

---

1. 해당사이트로이동 좌측 링크를 클릭하여 해당 사이트로 이동한 후 페이스북에 로그인합니다.

2. URL 입력 칸에 본인의 티스토리 주소를 입력한 후 '디버그' 버튼을 클릭합니다.

3. 최초 디버그 체크 시 페이스북에서 공유된 적 없는 URL이라는 알림이 뜨면 '새 정보 가져오기' 버튼을 클릭합니다.

4. 디버그 페이지에서 입력한 URL의 오픈 그래프 속성 및 원본 태그 또한 한눈에 확인하실 수 있으며,

기존 기본값으로 지정되어있던 OG 태그의 내용이,

입력한 태그로 변경이 되었음을 확인하실 수 있습니다.

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

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

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

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

그럼 이상으로, 구글에서 내 티스토리 검색 시 티스토리 설명을 추가하여 검색 최적화하는 방법에 대한 웅팁꿀팁의 포스팅을 마치겠습니다.

감사합니다 :D