메타태그

  • 면접에서 자주 질문이 들어오지만 답변을 하지 못했던 메타태그에 대해 알아보자.

메타태그란(MetaTag)

  • HTML5 tag중 하나
    • html의 태그 요소중 하나.
  • <head> 태그의 자식 태그로 사용된다.
    • 자식태그들인 script나 style, link, title 등 으로는 나타낼 수 없는 메타데이터를 표현하기 위해 사용 된다.
  • 메타 태그는 html 페이지에 어떤 내용이 들어있는지 미리 알려주는것.
    • 화면에는 다르게 보여주지는 않는다.
    • 하지만 검색엔진이나, 브라우저가 읽어서 사용한다.

메타 태그의 효과

  • 브라우저가 페이지를 해석하는데 도움을 준다.
  • 검색엔진이 페이지를 읽을때 이 정보를 활용한다.
    • SEO(검색엔진 최적화)에 도움을 준다.
  • sns공유시 썸네일에서도 이정보를 활용한다고 한다.

메타태그의 예시

  • 매타태그가 어떻게 사용되는지 예시를 알아보자.
  • 인코딩을 위한 charset, author, viewport, robots, 페이지의 내용을 위한 decription, 검색 키워드를 위한 keywords등이 존재한다.
  • 그외에 og:, twitter:와 같은 특정 메타데이터 프로토콜도 존재한다.

인코딩

  • <meta charset="utf-8"/>
  • utf-8로 인코딩을 진행하라는 의미의 메타태그
  • 크롬은 자동으로 utf-8이지만, 그외의 브라우저를 위해 작성해준다고 한다.

컨텐츠의 저자

  • <meta name="author" content="홍길동">
  • 해당 페이지의 저자가 누구인지 정의가 가능하다.
  • 저자 정보를 통해 검색엔진에 신뢰성을 주고, 검색 결과에 저자정보를 표시할 수 있다.
  • 브라우저 툴에서 이 메타데이터를 읽고 사용자에게 표시 가능, rss리더나 집계 도구에서 author정보 표시할 수 있다.
  • SEO에서도 이 정보를 통해 콘텐츠 작성자와 그 평판을 이해 할 수 있게 된다.

컨텐츠 묘사

  • <meta name="description" content="이 웹 페이지는 웹 개발에 대한 정보를 제공합니다.">
  • 해당 웹 페이지의 내용을 요약하는데 사용된다.
    • 검색 결과에서 요약문구로 표시될 수 있다.
  • SEO관련하여 검색결과에서 요약문구로 표시되어 클릭에 영향을 주거나, 검색 결과에 눈에 띄게 하여 클릭을 유도할 수 있다.
  • 소셜 미디어 공유시에 미리보기 설명으로 활용 가능

검색 키워드

  • <meta name="keywords" content="HTML, CSS, JavaScript, 웹 개발">
  • 해당 웹페이지의 키워드나 검색어를 정의하는데 사용
  • 과거에는 검색 순위에 중요한 요소였지만, 현재는 줄어들었다고 한다.
    • SEO 초기에 사용
      • 특정 키워드를 지정하여 해당 페이지의 카테고리, 주제를 알릴수있음
      • 검색 순위를 결정
    • 일부 웹사이트의 검색엔진에서 활용
  • 현재에서 keywords의 역할
    • 스팸 문제
      • 검색 순위 조작에 keywords를 과도하게 넣는등 스팸행위 증가
    • 키워드보다 컨텐츠의 중요성 증가
      • 검색엔진이 실제 컨텐츠와, 사용자경험, 페이지 속도, 모바일 최적화, 등의 요소를 더 고려하기 시작함

뷰포트 설정

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 다양한 디바이스에서 어떻게 표시될지 제어하는데 사용됨
  • 사용되는 속성은 width, height, initial-scale, minimum-scale, maximum-scale, user-scalable, interactive-widget 이 있다. - 현재 디바이스에 맞추기 위해 width=device-width, height=device-height와 같이 지정할 수 있다. - 줌레벨 제어를 위해 initial-scale로 처음 로드될때의 줌레벨을 지정한다. minimum-scale, maximum-scale을 통해 최소 최대의 줌인, 줌아웃을 지정할 수 있다. 이런 줌인 줌아웃을 허용할지에 대한 user-scalable도 설정 가능하지만 no로 하면 WCAG에 위배된다고 한다. - 가상 키보드 같은 대화형 ui위젯이 뷰표트에 미치는 영향을 지정하는 interactive-widget를 이용해 제어

참고

  • https://ltr2006.tistory.com/m/34
  • https://jake-seo-dev.tistory.com/316
  • https://socaeri.com/entry/Meta-Tags-%EB%A9%94%ED%83%80-%ED%83%9C%EA%B7%B8%EB%9E%80
  • https://devowen.com/271
  • https://prmblogs.tistory.com/13
  • https://velog.io/@azd2013/%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84-%EA%B4%80%EB%A0%A8%EA%B8%B0%ED%83%80
  • https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag