메타태그를 쉽게 볼 수 있는 Metatags.io

메타태그란

메타태그란 해당 웹페이지에 대한 정보를 담고 있는 태그이다. 좀 더 정확히 이야기하면, 이 페이지의 제목은 무엇인지, 썸네일은 무엇인지 등을 개발자가 헤더에 작성해두면 검색엔진이나 외부 서비스에서 참고하는 용도이다. 예를 들어 아래 처럼 슬랙에 이미지를 공유했을 때 사이트의 이름, 제목, 내용, 썸네일 등이 나오고 있는데 모두 메타태그에 저장된 내용을 가지고 오는 것이다.

메타태그 내용은 웹페이지의 헤더에 포함되어 있다. 예를 들어, og:title, og:description, og:image 등이 위 슬랙 메시지에서 컨텐츠를 구성하고 있음을 알 수 있다. 나 역시 이 부분을 신경쓰지 못해서 블로그 글을 공유했을 때 나타나는 이미지가 TailwindBlog 라고 나타나고 있다.

메타태그 볼 때 흔히 겪는 어려움

메타태그가 잘 구성되어있는지 볼 때 쉽게 사용할 수 있는 방법은 텔레그램이나, 슬랙, 카카오톡 등에 한번 보내보는 것이다. 하지만 이 방법은 문제가 하나 있다. 많은 서비스에서 이 메타태그는 효율성을 위해 한번 저장해두면 상당기간 캐싱해둔다. 개발 중에 잘 적용되어있는지 수정하면서 보려고 하면, 언제나 수정 전에 값이 한동안 계속 나타난다. 나 역시 이런 문제로 고민하다가 직장동료의 추천으로 metatags.io 라는 사이트를 알게 되었다. 유용하다는 생각이 들어서 추천한다.

사이트 소개 metatags.io

사이트의 사용법은 단순하다. 접속하게되면 검색창이 있는데, 메타태그를 확인하고 싶은 사이트의 주소를 넣고 버튼을 누르면 끝이다. 그러면 잠시 후에 유명한 서비스에서 어떻게 메타태그가 나오는지 확인할 수 있다. 구글, 트위터, 페이스북, 링크드인, 핀터레스트, 슬랙에서 어떻게 보여지는지 쉽게 볼 수 있다.

맺으며

이미 알고 있다면 별거 아닌 내용이지만, 모르는 사람에게는 참 유용한 기능이다. 무엇보다 개발자가 아니더라도 쉽게 사용할 수 있어서 많은 사람들이 잘 사용했으면 좋겠다.