티스토리 썸네일링크 넣는방법 새에디터 OpenGraph 기능 소스코드복사

兴趣/IT

2020. 3. 28. 07:00

요즘은 페이스북, 트위터 등에서 링크거는 것처럼 오픈그래프 기능을 이용한 썸네일 링크가 보편화되었다. 네이버 블로그를 요즘 하진 않지만 가끔 지식인에 답변달때 링크걸면 자동으로 썸네일 링크가 걸려서 좋던데, 그 기능을 티스토리 블로그에서도 적용할 순 없을까?


방법1 티스토리 API 이용 자체제작 에디터 사용

 

Editor

API를 사용한 Editor입니다.

tistory-editor.tistory.com

이런식으로 썸네일을 포함한 큼직한 링크박스로 걸리도록 말이다. 단순히 URL 주소만 표시해놓는 것보다는 이렇게 이미지형태 링크아이템을 제공하는 것이 방문자에게 더 관심을 유도하고 높은 클릭율을 달성할 수 있을 것이다.


구글에 찾아보니 위 블로그에서 티스토리 API를 이용하여 자체제작한 티스토리 에디터를 무료로 배포하고 있다.


방법은 간단하다. 에디터 프로그램에서 티스토리 로그인을 한 후 글쓰기 또는 수정 화면에서 우하단에 화살표 아이콘을 누르고, Rich Editor 를 선택한다. 그다음 상단메뉴에 재생버튼처럼 생긴 멀티미디어 삽입 아이콘을 누른다.


걸고 싶은 링크 주소를 입력후 확인을 해주면 미리보기로 OG 썸네일링크가 표시된다. 이렇게 별도의 에디터를 사용해서 티스토리 썸네일링크를 만들 수 있고, 얼마전까지 많은 블로거들이 주로 애용했던 방법으로 보인다.


하지만...


이 방법을 사용해서 기존 글을 수정했더니 본문에 올려놨던 이미지들이 모두 날라가서 이렇게 보이는 사태가 벌어졌다. 아아... HTML 소스가 완전히 엉망진창이 되어버려서 어떻게 복구해야할지도 감이 안잡히는지라 그냥 눈물을 머금고 글 하나를 날려버렸다.


티스토리 표준 스킨 기준으로 에디터를 제작했을테니 내가 쓰고있는 이런 유료스킨에는 호환이 안되나보다. 이 방법은 나한텐 안맞는걸로... 에디터 프로그램은 삭제했다.




방법2 티스토리 새에디터 사용하기


그런데 이렇게 뭘 설치하고 말고 할 필요도 없었다. 티스토리 새 에디터에서는 기본적으로 OG(Open Graph) 방식의 썸네일 링크 기능을 제공하고 있는 것이었다!!!


블로그 관리메뉴에서 콘텐츠 - 설정을 들어간 다음 새로운 글쓰기를 사용합니다로 바꿔주고 저장을 하면 새 에디터가 사용모드로 바뀐다.


그리고 새 에디터에서 글 작성시에 링크를 입력하고 엔터만 치면 이렇게 알아서 썸네일 링크가 삽입된다. 개편리...... 그동안 계속 구에디터를 써오고 있어서 이 기능이 추가된 것을 인지하지 못하고 있었다 이런




방법3 구에디터로 글작성, 새에디터에서 썸네일링크만 따오기


그러나 또 문제가 생겼다.


새에디터에서 글을 작성하면 사진 밑에 이렇게 여백공간이 붙어서 표시가 된다. 뭐얌... 이것도 아마 새 에디터가 내가 쓰는 프라치노공책 유료스킨과 완전 호환이 안돼서 생기는 문제가 아닌가 싶은데


새에디터는 사진을 업로드하면 각 이미지마다 주석으로 설명을 달 수 있는 기능이 있다. 그것 때문에 하얀 하단여백이 생성되는데 주석을 달지 않을 경우는 여백이 사라져야 마땅하나 어찌된 이유인지 저렇게 거슬리게 보이고 있다.


또 한가지는 현재 사용중인 프라치노 공책 스킨에서 맘에 드는 부분으로, 본문 텍스트는 화면 좌우폭에서 일정 여백을 두고 가독성을 확보하여 표시되지만, 이미지의 경우는 화면 좌우까지 꽉찬 상태로 보여지도록 되어있다.


블로그 하면서 내가 제일 좋아하는 기능이 바로 이것이다. 새 에디터로 하니 이또한 적용되지 않고 이미지가 본문 텍스트 폭과 같이 좌우가 줄어서 출력이 된다. 맘에 안들어 맘에 안들어...


그래서 결론은!! 구에디터로 글을 작성하고, 새에디터에서 썸네일 링크만 따오는 식으로 하기로 했다. 조금 수고스럽더라도 ㅠㅠ


새에디터에서 썸네일링크를 만들고 HTML모드 보기를 하면 썸네일 링크의 소스코드를 알 수 있는데 위와같이 figure 부분에 들어있다. figure 시작부터 끝까지 몽땅 복사해서 구에디터의 HTML 모드에서 붙여넣어주면 똑같이 출력된다.


여기서 한가지, 쿠팡 파트너스를 위해 추천링크를 삽입한 경우 (아마 다른 사이트의 추천링크도 그럴 수 있을듯) 보면 이렇게 원래 입력한 URL 주소말고 Open Graph 기능이 알아서 페이지 주소를 추출하여 링크를 건 것을 알 수 있다. 


coupa.ng/ 이런식으로 되어있는 내 추천주소 압축url로 걸어놓았으나 a href 뒤에 있는 부분은 실제 상품페이지 주소로 추출되어서 걸려있다. data-source-url 부분의 원래주소를 복사해서 a href= 뒤에 붙여넣어주어야 처음 의도한 주소로 링크가 이동된다.


왜냐면 쿠팡 추천주소의 경우 이렇게 자신의 추천코드가 들어간 주소로 이동되어야 인정이 되기 때문에다. 압축url 주소를 클릭해서 이동해야만 이렇게 쿠팡파트너스 추천코드 포함된 주소로 이동이 된다. 복사하면서 이거까지 바꿔줘야 하니 번거롭긴 하다.


HTML 소스를 붙여넣고 구에디터 편집모드에서 보면 이렇게 뭔가 일그러져 보이지만, 


글 발행을 하고 본문을 확인해보면 썸네일 링크가 정상적으로 나오는 것을 알 수 있다. 이렇게 티스토리 블로그에서도 다른 사이트들처럼 OG(Open Graph) 기능을 이용한 썸네일 링크를 걸 수 있고, 구에디터 글에도 삽입하여 혼용사용이 가능한 방법을 찾아보았다.


앞으로 예쁜 글 작성을 위해 자주 이용해야겠다.