HTML 페이지에서 메타 정보를 정의하는 다양한 <meta> 태그 활용법

<meta> 태그는 HTML 문서 내에서 페이지에 대한 정보, 키워드, 작성자 등 다양한 메타데이터(metadata)를 정의할 때 사용됩니다. HTML5부터는 <meta> 태그를 통해 모바일 기기에 맞춘 뷰포트(viewport) 설정도 가능해졌습니다.

메타 정보는 검색 엔진 최적화(SEO)와 웹페이지 접근성에 중요한 역할을 하며, 모든 메타 정보는 문서의 <head> 영역 안에 위치해야 합니다.

주요 <meta> 태그 종류와 사용 방법

1. 작성자(Author)

웹페이지의 작성자를 명시하려면 아래와 같이 작성합니다.

<meta name="author" content="Amit">

2. 페이지 설명(Description)

웹페이지에 대한 간단한 설명을 정의합니다. 이 설명은 검색 결과에 노출되기 때문에 SEO 측면에서 매우 중요합니다.

<meta name="description" content="Learn from Text and Video Tutorials">

3. 키워드(Keywords)

웹페이지와 관련된 키워드를 추가하여 검색 엔진이 페이지 주제를 파악하도록 돕습니다.

<meta name="keyword" content="Java, WordPress, Drupal, Android, iOS">

4. 뷰포트(Viewport) 설정

뷰포트는 모바일 브라우저에서 페이지 레이아웃을 제어하는 데 사용됩니다. <meta> 태그 안에 뷰포트 설정을 넣으면, 브라우저가 웹페이지의 크기와 배율(scaling)을 어떻게 조절할지에 대한 지침을 받게 됩니다.

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

width=device-width: 화면 너비를 기기의 실제 너비에 맞춥니다.
initial-scale=1.0: 페이지가 처음 로드될 때의 초기 확대 배율을 100%로 지정합니다.

종합 예제

아래 코드를 실행하면 <meta> 태그의 실제 동작을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn from Text and Video Tutorials">
        <meta name="keywords" content="Java, WordPress, Drupal, Android, iOS">
        <meta name="author" content="Amit">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>데모 텍스트입니다. head 태그에는 모든 메타 정보가 포함됩니다.</p>
    </body>
</html>