목차
<meta> 예제 - 메타 정보 (예: SEO 관련 정보) <meta> 정의 <meta> 속성 <meta> 예제 - 언어셋 선언 <meta> 예제 - 뷰포트 설정 (= 반응형 화면 최대 설정 = 화면 확대) <meta> 예제 - 일정 시간 후 페이지 이동 (= 특정시간 후 납치) <meta> 예제 - 일정 시간마다 새로고침 <meta> 예제 - 모바일 헤드 (= 브라우저 주소창) 배경색 <meta> 예제 - 네이버 검색로봇 활동 차단/막기 <meta> 예제 - 검색로봇 a태그 nofollow 일괄 설정 <meta> 예제 - SNS에 링크 공유 시, 썸네일 표시 <meta> 예제 - (사이트/웹페이지) 전체 구글 번역 방지
<meta> 예제 - 메타 정보 (예: SEO 관련 정보)
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- 해당 웹문서의 문서 양식 제공-->
<meta name="description" content="무료 홈페이지 제작 가이드">
<!--해당 웹문서에 대한 문장 설명 제공-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<!-- 검색 엔진을 위한 키워드 정보 제공-->
<meta name="author" content="homzzang">
<!-- 작성자 정보 제공-->
</head>
<meta> 정의
※ meta 뜻 : 위치・상태의 변화와 관련. / 더 높은, 초월한
<meta> 태그가 담고 있는 메타 정보는 화면에 표시되진 않지만, 브라우저에게 필요한 정보를 제공.
<meta> 태그는 페이지 설명, 키워드, 문서 저작자, 마지막 수정 등의 메타정보 포함.
2.
메타 정보는 브라우저가 해당 웹문서를 어떻게 띄울지, 또 검색 엔진에 어떻게 노출될지 필요한 정보 내포.
메타정보는 반드시 (이름/값) 짝 이뤄야 함.
3.
(name ・http-equiv) 속성 정의되면, 반드시 content 속성 역시 정의돼야 함.
항상 <head> 태그 안에 위치해야 함. 사이트와 무관한 정보를 기재할 경우 , Abusing (어뷰징: 남용・오용・조작)으로 간주되어 SEO 불이익 받을 수 있음.
4.
meta 태그는 보통 그누보드에서 head.sub.php 파일의 <head> 태그 안에 위치.
5.
네이버, 다음, 애플 등 사이트 가셔서
소스 보기 해보면 예제 확인 가능.
view-source:https://www.daum.net/
view-source:https://www.naver.com/
view-source:https://www.apple.com/kr/
6. MDN <meta> 태그 예제
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
7. 구글 (Google) 지원 메타태그 종류
https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=ko
PS. 그누보드5 (영카트5) 기준
1. 코드 위치.
테마 사용 X : /head.sub.php 테마 사용 O : /theme/테마명/head.sub.php
2. 메타 태그 추가
<meta> 속성
속성
속성값 쓰임새 비고 charset
UTF-8 (유니코드)
ISO-8859-1
(라틴어)
문자셋정보 (※ HTML4.01 선언 대폭 간소화.)<meta charset="UTF-8 ">되도록 head 태그 맨 처음 부분에 추가 관련이슈
HTML5 추가 content
문자
http-equiv 또는 name 속성값의 관련값 정의. http-equiv
content-type
default-style refresh
content 속성의 정보/값에 대한 HTTP header 제공.content-type <meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style refresh ★
name
application-name
author
copyright description
date generator
reply-to
application-name author copyright date description generator keywords ★ reply-to 이메일 주소, 휴대폰번호 등.robots ★ 권고사항이라 로봇이 무시 가능. index : 목록 수집 허용 Ofollow : 링크 따라 수집 허용 Oall : index + follownoindex : 목록 수집 허용 Xnofollow : 링크 따라 수집 허용 Xnone : noindex + nofollowviewport ★★★ width=device-width (화면 너비 = 기기 너비) initial-scale=1.0 (기본 크기 : 100%) minimum-scale=0.5 (최소 크기 : 50%) maximum-scale=1.5 (최대 크기 : 150%) user-scalable=no (크기 조정 허용 X) viewport-fit=cover (꽉찬 화면 설정) theme-color 색상 코드 . (예: #3e5ef5)[주의] 빨간색 속성값은 HTML5에서 에러 발생 가능. <address> 또는 <footer> 태그 사용 권장. scheme
format/URI
content 속성값 해석에 필요한 정보 제공 HTML5 제외
<meta> 태그는 전역속성 지원.
<meta> 예제 - 언어셋 선언
HTML5<meta charset="UTF-8">
HTML4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta> 예제 - 뷰포트 설정 (= 반응형 화면 최대 설정 = 화면 확대)
<meta name=" viewport " content="width=device-width, user-scalable=no">
<meta name=" HandheldFriendly " content="true">
<meta name=" format-detection " content="telephone=no">
[네이버 PC]<meta name="viewport" content="width="750" >
[네이버 MO]<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
[그누보드 PC]
<meta name="viewport" content="width=device-width">
[그누보드 MO]
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<meta> 예제 - 일정 시간 후 페이지 이동 (= 특정시간 후 납치)
< meta http-equiv='refresh' content='초단위시간; url= 이동할 페이지 주소 '>
(예) - 3초 후 이동
<meta http-equiv="refresh" content='3; url=https://homzzang.com'>
[참고]
1.
시간과 url 구분 기호로 ; (세미콜론) 대신, , (콤마)로 구분 가능.
<meta http-equiv="refresh" content='3, url=https://homzzang.com'>
2.
url 주소를 작은따옴포료 묶을 경우, content 속성값 전체를 큰따옴표로 묶음.
<meta http-equiv="refresh" content="3; url='https://homzzang.com'">
3. 주의사항 (한별아빠 님 답변 참고 )
현재 페이지의 검색 최적화 위한 다른 meta 태그 설정이 작동 X
이동 후 페이지는 사용자 동의 (예: <a> 태그 클릭해 이동, <form> 입력 받아 이동) 없었다는 이유로 검색엔진에 '노출/수집'이 안 되어 SEO에 불이익 될 수 있으며, 브라우저에 따라선 페이지 이동 기능 자체가 안 될 수도 있음.
PS. 납치 관련글 더 보기 .
<meta> 예제 - 일정 시간마다 새로고침
30초마다 새로고침
<meta http-equiv="refresh" content="30">
<meta> 예제 - 모바일 헤드 (= 브라우저 주소창) 배경색
<meta name="theme-color" content="#으로 시작하는 색상코드">
(예)
<meta name="theme-color" content="#3e5ef5">
※ 안드로이드 계열에서만 가능.
<meta> 예제 - 네이버 검색로봇 활동 차단/막기
※ 사이트를 네이버 검색 결과에서 제외시키기
<meta name="robots" content="noindex">
<meta> 예제 - 검색로봇 a태그 nofollow 일괄 설정
※ 불량사이트 링크가 내 사이트에 SEO 악영향 미치는 걸 방지.
<meta name="robots" content="nofollow ">
PS. 특정 링크만 하려면, 아래처럼 앵커 태그의 rel 속성 이용.
<a href="불량사이트링크주소" rel="nofollow" >블량사이트</a>
<meta> 예제 - SNS에 링크 공유 시, 썸네일 표시
<meta property="og:image" content="이미지주소" />
<meta property="og:image:height" content="100">
<meta property="og:image:width" content="200">
<meta> 예제 - (사이트/웹페이지) 전체 구글 번역 방지
사이트 전체 구글 번역 방지
<meta name=”google” value=”notranslate”>
웹페이지 전체 구글 번역 방지
<meta name=”google” content=”notranslate”>
