티스토리 뷰

Frontend-dev/HTML-CSS-JS

메타 태그의 중요성

RunningWater 2018. 12. 31. 15:39

메타 태그란?

html은 두 부분으로 구성되어 있습니다. 바로 head 태그와 body 태그입니다. body 태그에는 실제로 사용자에게 보여주는 컨텐츠들이 들어가게 됩니다. head 태그에는 "메타 태그" 및 미리 다운로드 해야할 "링크(태그)"들이 들어갑니다. 보통 메타 태그들을 간과하기 쉬운데, (저를 포함해서) 앞으로 잊지말고 잘 작성하자는 의미로 포스팅을 쓰게 되었습니다.

쉽게 설명하자면 메타 태그는 사이트에 대한 정보이 들어간다고 생각하시면 됩니다. 이러한 정보들은 사실 우리가 읽는 것은 아닙니다. 바로 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는 것이죠.

검색 엔진에 상위권으로 노출된다는 것은 아주 좋다고 할 수 있습니다. 메타 태그들을 잘 작성하면 크롤러들이 우리가 만든 사이트에 대한 정보를 더 잘 수집할 수 있고, 그러면 우리의 사이트가 상위권으로 노출 되는 것이죠.

메타 태그와 검색 엔진의 실제 예시

구글에서 "라프텔"이라는 사이트를 검색했습니다.(홍보하는 거 아닙니다.)

라프텔 검색구글에서 라프텔을 검색했습니다.


라프텔 - 애니 추천 ~ 이렇게 뜨죠? 이 부분은 head 태그 안에 title 태그 입니다. 그리고 그 밑에 사이트 대한 설명은 <meta name="description" content=""> 태그에 컨텐츠 값으로 설정된 부분이 나옵니다. 이렇게 메타 태그를 설정하면 검색 엔진에서 사이트가 어떻게 보일 지 정할 수 있습니다. 그 밑에 부분은 크롤러가 h 류의 태그에서 가져온 것들입니다.


개발자 모드로 태그 확인개발자 모드로 태그를 확인해보세요.


또 중요한 것은 <meta name="keywords" content=""> 부분입니다. 검색엔진에서 검색을 할 때 사이트에 적절한 키워드를 적어주는 것이죠. 


위에 사진에 키워드를 조합해서 구글에서 "애니 스트리밍"을 검색해볼까요?


구글 검색 결과구글에서 검색한 결과입니다.


애니 스트리밍으로 검색하니 가장 첫 번째로 라프텔이 나오게 됩니다. 애니 스트리밍 사이트가 라프텔 하나만 있을까요? 그건 아니겠죠. 여러가지 이유가 있겠지만 해당 검색으로 가장 상위권에 나온 이유는 "메타 태그"의 영향도 있을 것입니다.



홍보 아닙니다. 사실적인 예를 위해서 이름을 그대로 노출시켰습니다. (상위권 노출을 원한다면)메타 태그를 꼭 사용해주세요. 


댓글