이 포스트는 HTML mata tag[HTML mata tag], 메타태그와 메타데이터, 링크의 미리보기 제목, 설명, 이미지를 결정하는 open graph 태그, Metadata란?, 표준 메타데이터 이름, 캐노니컬태그로 검색엔진 최적화하기 를 참고하여 작성하였습니다.
메타 태그란, 웹페이지가 담고 있는 콘텐츠가 아닌, 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 html 태그를 말한다. 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 다른 웹 서비스에서 사용하게 된다.
웹페이지 내에서 html에 대한 메타데이터를 제공하는 역할을 하는데,
이를 알기 위해서는 메타데이터에 대한 이해가 필요하다.
1. 메타데이터
데이터에 대한 데이터로, 어떠한 목적을 가지고 만들어진 데이터로 주로 웹페이지에 대한 정보 제공을 목적으로 한다. 컴퓨터에서는 보통 메타데이터를 데이터를 표현하기 위한 목적과 데이터를 빨리 찾기 위한 목적으로 사용하고 있다.
데이터를 표현하기 위한 목적으로 사용되는 메타데이터의 가장 좋은 예가 HTML 태그이다.
메타데이터의 또 다른 목적은 데이터를 빨리 찾기 위한 것으로, 컴퓨터에서 정보의 인덱스(Index) 구실을 하며, 사용자는 메타데이터를 이용하여 자기가 원하는 특정 데이터(정보)를 검색엔진 등으로 쉽게 찾아낼 수 있는데, 웹 자료나 다른 것들에 관해 기계가 이해할 수 있는 정보가 메타데이터인 것이다.
2. 메타태그(Meta Tag)
웹 페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 html 태그. html 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 어떤사람이 만들었는지 등에 대한 정보를 담고 있다. 웹페이지 내에서 HTML에 대한 메타데이터(Meta Data)를 제공하는 역할을 한다. 기술이 발전해도 웹 문서와 같은 비정형적인 정보를 전부 인식하기는 어렵기 때문에, 검색을 잘되게 하는 사이트의 필수조건이라고 볼 수 있다.
출처-HTML meta tag
HTML로 작성된 웹은 사람이 볼수 있는 부분과 볼 수 없는 부분으로 나뉘는데,
사이트의 목적, 사이트의 핵심 키워드 등은 페이지에 표시되지 않아서 사람이 볼 수 없다.
따라서 웹페이지를 제작하는 사람은 홈페이지에 대한 정보를 메타태그를 이용해서 작성하고,
네이버(Naver), 구글(Google), 다음(kakao)과 같은 포털사이트의 검색엔진 봇은 이러한 메타태그를 수집하여 사용자에게 필요한 정보를 제공한다.
이러한 meta 태그 요소는 언제나 head 요소 내부에 위치해야 합니다.
-검색엔진이나, 외부의 브라우저들이 최상단 우선적으로 가져가는 정보들은 모두 head 태그 내부의 상단에 위치하여야하는데, 메타데이터들을 읽기 위해 소스상에서 더 깊이 내려와 css 나 js를 읽을 필요가 없기 때문이다.
<head>
<meta charset="UTF-8">
<meta name="keyword" content="HTML, meta, tag, element, reference">
<meta name="description" content="HTML meta tag page">
<meta name="author" content="TCPSchool">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML meta tag</title>
</head>3. SEO(Search Engine Optimazation) / 캐노니컬태그
seo 검색엔진 최적화 라고 한다.
다른 검색포털사이트에서 홈페이지 내 메타태그 정보를 이용해 쉽게 정보를
수집해가는것으로. 최적화 작업을 통해 홈페이지 노출을 용이하게 작업할 수 있다.
seo를 위한 가장 중요한 메타태그
Meta title
<meta name="title" content="This is Page Title">Meta description
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">Meta robots
<meta name="robots" content="index,nofollow">Meta charset
<meta charset="utf-8">Meta viewport
<meta name="title" content="This is Page Title">Meta refresh redirect
<meta http-equiv="refresh" content="5;url="https://example.com/">캐노니컬 태그 (Canonical tag) 란?
캐노니컬 태그란, 사이트 내에 url 주소는 다르지만, 동일한 내용의
중복된 페이지가 있을 때, 검색엔진에 대표가 되는 url 주소를 알려주는 역할을 한다.
<link rel="canonical" href="http://example.co.kr/">https://example.co.kr/shop
https://example.co.kr/shop?ct=1
https://example.co.kr/shop?utm_campaign=event
위와 같이 동일한 페이지지만 파라미터 값이 있거나 데이터 분석을 위한
추적 코드를 삽입하였다고 할때, 실질적으로는 동일한 페이지로 연결되지만,
url은 다를 수 있다.
이러한 경우 캐노니컬(Canonical) 태그를 적용하지 않을 경우 검색엔진은 자기 마음대로 원본 URL을 판단하여 적용하며 중복되는 다른 페이지들은 덜 크롤링을 하게 되는데,
https://example.co.kr 사이트를 원본 페이지로 생각하고 있지만 검색엔진은 https://example.co.kr/shop?ct=1 를 원본 페이지로 인식하여
원본 이 외의 페이지는 크롤링을 덜하게 되기 때문이다.
그러므로 꼭 캐노니컬 태그를 이용해 원본 페이지를 크롤링 될 수 있도록 삽입하여야 검색엔진 최적화에 도움이 될 수 있다.
캐노니컬(Canonical) 태그 적용 시 공통 주의사항*
- 중복 페이지의 내용 중 항상 정식 버전의 페이지가 있어야한다.
- rel=canonical 대상의 페이지가 있는지 확인 해야한다.
- rel=canonical 대상에 noindex 로봇 메타 태그가 포함되어 있는지 확인(메타 태그가 noindex로 설정된 경우 검색엔진이 크롤링을 할 수 없으므로 canonical 태그를 적용해도 소용 없게 된다.)
- 페이지 head 사이 또는 HTTP 헤더에 rel=canonical 링크가 포함되어 있는지 확인
- 페이지에 하나의 rel=canonical만 지정되었는지 확인(만약 하나의 페이지에 2개 이상의 rel=canonical이 설정된 경우 해당 페이지는 검색엔진이 무시하게 된다.
- 캐노니컬(canonical)태그 적용 시 상대 경로가 아닌 절대 경로로 적용해야 한다.
<link rel="canonical" href="http://example.co.kr/"> (O)
<link rel="canonical" href="example.co.kr/"> (X)캐노니컬(canonical) 관련 더 자세한 정보는 구글 공식 사이트에서 확인할 수 있다.
구글 캐노니컬 가이드 보기
4. 사용할 수 있는 속성
charset 문자셋 : 해당 문서의 문자 인코딩 방식을 명시함.
HTML5에서는 요소의 scheme 속성을 더 이상 지원하지 않으며, 문자셋(charset)을 손쉽게 정의할 수 있는 charset 속성이 새롭게 추가되었다.
<meta charset="UTF-8">content 텍스트 : name 속성이나 http-equiv 속성과 관련된 값(value)을 명시함.
5. HTML에서 정의하는 표준 메타데이터 NAME
<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: 협조적인 크롤러, 또는 "로봇"의 동작을 지정한다.
마찬가지로 비표준 메타데이터. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용한다.
<meta name="robots" content="index,nofollow" >index 크롤러가 페이지를 색인할 수 있다
noindex 크롤러가 페이지를 색인하지 않게 요청
follow 크롤러가 페이지 내의 링크를 따라갈 수 있다
nofollow 크롤러가 페이지 내의 링크를 따라가지 않게 요청
all index, follow와 동일
none noindex, nofollow와 동일
noarchive 크롤러가 페이지를 캐시에 포함하지 않도록 요청
nosnippet 검색엔진 결과에 어떤 설명도 표시하지 않도록 요청
noimageindex 크롤러가 페이지 이미지를 색인하지 않도록 요청
nocache noarchive와 동일
