# 태그 시스템 구축하기
해시태그
# 서두
본 글에서는 블로그의 태그 시스템에 대해 간단히 조사해 보고 VuePress에 적용해보는 시간을 갖도록 하겠다.
# 블로그 태그 시스템에 대하여...
검색 엔진 최적화라는 주제를 조사하다가 문득 잘 만들어진 블로그들의 말머리나 말미에 해시태그들이 잔뜩 붙은 것이 떠올랐다.
#키워드1, #키워드2 이런 식으로...
SEO와도 관련이 깊을 것 같아서 몇개 블로그를 대상으로 크롬 개발자 도구를 띄워서 해시태그 조사를 해보았다.
대부분 블로그들의 해시태그는 a 태그로 이루어져 있었다. 결국 SEO와도 직간접적으로 영향을 미치게 될 것이다.
어느 블로그는 해시태그를 누르자 동일 서버 내의 모든 컨텐츠를 대상으로 해당 키워드로 검색을 해서 결과를 보여주었다. 마치 SNS의 해시태그 처럼 말이다. 일반적인 블로그 서비스들이 이런 방식이었다.
또 다른 블로그는 해시태그를 누르자 해당 블로그 내에서 같은 태그가 달린 글들만 보여주도록 구성되어 있었다. 아마도 개인이 구축한 사이트들이 그런 방식인 것 같았다.
정적 사이트 생성기인 VuePress에서는 어떻게 태그 시스템을 구축할 것인가?
# 정적 사이트 생성기와 태그 시스템
정적 사이트 생성기들이 태그 시스템을 구축하기 위해서는 해시태그 역시 빌드타임에 모두 결과를 만들어두어야 할 것으로 보인다. 일반적으로는 API를 사용해서 검색 결과를 받아와야 할텐데 API를 사용하는 시점부터 이미 정적 사이트는 아닌 셈이니 말이다.
VuePress에서는 태깅 시스템을 어떻게 구축할 것인지 검색도 해보고 구상을 해보았는데, 아직까지는 그런 기능은 없다(Blog Support Roadmap | VuePress GitHub (opens new window)). 오픈소스 기여자가 되어서 VuePress 빌드 로직에 추가를 하든지, 빌드타임 직전에 Preprocessor를 만들어 돌리는 방법이 있을 것 같다.
# VuePress와 태그 시스템
이 글을 쓰는 기간중에 다행히 누군가가 방법을 개발해두었다. Adding Tags to VuePress | code.roygreenfeld.com (opens new window) 나처럼 VuePress를 사용해서 VuePress를 연구하는 사람인가보다.
글을 읽어보니 사전에 미리 만들어두는 방식도 아니다.
VuePress에서 이미 $site라는 변수에 모든 페이지의 요약 정보를 담고 있기 때문에 그것을 활용하는 방식이다.
$site.pages[i].frontmatter를 참조하여 Vue 컴포넌트로 태그를 자동 생성하고, 태그 정보는 frontmatter에 담아 놓는 방식이다.
매우 훌륭한 방식이라고 생각된다. 나도 해당 글을 참고하여 태깅 시스템을 구축하였다.
본문의 처음에는 다음처럼 frontmatter 설정이 되어있다.
---
meta:
- name: description
content: VuePress에 태그 시스템을 구축하는 글입니다.
tags: ["VuePress", "Tags", "태그"]
---
2
3
4
5
6
본문의 마지막에는 다음처럼 Vue Component가 달려있다.
<TagLinks />
# 결론
블로그에도 태그를 다는 것이 여러모로 사용자 유입에 여러모로 도움이 된다는 것을 알게 되었다. 유입된 사용자가 관련 키워드로 다른 페이지를 찾아가므로 세션 유지에도 도움이 될 것이다.
Roy Greenfeld (opens new window)님 덕분에 고민에 빠지기 전에 태그 시스템을 손쉽게 구축할 수 있었다. 감사의 마음을 전할 길이 없지만, 여기에라도 감사를 표한다.