[FE] 📚 meta 태그란?

728x90

📝 Meta 태그란?

웹사이트를 구축하다 보면, HTML 문서의 <head> 부분에서 meta 태그를 많이 보게 됩니다.

이 태그는 웹페이지에 대한 다양한 메타데이터를 정의하는 데 사용됩니다.

메타데이터는 웹페이지 자체에는 표시되지 않지만, 검색 엔진이나 브라우저에 중요한 정보를 제공합니다.

구글 검색 페이지에 사이트 설명에 사용하기도 하고, 페이스북, 카카오, 트위터 등의 SNS 공유할 때 링크 미리 보기에도 사용됩니다.

미리 보기를 위한 설정뿐 아니라 어떤 종류의 메타 태그 설정들이 있고, 어떻게 사용하면 될지 학습해 봅시다.

📗 Meta 태그의 역할

SEO(검색 엔진 최적화):
- 메타 태그는 검색 엔진이 웹페이지의 내용을 이해하고, 검색 결과에 표시될 때 적절하게 표시되도록 도와줍니다.
- 예: <meta name="description" content="이 페이지는 메타 태그에 대한 설명을 제공합니다.">
브라우저 뷰포트 설정:
- 브라우저가 웹페이지를 어떻게 렌더링할지 결정합니다.
- 예: <meta name="viewport" content="width=device-width, initial-scale=1.0">
문서 정보:
- 문서의 작성자, 저작권, 출처 등의 정보를 제공합니다.
- 예: <meta name="author" content="홍길동">
문서의 문자 인코딩:
- 웹페이지에서 사용되는 문자의 인코딩 방식을 정의합니다.
- 예: <meta charset="UTF-8">

📙 주요 Meta 태그 종류와 사용법

<head> 안에 문서를 설명하는 <meta> 를 넣습니다. 메타 태그는 닫는 태그가 없습니다.

메타 태그의 특성은 해당 링크를 통해 확인할 수 있습니다. 그리고, 메타 태그에 name 으로 설정 가능한 값들은 해당 링크를 통해 확인할 수 있습니다.

<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정해요.
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.

<meta name="robots" content="noindex">
name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.

description:

페이지에 대한 간략한 설명을 제공합니다. 검색 결과에서 페이지 설명으로 사용될 수 있습니다.

<meta name="description" content="이 페이지는 메타 태그에 대한 설명을 제공합니다.">

keywords:

페이지와 관련된 키워드를 나열합니다. 과거에는 중요한 SEO 요소였지만, 현재는 그 중요성이 많이 감소했습니다.

<meta name="keywords" content="HTML, meta tags, SEO, web development">

viewport:

반응형 웹 디자인을 위해 뷰포트를 설정합니다. 모바일 기기에서도 웹페이지가 잘 보이도록 합니다.

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

charset:

문서의 문자 인코딩을 설정합니다. UTF-8은 대부분의 언어를 지원하는 표준 인코딩 방식입니다.

<meta charset="UTF-8">

author:

문서의 작성자를 명시합니다.

<meta name="author" content="홍길동">

robots:

검색 엔진 로봇에게 페이지를 인덱싱할지 여부를 알려줍니다.

<meta name="robots" content="index, follow">

📘 SEO 최적화를 위한 Meta 태그 활용법

적절한 description 작성:
- 페이지의 내용을 잘 요약하는 설명을 작성하세요. 길이는 150-160자 정도가 적당합니다.
중요한 키워드 포함:
- 페이지와 관련된 주요 키워드를 메타 태그와 콘텐츠에 자연스럽게 포함시키세요.
중복 콘텐츠 피하기:
- 같은 내용의 페이지에 동일한 메타 태그를 사용하면 중복 콘텐츠로 간주될 수 있으므로 주의하세요.
모바일 최적화:
- viewport 태그를 사용하여 모바일 기기에서도 최적화된 레이아웃을 제공하세요.

✅ 요약

Meta 태그는 웹페이지의 메타데이터를 정의하여 검색 엔진 최적화와 사용자 경험 향상에 중요한 역할을 합니다. 올바른 메타 태그 사용은 웹사이트의 가시성과 접근성을 크게 향상시킬 수 있습니다. 이 글을 통해 메타 태그의 중요성을 이해하고, 효과적으로 활용할 수 있기를 바랍니다.