[HTML] <meta> 속성

Youn·2022년 1월 7일
0

HTML

목록 보기
1/1

❓정의 및 특징

  • 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
    그 외의 <base>, <link>, <script>, <style>, <title> 요소(elements)가 있음
  • 제공된 정보는 브라우저나 검색 엔진 최적화(SEO, Search Engine Optimization), 다른 웹 서비스에서 사용
    마케팅과 직접적인 연관
  • 항상 <head> 요소 내부에 위치
  • 만약 name 속성이나 http-equiv 속성이 명시되었다면, 반드시 content 속성도 함께 명시

🖥 속성

⌨️ charset

  • HTML5에서 새롭게 추가된 속성
  • 해당 문서의 문자 인코딩 방식을 명시
  • <meta charset="UTF-8">
    유니코드를 인코딩(encoding)하는 방식
    영어뿐만 아니라 한국어 등 전세계 언어를 모두 표시할 수 있음

⌨️ name

  • 메타데이터를 위한 이름을 명시함
    어떤 정보의 형태를 갖고 있는지 알려줌
  • 반드시 content 속성도 함께 명시
  • <meta name="정보의 형태" content="정보값">

⌨️ http-equiv

  • content 속성에 명시된 값에 대한 HTTP 헤더를 제공함
  • name 속성을 대신하여 사용될 수 있음
  • 반드시 content 속성도 함께 명시
  • <meta http-equiv="속성값" content="정보값">

⌨️ content

  • name 속성이나 http-equiv 속성과 관련된 값(value)을 명시함
  • name 속성이나 http-equiv 속성이 없다면 명시될 수 없음

🙌 예제

👉 meta name="author"

<meta name="author" content="저작자">
  • 웹 페이지의 저작자를 명시

👉 meta name="description"

<meta name="description" content="페이지 설명">
  • 웹 페이지의 간략한 설명
  • 검색결과에서 <title> 요소에 해당하는 제목 아래에 적혀있는 것을 볼 수 있음
  • 검색결과에 표시되는 스니펫에 사용되기도 함
  • 2회 이상 반복되는 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드, 페이지 내의 전체 내용을 복사해서 붙여넣거나 키워드만 나열하는 경우 검색결과 노출에 불이익을 받을 수 있으니 컨텐츠에 맞는 적절한 문구만을 추려서 넣는 것이 좋음
  • 검색엔진은 "keywords"의 영향보다는 "description"에 더 많은 영향을 받는다는 것을 참고

👉 meta name="keywords"

<meta name="keywords" content="keyword1, keyword2">
  • 악용 사례로 인해 검색 엔진들이 무시를 하여 지금은 거의 사용하지 않음

👉 meta name="viewport"

<meta name="viewport" content="width=device-width, initial-scale=1">
  • 모든 장치의 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어
  • 반응형 웹을 구현하기 위해 필요
  • width=device-width: 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비를 설정 (렌더링 영역을 기기의 뷰포트의 크기와 같게 만듦)
  • initial-scale=1: 웹 페이지가 처음으로 로드될 때 확대/축소가 되지 않은 원래 크기를 사용하도록 함
    0~10 사이의 값

👉 meta name="robots"

<!-- 기본값 -->
<meta name="robots" content="all">

<!-- 기본값과 동일, 검색결과에 노출되고 페이지의 모든 링크를 수집 -->
<meta name="robots" content="index,follow">

<!-- 검색결과에 노출되지만 페이지의 모든 링크를 미 수집 -->
<meta name="robots" content="index,nofollow">

<!-- 검색결과에 제외되지만 페이지의 모든 링크를 수집 -->
<meta name="robots" content="noindex,follow">

<!-- 검색결과에 제외되고 페이지의 모든 링크를 미 수집 -->
<meta name="robots" content="none">

<!-- none과 동일 -->
<meta name="robots" content="noindex,nofollow">
  • 페이지 별로 검색엔진 크롤러의 접근 여부를 제어
  • robots 메타태그 보다는 robots.txt 파일로 제어하는 게 일반적
    그 둘의 차이점
  • 특정 크롤러를 지정할 수 있음
  • 대소문자를 구분하지 않음

👉 meta http-equiv="Content-Security-Policy"

<!-- 모든 콘텐츠는 현재 도메인에서만 제공되어야 함 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  • CSP (Content-Security-Policy): 이 정책은 Mozilla가 개발한 표준으로, XSS (Cross Site Scripting) 공격을 막는 것을 목표로 함
    XSS: 웹 애플리케이션에서 일어나는 취약점으로 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법
  • 웹 서버의 응답 헤더에 Content-Security-Policy 헤더를 추가하도록 설정하는 헤더 방식과 정적인 HTML 페이지에서 <meta> 태그를 사용하여 추가하는 태그 방식이 있다.
    CSP에서 기본 설정된 전송 메커니즘은 HTTP 헤더임
  • content 값은 세미콜론으로 구분지어서 사용
  • 다른 지시문과 옵션들

👉 Open Graph

<!-- Facebook에서 MDN의 URL을 공유하면, 이미지와 설명, 제목이 함께 나타남 -->
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
  • 소셜미디어에서 웹페이지 URL이 공유될 때 사용되어지는 웹페이지의 정보(제목, 이미지, 설명, URL 등)
  • 제일 흔한 예로 페이스북에 링크를 붙여놓기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우가 오픈그래프가 활용된 경우임
  • Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜
  • 다른 예시들

✔️References

0개의 댓글