메타태그에 대한 이해

임수현·2021년 8월 19일
0


Html의 head는 페이지나 css의 링크, 파비콘, 그리고 다른 메타데이터를 포함하는 태그입니다. 즉 페이지에 대한 메타데이터를 포함하는 역할을 하는 것입니다.

메타태그를 활용하면 다음과 같은 일을 할 수 있습니다.

SEO

메타태그에 description, keywords, author, subject, 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용합니다.

IE = Edge

인터넷 익스플로러 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7 모드를 사용해서 웹페이지를 표시합니다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링 되지 않을 수도 있는데, 이때 메타태그를 활용하여 최신 엔진으로 페이지를 렌더링 할 수 있습니다.

뷰포트 설정

메타태그를 활용하여 뷰포트도 설정할 수 있습니다. 뷰포트란 사용자에게 보여지는 화면의 크기라고 할 수 있는데, 메타태그를 활용하여 이 뷰포트의 크기를 고정시킬 수도 있고, device-width와 같은 값을 활용하여 상대적으로 유연하게 적용할 수도 있습니다.

웹크롤러 피하기

웹크롤러는 웹 상의 여러 문서들을 긁어서 문서를 적당한 형태로 저장합니다. 우리 페이지가 꼭 검색이 되어야 하는 경우라면 이 웹 크롤러에 노출이 될 수 있도록 노력해야겠지만, 꼭 숨겨야 하는 데이터라면 크롤러를 피해야 합니다. 이때 메타태그를 활용하여 이를 피할 수 있습니다.

자동으로 다른 페이지로의 이동

웹사이트를 방문하게 되면 자동으로 다른 페이지로 넘어가는 것을 경험해보신 적이 있으실 겁니다. 이는 메타태그를 활용해서 쉽게 구현할 수 있습니다.

이 외에도 메타태그를 활용하면 우리가 보고 있는 html 페이지에 대한 다양한 정보를 제공할 수 있습니다. 의미있는 페이지를 만들기 위해서는 이러한 메타태그를 적극적으로 활용하는 것이 좋겠네요.

profile
상상을 구현하고픈 프론트엔드 개발자입니다.

0개의 댓글