티스토리 블로그 링크 썸네일 추가, opengraph 활용

티스토리 썸네일

티스토리에서 지금까지 구 에디터를 사용하고 있었습니다.

구 에디터를 사용하면서 불편한 점은 전혀 없었습니다.

하지만 단 하나 링크를 걸 때 썸네일이 보이지 않는다는 것입니다.

그리고 코드를 수정해서라도 링크 썸네일이 넣고 싶었습니다.

많은 분들이 플러그인 -> 이전글 넣기 를 활용하여 글의 링크를 넣고 있습니다.

근데 이렇게 넣으면 한줄로 들어가고 예쁘지도 않고 그렇습니다.

인터넷에서 열심히 검색한 결과 opengraph라는 것을 이용하면 예쁘게 링크창을 넣을 수 있었습니다.

opengraph를 이용한 링크를 넣고 싶었는데 지금까지 구에디터를 사용하여 몰랐습니다.

opengraph 사용

참고로 opengraph는 페이스북에서 가장 먼저 시작한 링크 방법이고

여러가지 태그들로 되어 있습니다.

또한 링크를 걸었을 경우 굉장히 예쁘게 만들어줄 수 있습니다.

https://developers.facebook.com/docs/sharing/webmasters?locale=ko_KR#markup

Og:url -- URL이며 링크가 될 주소를 입력해주면 됨

Og:type -- 타입을 지정할 수 있으며 웹인지 앱인지 어떤 방식을 사용하는지

Og:title -- 해당 링크의 제목 (표시될제목?)

Og:description -- 설명, 제목 밑에 들어가는 설명 부분

Og:image -- 해당되는 글, 포스팅의 썸네일 이미지 http로 시작하며 절대주소로 작성해야함.

형식은

<meta property="og:image"  content="https://t1.daumcdn.net/cfile/tistory~~" 와 같은 형식을 사용합니다.

링크 썸네일 추가 방법

예시로 보여드리겠습니다.

opengraph를 이용하면 아래와 같이 네이버블로그처럼 링크를 넣을 수 있습니다.

이것은 예시를 보여드린 것입니다.

이렇게 링크를 추가하기 위해서는 먼저 구에디터를 새로운 에디터로 바꿔야 합니다.

구에디터에서는 아무리 하더라도 되지 않습니다.

콘텐츠 → 설정 으로 들어가면 신에디터로 바꿀 수 있는 부분이 있습니다.

새로운 글쓰기를 사용합니다. 로 바꿔서 저장해주시면 됩니다.

이렇게 신 에디터로 바꿔주면 이제 사용할 준비가 완료되었습니다.

링크를 넣을때 이전글 넣기 플러그인으로 넣으시면 됩니다.

신 에디터에서는 링크가 생깁니다.

두가지 방식이 있는데 플러그인에서 이전글넣기로 넣으셔도 되고

링크 삽입을 눌러서 링크삽입으로 눌러도 됩니다. 

왼쪽의 클립 모양 같은 것이 링크 삽입이고 ...을 누르면 플러그인이 나오는데 이전 글 넣기를 사용할 수 있습니다.

이제 이렇게 삽입을 하면 링크나 썸네일이 뜨지 않습니다.

이렇게 글자로만 뜨는 것을 볼 수 있습니다.

저렇게 파란 화면이 뜨고 있을 때 엔터를 눌러주시면 링크가 제대로 삽입이 되는 것을 볼 수 있습니다.

이렇게 사용이 되는 것을 볼 수 있습니다.

가끔 썸네일이 빈칸 T로 나오는 것들이 있습니다.

그것은 대표이미지를 설정해주지 않아서 그렇게 나오는 것이니 대표이미지를 설정해주시면 됩니다.

[IT/블로그] - 블로그 글 작성 팁, 좋은 문서 발행하기

[IT/블로그] - 티스토리 블로그 SSL 적용 이제부터 HTTPS, 속도는?

[IT/블로그] - 티스토리 구글 서치콘솔 플러그인 적용, 사이트맵 제출

도움이 되셨다면 공감 또는 댓글을 남겨주시면 작성자에게 힘이 됩니다.

문의사항 댓글도 환영합니다.