meta 태그의 종류와 의미

1. 문자 인코딩을 설정하는 메타태그

 <meta charset="utf-8" />

문자 인코딩은 텍스트 데이터를 컴퓨터가 이해할 수 있는 바이트 형식으로 변환하는 방법을 정의한다.
이는 웹 페이지에서 사용되는 텍스트 데이터를 올바르게 표시하고 해석하기 위해 중요한 역할을 한다.
UTF-8은 유니코드를 인코딩하는 방식 중 하나로, 현대적인 웹에서 가장 널리 사용되는 문자 인코딩 방식이다.

2. 브라우저 탭에 표시되는 아이콘을 지정하는 링크태그

  <link rel="icon" href="%PUBLIC_URL%/favicon.icon" />

주로 16*16픽셀 크기의 아이콘을 사용한다. 웹 페이지에서 파비콘을 설정하면 브라우저가 해당 이미지를 자동으로 가져와서 페이지에 적용한다.

3. 웹 페이지의 보안 정책을 설정하는 메타태그

    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />

웹 페이지가 실행될 때 허용되는 리소스들의 출처 및 보안 규칙을 지정하는데 사용됩니다. 이는 웹 애플리케이션의 보안 취약점을 방지하고, 크로스 사이트 스크립팅, 데이터 도난, 클릭재킹 등과 같은 웹 공격으로부터 보호하기 위해 필요하다.

4.뷰포트 설정을 지정하는 메타태그

<meta name="viewport" content="width=device-width, initial-scale=1" />

뷰포트는 웹 페이지가 브라우저에서 어떻게 표시되어야 하는지를 제어하는데 사용되는 설정이다. 특히 모바일 기기에서 웹 페이지를 보여줄 때, 뷰포트 설정은 매우 중요하다.

5. 모바일 브라우저에서 웹 페이지의 테마 색상을 지정하는 메타태그

<meta name="theme-color" content="#000000" />

theme-color 메타 태그는 모바일 브라우저의 테마 설정에 영향을 준다. 모바일 브라우저는 사용자가 웹 페이지를 홈 화면에 추가하거나 웹 페이지가 전체 화면으로 표시될 때 브라우저의 주소 표시줄 등을 위한 테마 색상을 지정할 수 있습니다.

6. 모바일 브라우저에서 웹 페이지의 테마 색상을 지정하는 메타태그

<meta name="theme-color" content="#000000" />

theme-color 메타 태그는 모바일 브라우저의 테마 설정에 영향을 준다. 모바일 브라우저는 사용자가 웹 페이지를 홈 화면에 추가하거나 웹 페이지가 전체 화면으로 표시될 때 브라우저의 주소 표시줄 등을 위한 테마 색상을 지정할 수 있습니다.

7. 웹 페이지의 소셜 미디어 공유 시 미리보기를 설정하는 데 사용하는 메타태그

<meta property="og:image" content="%PUBLIC_URL%/logo.jpg">

소셜 미디어에서 해당 웹 페이지를 공유할 때 사용되는 이미지 URL을 지정한다. og는 Open Graph Protocol의 약어로, 소셜 미디어 플랫폼이 웹 페이지를 올바르게 미리보기 할 수 있도록 도와주는 메타데이터 프로토콜이다.

8. 소셜 미디어 플랫폼이 웹 페이지를 올바르게 미리보기할 수 있도록 도와주는 메타태그

<meta property="og:title" content="...text"> 

웹 페이지의 제목을 지정하는 속성이다. 소셜 미디어 플랫폼들이 이 태그를 사용하여 웹 페이지를 공유할 때 제목 정보를 가져올 수 있다. 사용자들이 웹 페이지를 공유할 때 소셜 미디어에 표시되는 미리보기 제목으로 사용된다.

9. 웹 페이지를 소셜 미디어에 공유할 때 웹 페이지의 설명을 지정하는데 사용하는 메타태그

<meta property="og:description" content="...text" />

웹 페이지에 대한 간략한 설명이 들어가며, 사용자들이 웹 페이지를 공유할 때 소셜 미디어에 표시되는 미리보기 설명으로 사용된다.