서비스 기획자의 메타 태그(Meta Tag) 사용법
메타 태그로 서비스 디테일을 높여보자
목차
1. 서비스 완성도를 무시하면 안 됩니다.
2. 메타 태그로 서비스 디테일 챙기기
3. 웹 페이지 표기에 사용하는 메타 태그
4. 링크 공유에 사용하는 메타 태그
5. 모바일에서 사용하는 메타 태그
회사 오피스 툴에 능숙한 일잘러가 되고 싶다면?
투두리스트를 훔쳐보세요!
서비스 완성도를 무시하면 안 됩니다.
작년 10월, 핵심 가치 검증을 목적으로 최소 기능의 CBT 서비스를 만들어 테스트를 진행했다. 테스터 인터뷰에서 대다수 유저가 우리가 생각한 가설을 언급했을 때, 큰 희열을 느끼며 가치 검증이 성공적이라고 판단했다. 이제 우리가 해야 할 일은 완성도 높은 서비스를 만들어 런칭하기다
서비스를 다운로드한 시점부터 만족도를 평가 내리기까지의 시간은 점점 짧아지고 있다. 매일 다양한 서비스가 유저한테 쏟아지고 있는데, 이 와중에 서비스를 하나하나 신중히 사용해서 평가하기란 불가능에 가깝다. 서비스를 실행하자마자 불편하거나 마음에 들지 않는 부분이 있다면, 서비스는 쓰레기통으로 직행한다. 서비스가 계속 생존하기 위해선 (1) 유저가 원하는 가치와 더불어 (2) 높은 완성도를 제공해야만 한다.
아아... ChatGPT 그는 모르는 게 없습니다...메타 태그로 서비스 디테일 챙기기
1. 기획자라면 디테일을 챙겨야 한다.
서비스의 완성도를 결정하는 요소는 많지만, 디테일이 중요하다고 생각한다. 무심코 스쳐 지나갈 법한 부분에서 좋은 경험을 제공한다면, 유저는 서비스의 디테일적인 부분에 놀라며 만족감을 느낀다. 방심한 틈에 받는 선물이 가장 인상 깊다는 말도 있지 않은가?
서비스의 UI적 완성도는 디자이너에 의해 결정되지만, 서비스 디테일은 기획자에게 달려있다. 기획자가 어떤 부분까지 고려하는지에 따라서 서비스의 완성도가 달라진다. 하지만, 인간은 경험하지 못한 걸 생각조차 할 수 없는 운명이기에... 관련 경험과 지식이 없다면, 생각조차 하지 못해 놓치는 디테일이 너무도 많다. 이 중에서 메타 태그(meta tag)가 특히 그렇다.
아예 몰라서 놓치는 디테일이 많을 수도?2. 메타 태그란?
메타 태그는 웹사이트의 HTML을 구성하는 태그 중 하나로, 각 페이지를 설명하는 정보를 저장한다. 메타 태그는 페이지의 대표 정보를 저장하기에 <head> 태그에 종속된다. 그리고 name 혹은 property 변수로 메타 태그의 유형을 정의한다. 메타 태그라고 부를지라도 title, description, image 등 다양한 유형이 존재한다. 그리고 content 변수로 관련 정보를 저장한다.
<head>
<meta name = "description" content = "일잘러의 체크리스트를 훔치다">
<meta name = "og:description" content = "일잘러의 체크리스트를 훔치다">
</head>
이렇게 설정한 페이지 정보는 구글, 네이버 등의 검색 포털 사이트에 전달되어 우리 웹사이트가 외부로부터 검색될 수 있도록 도와준다. 이런 측면에서 메타 태그는 주로 SEO(Search Engine Optimization)를 목적으로 사용된다. 인터넷에 메타 태그를 검색하면, 아티클 대다수가 SEO와 관련해 이야기하고 있다. meta tag와 SEO가 궁금하면 관련 글(한 달 동안 검색 유저가 750% 증가했다고?)을 참고해 보자
주변에서 쉽게 접하는 메타 태그 정보가 SEO에 초점을 두기에, 이를 서비스의 디테일적 요소로 활용할 수 있단 생각을 하기는 힘들다. 메타 태그는 페이지를 설명하는 정보를 담는 "그릇"일 뿐이며, SEO는 이 그릇을 활용한 방법에 불과하다. 즉, 메타 태그는 SEO 말고도 다양한 목적을 위해 사용될 수 있다.
메타 태그, 좋아하세요? (출처 : <슬램덩크>)서비스의 디테일적 요소로 활용하는 메타 태그는 크게 아래와 같다. 더 많은 메타 태그가 있지만, 나는 이 정도의 메타 태그만 서비스를 기획할 때, 사용한다. 메타 태그를 어떻게 활용하면, 서비스의 디테일을 살릴 수 있는지 천천히 뜯어보자!
웹 페이지 표기에 사용하는 메타 태그
가장 먼저 <title>과 <meta description>을 봐보자. <title>과 <meta description> 태그를 활용하면, 유저에게 페이지 정보를 요약해서 전달할 수 있다.
<head>
<title>{pageTitle}</title>
<meta name="description" content="{description}">
</head>
<title>은 현재 페이지의 제목을 정의하는 태그인데, 여기서 설정한 제목이 브라우저 탭에 보인다. 아래 이미지에서 브라우저 탭을 보면 "Toomallㅣ일잘러의 투두리스트를 훔치다"이 적힌 걸 볼 수 있다. 이는 페이지 HTML에 <title> 태그 값을 아래처럼 입력했기 때문이다.
<head>
<title> Todomallㅣ일잘러의 투두리스트를 훔치다 </title>
</head>
웹사이트는 다양한 웹 페이지로 구성되며, 각 페이지마다 담고 있는 정보가 서로 다르다. 예를 들어, 서비스 소개 페이지는 서비스에 관한 자세한 정보를 담고 있는 반면, 기업 제휴 페이지는 기업 계약 및 프로세스 정보를 담고 있다. 이때, 개별 페이지마다 적합한 정보를 title 값으로 입력하면, 유저는 이동한 페이지마다 어떤 정보를 전달하는지 직관적으로 이해할 수 있다. 아래 이미지는 판매하는 콘텐츠(투두클래스)를 보여주는 페이지다. 브라우저 탭에 "Todomallㅣ개발 없이 서비스 만들기"라고 적힌 걸 볼 수 있는데, 이는 앞선 예시와 다르게 아래처럼 <title> 태그 값을 입력했기 때문이다.
<head>
<title> Todomallㅣ개발 없이 서비스 만들기</title>
</head>
이 외에도 <title> 태그는 유저의 정보 탐색 과정을 더 효율적으로 만들어 준다. 많은 유저가 브라우저 탭 기능을 활용해 한 번에 여러 웹 페이지를 켜놓은 상태로, 왔다 갔다 하며 정보를 탐색하는 패턴을 보인다. 이때, 페이지의 <title> 태그를 잘 설정하면, 각 탭에 들어가지 않고도 어떤 정보를 지니고 있는지 바로 확인하게 만든다.
<title>을 잘 설정하면, 각 탭이 어떤 정보를 담고 있는지 한눈에 확인할 수 있다.추가적으로, <title>과 <meta name="description">은 검색 포탈 결과 값으로 노출된다. 아래는 구글에서 "투두몰"을 검색했을 때, 나오는 결과 값이다. 이는 HTML에 아래처럼 태그 값을 입력했기 때문이다.
<head>
<title> 투두몰 ㅣ 일잘러의 투두리스트를 훔치다 </title>
<meta name = "description" content = "사수가 없는 당신을 위한 성장 체크리스트">
</head>
링크 공유에 사용하는 메타 태그
1. 카카오에서 페이지 링크 공유하기
<meta og> 태그를 이용하면, 페이지를 외부에 공유할 때 좋은 경험을 선사할 수 있다. 여기서 og는 open graphics의 약자로, <meta og>는 페이지 링크를 특정 채널에서 공유할 때 보여주는 값을 설정하는 태그다.
<head>
<meta property="og:title" content="{pageTitle}">
<meta property="og:description" content="{description}">
<meta property="og:image" content="{imageLink}">
</head>
우리가 특정 페이지 링크를 공유할 때를 생각해 보자. 채널에 따라 보이는 형태가 다른 걸 알 수 있다. 아래는 노션, 슬랙, 카카오 순으로 edu.todomall.kr 링크를 공유했을 때의 모습이다.
보여주는 형태는 다르지만, 내용은 모두 동일하다. 셋 다 제목으로 "투두몰ㅣ일잘러의 투두리스트를 훔치다"가 나왔고, 밑의 부제로 "일잘러의 투두리스트를 훔치다! 오피스 툴을 직접 따라하며 배우고, 과제를 통해 결과물을 만들어요."가 적힌 걸 볼 수 있다. 또한, 썸네일 이미지도 동일한 걸 볼 수 있다.
출력 내용이 동일한 이유는 <meta og>를 아래처럼 설정했기 때문이다. 유저가 특정 채널에서 페이지 링크를 공유할 때, 채널은 <meta og>에 기반해 출력 내용을 결정한다. <meta og> 태그에서 property 값이 (1) "og:title"은 제목을, (2) "og:description"은 제목 밑의 부제를, (3) "og:image"는 썸네일 이미지 값을 전달한다.
<head>
<meta property="og:title" content="투두몰ㅣ일잘러의 투두리스트를 훔치다">
<meta property="og:description" content="일잘러의 투두리스트를 훔치다! 오피스 툴을 직접 따라하며 배우고, 과제를 통해 결과물을 만들어요.">
<meta property="og:image" content="https://edu.todomall.s3.~">
</head>
2. 트위터에서 페이지 링크 공유하기
모든 채널이 <meta og>에 기반해 페이지 링크 공유 시, 출력 내용을 결정하는 건 아니다. 사파(?)의 길을 걷는 채널도 있는데 바로 트위터다. 트위터는 <meta twitter> 태그 값을 인식해 출력 내용을 결정한다. <meta twitter> 태그에서 property 값이 (1) "twitter:title"은 제목을, (2) "twitter:dtwitterescription"은 제목 밑의 부제를, (3) "twitter:image"는 썸네일 이미지 값을 전달한다.
<head>
<meta name="twitter:title" content="{pageTitle}" />
<meta name="twitter:description" content="{description}"/>
<meta name="twitter:image" content="{imageLink}"/>
<meta name="twitter:card" content="{type}"/>
</head>
또한, 트위터는 property 값이 "twitter:card"인 메타 태그를 추가적으로 사용한다. 해당 태그를 활용해 트위터에서 페이지 링크를 공유할 때, 보이는 형태를 다르게 설정할 수 있다. content 값이 "summary"라면 좌측 이미지가, "player"라면 우측 이미지가 나온다.
모바일에서 사용하는 메타 태그
<meta al> 태그를 사용하면, 모바일에서 특정 웹 페이지를 방문했을 때, 앱 내 페이지로 이동시킬 수도 있다.
<head>
<meta property="al:ios:url" content="{ios 앱 URL}" />
<meta property="al:ios:app_store_id" content="{ios 앱스토어 ID}" />
<meta property="al:ios:app_name" content="{ios 앱 이름}"/>
<meta property="al:android:url" content="{안드로이드 앱 URL}"/>
<meta property="al:android:app_name" content="{안드로이드 앱 이름}"/>
<meta property="al:android:package" content="{안드로이드 패키지 이름}"/>
</head>
예를 들어, 웹과 앱 모두를 가져가는 서비스라고 해보자. 웹 UI는 데스크탑에 최적화시켰고, 앱 UI는 모바일에 최적화시켰을 것이다. 근데 유저가 모바일에서 앱을 설치하지 않고, 굳이 웹에 접속시켜서 서비스에 들어오는 경우가 있다. 이런 경우, <meta al> 태그를 활용해서 모바일에서 접속할 때, 앱으로 이동시키게 만들 수 있다.
모바일 유저를 앱으로 보내버리는 <meta al>!회사 오피스 툴에 능숙한 일잘러가 되고 싶다면?
투두리스트를 훔쳐보세요!
