![[hexo] 블로그 링크 공유시 제목, 이미지 커스텀하기](/make-a-pretty-link-preview/cover.png)
[hexo] 블로그 링크 공유시 제목, 이미지 커스텀하기
커스텀! 커스텀을 하자!
나는 원래 ‘내 개인의 것’이라는 생각이 들면 내 입맛대로 조금씩 바꾸는 것을 좋아한다.
어렸을 때부터 휴대폰을 사면 가장 먼저 하는 것이 배경화면과 테마, 앱배치를 조정하는 일이었다.
깃블로그를 만들고 나서도 가장 먼저 _config.yml을 열어 제목과 기본 정보들을 내 것으로 채워넣었다.
여기까진 쉽고 자료도 많았다. 문제는 내 블로그를 지인에게 자랑하거나, 글을 써서 공유하려고 만든 링크의 미리보기가 마음에 들지 않는다는 것이었다.
내가 사용하는 이카루스 테마의 기본 미리보기는 이렇다.
나쁘지는 않지만 마음에 드는 것은 아니었다. 뭐를 바꿔야 할지 몰라서 _config.yml과 _config.icarus.yml 을 샅샅이 뒤졌지만 무엇을 바꿔야 할 지 알 수 없었다. 그래서 일단 의심가는 곳을 다 설정해봤다.
음…바뀌긴 했는데 하도 많은 곳을 건드려서 어디를 바꾼 것이 유효타인 줄도 모르겠고, 우선 내가 원하는 대로 바뀐 것도 아니었다. 그래서 설정을 다시 되돌리고 조금 더 생각해보기로 했다. 이때 설정 파일에서 open_graph 라는 항목을 발견했지만 뭔지 몰라서 넘어갔다(그러지 말았어야 했다).
기본 이미지는 어디서 설정하는 거지?
이상한 것이, 위의 기본으로 생성되는 이미지와 문구도 결국 어디선가 가져왔을 텐데 그럼 어딘가 cdn으로 가져오거나 폴더 내에 파일이 있지 않겠는가? 그래서 일단 프로젝트 폴더를 뒤져보았다.
.deploy_git 폴더가 의심스러워서 열어보니 img 폴더가 있었고 하나씩 파일을 열어보니 og_image.png라는 파일이 위의 대표 이미지와 동일했다.
찾았다! 그럼 이제 내가 원하는 사진을 넣고 그 파일 명을 og_image.png로 하면 되겠다!
…싶었지만 명색이 개발자인데 이건 너무 야매(?)가 아닌가 싶어 철회했다.
분명 어디선가 정의하든 선언하든 할당하든 설정을 잡아주는 코드가 있을 것이다!
(이때 이미지 파일 이름이 og_image인 걸 잘 봤어야했다)
다음에 내가 한 것은 hexo 공식 사이트에 가서 검색한 것이었다. 기본 사용 가이드에서 찾아보니 외부 링크를 hexo 블로그 내부에 인용했을 때 예쁘게 보여주기 이런 내용밖에 없었다.
그럼 hexo 플러그인은?외부 링크 블라블라 플러그인 가운데 하나가 눈에 띄었다.
내가 원하는 게 맞는 것 같았다. 그런데 레포를 보니 간단하게 뭘 설치하고 yml 파일을 조금 수정하면 되는 게 아니었다. 일단 이 플러그인의 read.md는 내게 layout.ejs 를 아래와 같이 수정하라고 했는데 내가 사용하고 있는 hexo-icarus에는 그 어디에도 layout.ejs 파일이 없었다.또 나만 안되지 공식문서랑 블로그는 다 되는데 나만 안돼
1 | <html> |
그때 meta 태그 부분의 og:image가 눈에 띄었다. 이게 뭔데 아까부터 자꾸 보이는 걸까?
내 블로그를 개발자 도구로 열어서 element를 확인해봤다.
og: 가 붙은 태그가 잔뜩 있었다. 다시 _config.icarus.yml 을 열어보니 open_graph가 눈에 들어왔다.
모르는 걸 보면 검색을 하자
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
social graph가 뭔데…?
소셜 그래프(Social Graphe)는 소셜 네트워크를 표현하기 위해 사용되는 구조다. 소셜 그래프는 노드(Node)와 링크(Tie)로 이루어져 있다. 노드는 소셜 네트워크상에서 활동하는 각 개개인들을 나타내고, 링크는 이들 노드간의 관계를 표현한다. 이 그래프는 소셜 네트워크의 특성을 시각화하여 보여준다.
쉽게 말해 open_graph를 이용하면 개발자가 웹사이트의 정보를 미리 보여줄 수 있다는 거였다.
나는 당장 설정 파일을 고치고 카카오톡으로 내 블로그 글의 링크를 나에게 보내봤다.
뭔가 이상하다.
일단 푸른 바다 사진이 나오자 나는 기쁨의 단말마를 내뱉었다. 예쁘다!
그런데 제목이 이상했다.
블로그 제목이 잘 표시된 건 맞지만, 나는 블로그의 기본 url을 공유한 게 아니라 특정 게시물을 공유했다. 내 의도대로 되었다면 제목 자리에 게시글의 제목이 표시되어야 했다. 이런 식이라면 내가 무슨 글을 공유하든 미리보기는 늘 내용이 같을 것이 아닌가?
N사 서비스 중 세부 검색결과를 공유해도 늘 대표 url이 공유되는 것 때문에 불편을 겪어본 지라, 이 점이 마음에 걸렸다.
다행히 클릭하면 내가 원하는 게시글로 잘 이동했지만 그래도 불만족스러웠다.
블로그 게시글 화면에서 개발자 도구를 다시 켰다.
어? 왜 og:url이 게시글 url이 아니지? 설정파일에 적은 값들은 어떻게 태그로 변환되는 걸까? 중간에 무슨 문제가 있는 걸까?
layout.ejs는 없었지만 styl 파일이 있길래 확인했더니 head.jsx를 임포트 하고 있었다.
1 | // ... |
title={open_graph.title || page.title || config.title} 을 보고 각각 확인해 보니 open_graph.title은 비어 있고 page.title은 잘 들어가 있었다. 그런데 왜 제대로 뜨지 않을까? url 때문이겠지? 왜 기본 url로 og:url이 설정될까? 이 부분에서 꽤 오래 삽질을 했다. 콘솔에 변수를 찍어보고 값이 있는 걸 확인하고 몇 번이고 generate를 하고 알고 보니 내가 설정 파일에서 open_graph의 url을 블로그 기본 url로 해놨더라. 그러니 url={open_graph.url || page.permalink || url}에서 기본 url이 먼저 할당되어 버린 거였다. 하하…코드를 잘 읽자… 역시 컴퓨터는 죄가 없다. 잘못하는 건 항상 나다
그 부분을 지워주고 page.permalink가 값이 잘 들어가는 것을 확인한 뒤 다시 배포하고 게시글 링크를 공유했다.
와! 드디어 제목이 들어갔다!!! 나는 자리에서 벌떡 일어났다. 그리고 3초 후 앉았다. 게시글 커버 있는데 왜 반영 안됐지?
이쯤 되면 조금 까다로운 사람이라는 생각이 들겠지만, 나는 만족할 수 없었다. 이 글은 내가 직접 커버까지 찍은 글이어서 그런가 상당히 마음에 드는 사진이었기 때문이다.
head.jsx를 확인해보니 if문을 타고 og:img가 있는지를 확인하면서 내가 기본으로 설정한 바다 사진이 최종적으로 할당되는 것을 확인했다. 그래서 그 부분을 살짝 바꿔주었다.
1 | let openGraphImages = images; |
그리고 기대에 차서 다시 확인했다.
이걸로 끝이다!
정말 그렇게 생각했는데. 저 대사가 온갖 이야기에서 절대 이대로 안 끝난다는 걸 보여주는 플래그라는 걸 왜 잊었을까.
링크 미리보기는 그대로였다. 왜일까? open_graph에 대해서 다시 찾아보니, 이 정보는 한 번 생성되면 웹에서 캐시를 가지고 있어 변경사항이 있어도 반영이 매우 느리다고 했다. 나는 url자체가 바뀌는 등의 변화가 있어서 바로 바뀌었던 모양이다. 다행히도 메타와 카카오에서 아주 좋은 것을 제공하고 있었다.
위 링크에 접속해서 원하는 사이트의 url을 입력하면 웹 크롤러가 수집한 페이지의 메타 데이터를 캐싱한 것을 지워준다.
그리고 직접 페이지를 공유하지 않고도 내가 이 페이지를 배포했을 때 수집되는 메타 데이터를 미리 확인할 수 있다.수많은 나에게 보내기를 안 해도 됐던 거다
최종적으로 내 _config.icarus.yml 파일의 open_graph 부분은 이렇다.
3줄 요약
- config 파일에서 open_graph를 찾는다
- og:title, og:url, og:image 등 원하는 태그를 변경한다.
- 이전에 해당 페이지를 공유한 적이 있다면 위의 디버거 등을 통해 캐싱한 것을 삭제 후 공유한다.
[hexo] 블로그 링크 공유시 제목, 이미지 커스텀하기