ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 메타태그에 대한 이해
    IT 지식 2021. 8. 19. 20:42
    728x90

     

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

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

    SEO

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

    IE = Edge

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

    뷰포트 설정

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

    웹크롤러 피하기

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

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

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

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

     

    728x90

    'IT 지식' 카테고리의 다른 글

    [TIL] 자바스크립트 this  (0) 2021.12.06
    Redux Thunk & Saga  (1) 2021.11.23
    그래프에 대한 이해  (0) 2021.08.18
    [TIL]캐싱  (0) 2021.07.25
    React-Quill을 활용하여 게시판 만들기(with TypeScript)  (0) 2021.07.21

    댓글

Designed by Tistory.