#1. 메타 태그란?

홈페이지 기획을 하면서 콘텐츠 외에도 신경을 써야하는 부분이 있다는 것을 알게되었는데,

그것이 바로 '메타 태그(Meta Tag)' 였습니다.

메타 태그란?

'태그(Tag)'의 사전적 의미를 살펴보면, (어떤 표시를 하기 위해 붙인) 꼬리표 라고 합니다.

이처럼 메타 태그란 웹 사이트 상에서 해당 사이트가 어떤 사이트인지를 알 수 있도록 하기 위한 꼬리표이자 검색 엔진 최적화(SEO)를 위해 사용하는 태그라고 하는데요.

홈페이지 기획 시 기획자 입장에서 서버 개발자에게 전달해주었던 메타 정보는 크게 두 가지로 나눠볼 수 있었습니다.

1. 기본 메타 정보 (타이틀, 디스크립션, 키워드 등)

타이틀

말 그대로 해당 웹 사이트의 제목입니다.

타이틀로 설정한 문구는 사이트를 열기 전 검색 엔진에서도, 링크를 클릭한 후 탭에서도 확인할 수 있습니다.

동영상에서는 썸네일이 영상을 클릭하도록 유도하는 요소라면, 웹 사이트에서는 타이틀이 그런 요소가 아닌가 싶습니다.

(참고를 위해 제가 전달했던 내용을 이미지로 첨부하였습니다. 모든 사이트 들에서 메타 정보를 확인할 수 있어요.)

디스크립션

웹 사이트의 설명 문구입니다. 웹 사이트 타이틀 하단에 나오는 문구입니다.

타이틀만으로 설명하기 위한 웹 사이트에 대한 설명을 이 태그를 이용하여 할 수 있습니다.

키워드

해당 웹 사이트가 검색 엔진에서 상위 랭크할 수 있도록 주요 키워드를 설정해주는 요소입니다.

검색 엔진은 해당 사이트에 있는 모든 텍스트를 수집하여 검색이 가능토록 기능하니다만,

키워드를 설정해주면 검색 엔진이 굳이 사이트의 모든 텍스트를 읽지 않아도 바로 결과를 제공할 수 있기 때문에 효과적으로 웹 사이트를 노출할 수 있습니다. (개발자 모드를 켜지 않는 이상, 타이틀이나 디스크립션처럼 사용자에게 바로 보여지지는 않아요.)

2. 오픈 그래프 태그 정보 (타이틀, 디스크립션, 이미지 등)

오픈 그래프 태그는 줄여서 'og tag' 라고도 합니다.

웹 사이트를 페이스북이나 카카오톡 등의 SNS로 공유를 할 때 뜨는 썸네일의 문구나 이미지를 이 'og tag'를 활용하여 설정할 수 있는데요.

타이틀 / 디스크립션

메타 정보 내의 타이틀, 디스크립션과 동일한 기능입니다. 하지만 태그를 보면 조금 다릅니다.

즉, 오픈 그래프의 정보는 웹 사이트에서 검색 했을 때 결과와 다르게 노출할 수 있습니다.

하지만 보통은 동일하게 설정하는 것 같아요.

오픈그래프 이미지

SNS 공유 시 보여지는 썸네일 이미지입니다.

카카오톡, 페이스북, 네이버 블로그 등 해당 썸네일 사이즈는 조금씩 다른데요.

그렇기 때문에 특정 SNS에 맞춰 이미지를 꽉 채울 경우 일부 이미지가 잘릴 수 있어 주요 텍스트나 이미지를 포함해야 하는 경우는 중앙에 위치하는 경우가 많다고 합니다.

권장 사이즈인 1200*630 (1:1.91 비율)로 들어가야 할 텍스트와 이미지를 디자이너 분께 전달드린 후 받은 결과물을

개발자분께 전달드리면, 해당 이미지를 서버에 올려 이미지 링크를 달아줍니다.

사용자의 접근성과 용이성을 생각했을 때 검색 엔진 최적화는 웹 사이트 기획 시 정말 필수적인 요소인 것 같습니다.

회사 홈페이지는 비교적 일반 사용자들의 접속량이 많지는 않지만,

그래도 이 기회를 통해 메타 태그가 무엇인지, 왜 필요한지, 어떤 것들을 전달하면 되는지 정리할 수 있어 좋았습니다.

앞으로도 이처럼 실무에서 경험하고 배웠던 것들을 주니어 기획자 입장에서 차근차근 정리해보도록 할게요.

주니어 기획자의 기록