카카오톡이나 페이스북에서 링크 주소를 보내다 보면 위에 이미지처럼 간단한 미리보기가 생성되는 것을 볼 수 있습니다. 티스토리에서는 아래와 같이 링크 주소를 붙여 넣고 엔터를 치면 자동으로 링크 아래에 이미지와 간단한 정보가 나타납니다. 원래는 기본 이미지인 티스토리 로고가 있지만 이미지도 바꾸고 텍스트도 변경할 수 있는 방법을 알아보겠습니다.
기본 메타 데이터 입니다. 티스토리에서는 블로그 관리 > 스킨 편집 > html 편집으로 들어가서 <head> 태그 부분에 아래 메타 데이터를 추가하면 됩니다.
<meta property="og:url" content="http://ecoding.tistory.com"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="IT 노트" />
<meta property="og:description" content="유용한 정보를 공유하는 공간" />
<meta property="og:image" content="이미지 경로"/><meta> 데이터를 <head> 태그 사이에 추가하면 됩니다. 각 메타 데이터의 속성에 따라 값을 적어 주시면 됩니다.
- og:title - 웹사이트의 제목입니다. (ex : IT 노트)
- og:type - 개체유형은 website입니다.
- og:image - 이미지 경로 url.
- og:url - 웹사이트의 url.
- og:description - 웹사이트에 대한 간단한 설명.
본인의 웹사이트에 맞게 content 속성 값을 변경해서 추가하면 됩니다.
참고사이트
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
댓글