[블로그팁]네이버웹마스터도구 오픈그래프에 대해 알아보자 - 4
지난포스트에 이어
네이버 웹마스터도구에 인증 과 검색 등록
그리고 링크관리르 통해 네이버 웹마스터 도구 최적화 과정을 진행하고 있습니다.
네이버 웹마스터도구 사이트 최적화를 보게 되면 아직 빨간색으로 표시되어 있는 부분이 있는데요.
이번 포스팅에서는 사이트의 오픈 그래프에 대해 알아보겠습니다.
오픈그래프(Open Graph)
네이버웹마스터도구 오픈그래프 최적화 과정
위의 사진처럼 자신의 웹사이트에 오픈 그래프 설명이 없다고 표시를 해주는데요.
안의 상세 내용을 봐볼까요?
위의 이미지의 내용처럼 오픈그래프 태그는 사이트가 소셜 미디어로 공유 될때 우선적으로 활용되는 정보라고 하네요.
사용방법은 간단합니다. 위의 태그를 그대로 메모장에 붙인 이후
자신의 웹사이트 내용으로 채워준 후 html편집 도구 창에서 </head> 위쪽으로 붙여주시면 됩니다.
소셜미디어 항목에 위와 같은 태그가 있는데 밑으로 twitter도 있네요.
현재 트위터에서는 오픈그래프태그를 기반으로 한 자체적인 트위터 open graph가 존재합니다.
해당태그가 존재한다면 우선적으로 twitter 메타 태그를 참조하지만 없다면 open Graph를 참조합니다.
저는 open graph 와 twiter 메타태그를 동시에 넣어보겠습니다.
<!-- open graph 설명-->
<meta property="og:type" content="website">
<meta property="og:title" content="나타">
<meta property="og:description" content="나타의 세상만사">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="http://haworldly.tistory.com">
<!-- twitter meta -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="나타">
<meta name="twitter:description" content="나타의 세상만사">
<meta name="twitter:image" content="이미지 URL">
<meta name="twitter:domain" content="http://haworldly.tistory.com">
위처럼 네이버웹마스터도구에서 메타태그를 긁어 와서 자신의 링크가 미리보기 될시
보여질 내용들로 채워보았습니다.
(이미지 url은 저같은 경우에는 저의 메인 사진의 링크를 복사해와서 채워넣었습니다.)
이후 네이버웹마스터도구에서 검색로봇이 스캔할 때까지 기다리면 됩니다,
(웹사이트마다 스캔되는 시간이 다릅니다.)
