웹사이트의 메타데이터란 무엇일까?
마케터, 기획자, 개발자가 알아야 할 메타데이터
친구에게 카카오톡으로 맛집 링크를 공유했을 때, 링크의 미리보기 화면에 음식의 이미지와 설명이 나타난 적이 있는가? 미리보기 화면을 통해 우리는 이미지와 글의 일부를 볼 수 있고, 클릭하기 전에 무슨 콘텐츠일지 예측할 수 있다. 이제는 너무나 익숙해져버려서 미리보기가 나오지 않고, 텍스트 URL만 나오면 섭섭할(?) 지경이다.
카카오톡으로 식당 공유하면 요렇게... 이 미리보기 화면에서 중요한 역할을 하는 것이 바로 메타데이터이다. 그렇다면, 웹사이트를 담당하는 마케터, 개발자, 기획자는 메타데이터를 어떻게 활용해야 할까? 오늘은 메타데이터의 중요성과 활용 방법, 그리고 Open Graph 메타 태그를 포함한 구체적인 예시를 살펴보려고 한다.
1. 메타데이터란 무엇인가?
메타데이터는 웹페이지에 대한 정보나 설명을 제공하는 데이터이다. 즉, 메타데이터는 데이터에 관한 데이터라고 할 수 있다.
2. 메타데이터의 역할
웹사이트의 마케터, 기획자, 개발자가 메타데이터를 이해하고 활용하는 것은 중요한 일인데, 메타데이터가 검색 엔진 최적화(SEO), 소셜 미디어 공유, 웹사이트의 접근성 등에 영향을 주기 때문이다.
SEO (Search Engine Optimization): 검색 엔진이 웹페이지를 더 잘 이해하고 인덱싱할 수 있도록 정보를 제공한다.
소셜 미디어 공유: Open Graph 태그는 소셜 미디어에서 공유될 때 웹페이지의 미리보기를 제어하여 더 매력적인 콘텐츠로 보이게 한다.
웹사이트 접근성: 메타데이터는 웹사이트가 다양한 디바이스와 브라우저에서 올바르게 표시되도록 도와준다.
3. 메타데이터의 종류
마켓컬리 사이트를 통해 메타데이터의 종류에 대해 알아보자.
1) HTML 메타 태그
웹페이지의 <head> 섹션에 위치하며, 검색 엔진과 브라우저에게 웹페이지에 대한 정보를 제공한다.
<meta name="description" content="Better Life for All. 건강한 식재료부터 믿을 수 있는 뷰티, 라이프스타일 상품까지. 나와 내 가족이 사고 싶은 상품을 판매합니다. 내일 아침 문 앞에서 만나요!">
위와 같은 메타태그를 통해, 구글에 마켓컬리를 검색하면
요렇게 나온다!2) Open Graph 메타 태그
앞서 말한 카카오톡의 미리보기 화면에서 보이는 것처럼, 소셜 미디어에서 웹페이지가 어떻게 보이는지 제어한다. Facebook에서 개발했지만 현재는 많은 소셜 미디어 플랫폼에서 사용된다.
<meta property="og:title" content="컬리 - 마켓컬리/뷰티컬리">
<meta property="og:description" content="Better Life for All. 건강한 식재료부터 믿을 수 있는 뷰티, 라이프스타일 상품까지. 나와 내 가족이 사고 싶은 상품을 판매합니다. 내일 아침 문 앞에서 만나요!">
위와 같은 메타태그를 통해, SNS에 마켓컬리 링크를 공유하면
카카오톡은 요렇게
슬랙은 요렇게 나온다! 4. 실제 웹사이트의 메타데이터를 확인하는 방법
1) 페이지 소스 보기
웹사이트를 브라우저에서 열고 마우스 오른쪽 버튼을 클릭한 후 "페이지 소스 보기" 또는 "소스 보기"를 선택한다. <head> 섹션에서 태그를 찾을 수 있다.
2) 개발자 도구 사용
Chrome, Firefox와 같은 브라우저에서 Ctrl+Shift+I (Windows) 또는 Cmd+Option+I (Mac)을 눌러 개발자 도구를 연다. "Elements" 탭에서 <head> 섹션을 찾아보면 메타 태그를 확인할 수 있다.
1,2 방법을 통해 확인한 메타데이터3) 분석 사이트로 확인하는 방법
opengraph.xyz같은 사이트에서 URL를 입력하면, 웹사이트의 메타데이터를 분석하고 여러 SNS에서 각각 어떻게 보이는지 미리볼 수 있다.
예) 마켓컬리의 스탠리 텀블러 상품페이지 URL을 입력하면, 페이스북/X/링크드인/디스코드의 미리보기 화면에서 어떻게 나오는지 확인할 수 있다.
요렇게 나온다위에서는 메타데이터가 무엇인지 일부만 예시를 들어 설명했지만, 메타데이터의 세계는 이보다 훨씬 넓고 다양하다.
웹페이지의 제목을 지정하는 title 태그, 소셜 미디어에서 공유될 때 표시되는 이미지를 지정하는 image 태그 등 여러 가지 데이터가 있다.
또한, 이번 포스팅에서는 일반 메타데이터와 Open Graph 메타 태그 외에도, X(Twitter)를 비롯한 다양한 소셜 미디어에 특화된 메타 태그가 존재한다.
예를 들어, twitter:card, twitter:title, twitter:description, twitter:image와 같은 태그를 사용하여 트위터에서의 공유 미리보기를 최적화할 수 있다.
아까 예시로 본 마켓컬리에도 트위터용 태그가 있다 메타데이터를 잘 활용하면 검색 엔진과 소셜 미디어에서 더 많은 트래픽을 유도할 수 있다. 회사마다 메타데이터를 마케터, 기획자, 개발자 중 누가 담당하는지는 다를 수 있지만... 메타데이터에 대해 알고 있으면 본인의 롤에 따라 적절히 활용할 시점이 올 것이라 생각한다. 웹사이트가 더 많은 사람들에게 잘 노출될 수 있도록 최적화해보도록 하자..!
