메타 태그란 무엇인가?

메타 태그(Meta Tag)는 HTML 문서의 헤드(head) 섹션에 위치하여 페이지에 대한 메타데이터를 제공합니다. 이 메타데이터는 검색 엔진이 웹 페이지를 인덱싱하고, 해당 페이지의 내용을 이해하는 데 중요한 역할을 합니다. 이름에서볼 수 있듯 '메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 합니다. 메타 태그는 html 문서가 어떤 내 용을 담고 있다면, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지, 문자 세트(언어설정)는 어떤 것을 사용하는지 등의 정보 를 담고 있는 태그입니다. 특별하게도 메타 태그는 html 마크업의 기본인 열었으며 닫아야 되는 구조가 아닌, 닫는 태그가 없는 태그입니다. 다음과 같이 말이조.

메타 태그의 주요 요소

Title Tag (제목 태그)
- <title>페이지 제목</title>
  페이지의 제목을 설정합니다. 검색 엔진 결과 페이지(SERP)에서 가장 먼저 보이는 부분입니다.
<meta name="description" content="이 페이지에 대한 간단한 설명입니다.">
페이지의 내용을 간략하게 설명합니다. 검색 결과 페이지에서 제목 아래에 표시되며, 클릭률(CTR)에 큰 영향을 미칩니다.
Meta Description (메타 설명)
Meta Keywords (메타 키워드)
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
페이지와 관련된 키워드를 나열합니다. 하지만 현대의 검색 엔진에서는 이 태그의 중요도가 많이 떨어졌습니다.
Meta Robots (메타 로봇)
<meta name="robots" content="index, follow">
검색 엔진 크롤러에게 페이지를 인덱싱(index)하고 링크를 따라갈(follow)지 여부를 알려줍니다.
Open Graph Tags (오픈 그래프 태그)
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="이 페이지에 대한 간단한 설명입니다.">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="페이지 URL">
소셜 미디어에서 페이지가 공유될 때 표시되는 정보를 제어합니다.
html
코드 복사

<meta property="og:title" content="페이지 제목"> <meta property="og:description" content="이 페이지에 대한 간단한 설명입니다."> <meta property="og:image" content="이미지 URL"> <meta property="og:url" content="페이지 URL">

메타 태그의 중요성

메타 태그는 검색 엔진 최적화(SEO)에 있어 매우 중요한 요소입니다. 검색 엔진은 메타 태그를 통해 페이지의 주제와 내용을 파악하고, 사용자에게 적절한 검색 결과를 제공합니다. 따라서 메타 태그를 올바르게 작성하면 검색 엔진에서의 가시성을 높일 수 있습니다.

메타 태그 작성 팁

제목 태그는 간결하고 명확하게 작성: 60자 이내로 페이지의 주요 내용을 반영하도록 작성합니다.
메타 설명은 유용한 정보를 제공: 150자 이내로 페이지의 내용을 명확히 설명하여 사용자에게 클릭을 유도합니다.
중복되지 않게 작성: 각 페이지마다 고유한 메타 태그를 작성하여 검색 엔진이 페이지를 명확히 구분할 수 있도록 합니다.

HTML 명세가 정의하는 표준 메타데이터

<meta name="" content="" >

application-name: 웹 페이지에서 구동 중인 애플리케이션의 이름.
단순한 웹 페이지에서는 지정하지 말아야한다.
author: 문서 저작자.
description: 페이지에 대한 짧고 정확한 요약.
Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용한다.
generator: 페이지를 생성한 소프트웨어의 식별자.
keywords: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.
referrer: 문서에서 시작하는 요청의 HTTP Referer 헤더를 통제한다.
viewport: 뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용한다.
- CSS Device Adaptation 명세가 정의한 메타데이터 이름인 viewport는, 표준은 아니지만 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수한다.
<meta name="viewport" content="width=1190" >
robots: 협조적인 크롤러, 또는 "로봇"의 동작을 지정한다.
마찬가지로 비표준 메타데이터. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용한다.

값	설명
index	크롤러가 페이지를 색인할 수 있다
noindex	크롤러가 페이지를 색인하지 않게 요청
follow	크롤러가 페이지 내의 링크를 따라갈 수 있다
nofollow	크롤러가 페이지 내의 링크를 따라가지 않게 요청
all	index, follow와 동일
none	noindex, nofollow와 동일
noarchive	크롤러가 페이지를 캐시에 포함하지 않도록 요청
nosnippet	검색엔진 결과에 어떤 설명도 표시하지 않도록 요청
noimageindex	크롤러가 페이지 이미지를 색인하지 않도록 요청
nocache	noarchive와 동일

결론

검색 엔진 최적화는 단순히 좋은 콘텐츠를 작성하는 것뿐만 아니라, 해당 콘텐츠를 검색 엔진이 잘 이해하고 인덱싱할 수 있도록 돕는 것도 중요합니다. 메타 태그는 이러한 검색 엔진 최적화의 기본이 되는 요소로, 올바르게 작성하고 활용함으로써 웹사이트의 가시성을 높일 수 있습니다. 따라서 메타 태그의 중요성을 인식하고, 이를 적절히 활용하는 것이 중요합니다.

저작자표시 비영리 변경금지

아지톡, 반려견은 우리의 가족입니다.

메타 태그란 무엇인가?