2016. 1. 8. 22:51ㆍIT, INTERNET
티스토리 블로그를 운영하면서 네이버 웹마스터도구에 블로그를 등록하고 사이트 노출 현황에 나타나는 Open Graph 항목이 있어 알아보게 되었습니다.
<head> 태그 내부에 들어가는 메타태그로 이미지와 사이트의 제목, 설명 등을 넣어서 만들어주게 되면 쇼셜미디어로 공유되거나 네이버 블로그나 카페에서 Open Graph를 설정한 웹사이트를 링크하면 아래와 같이 이미지와 설명이 들어가는 박스 형태로 생성되게 해줍니다.
▲ Open Graph 태그를 넣었을 때 나타나는 이미지, 제목, 내용입니다.
| Opne Graph 설정 방법
http://webmastertool.naver.com/guide/basic_markup.naver#chapter1.3
▲ 위 링크 페이지는 네이버 웹마스터도구에서 제공되는 <meta> 태그의 내용이며 소스를 복사해서 사용할 수 있는데요. 각 항목별로 현재 블로그에 적용한 태그는 아래와 같습니다.
<meta property="og:type" content="blog">
<meta property="og:title" content="홀리G's 워크스페이스">
<meta property="og:description" content="영화, TV, IT 인터넷, 어플 등의 리뷰를 담는 블로그입니다.">
<meta property="og:image" content="http://cfs.tistory.com/custom/blog/195/1955701/skin/images/Open_Graph.png">
<meta property="og:url" content="http://holyg.kr">
▲ 초록색으로 표시된 부분은 운영하는 티스토리 정보를 입력하면 되며 빨간색으로 표시된 링크는 다음과 같이 만들어낼 수 있습니다.
▲ 티스토리 관리 페이지로 이동 후 [HTML/ CSS 편집] 메뉴를 클릭합니다.
▲ ① [파일업로드] 탭을 선택하고 ② [+추가] 버튼을 클릭해서 사용할 이미지를 업로드합니다. ③추가된 이미지에 마우스 오른쪽 클릭 후 [링크 주소 복사]를 클릭하면 해당 이미지의 주소가 복사됩니다. 위 방법은 크롬 브라우저를 사용했을 때며 인터넷 익스플로러에서는 [바로 가기 복사] 메뉴를 활용하면 됩니다.
▲ [HTML] 탭에서 <head> 태그 내부에 메타태그를 붙여 넣고 조금 전 복사한 이미지 주소를 붙여 넣어줍니다.
▲ Open Graph 메타태그를 입력이 완료되었다면 소셜 미디어로 공유되거나 네이버 카페나 블로그에서 '링크 추가'하면 위와 같이 나타나게 됩니다.
▲ 웹마스트도구에서의 '사이트 노출' 메뉴는 어느 정도 시간이 지나면 해당 항목들이 적용되었다는 초록색 체크 표시가 나타납니다. 사이트 최적화를 위해서 Open Graph 메타태그를 꼭 넣어두세요.
'IT, INTERNET' 카테고리의 다른 글
| 네이버 웹마스터도구 사이트 등록과 네이버 검색 수집 요청 (2) | 2016.01.16 |
|---|---|
| 티스토리 메일 주소 생성 방법 (2) | 2016.01.11 |
| 동물과 셀카의 달인 '알란 딕슨'의 인스타그램 (0) | 2016.01.06 |
| 포토샵으로 파비콘 제작하고 티스토리 또는 홈페이지 적용 (0) | 2016.01.03 |
| 태터데스크 플러그인으로 티스토리 첫페이지 만들기 (0) | 2016.01.02 |