• Q&A
  • 회원가입
  • 로그인

[meta] HTML - <meta> 태그 ★★ - 메타정보 (= meta태그 = 메타태그) (HTML5수정) + 모바일주소창배경색 (= 모바일배경색 = 모바일헤드배경색) ※ 검색최적화 (SEO)

목차
  1. <meta> 예제 - 메타 정보 (예: SEO 관련 정보)
  2. <meta> 정의
  3. <meta> 속성
  4. <meta> 예제 - 언어셋 선언
  5. <meta> 예제 - 뷰포트 설정 (= 반응형 화면 최대 설정 = 화면 확대)
  6. <meta> 예제 - 일정 시간 후 페이지 이동 (= 특정시간 후 납치)
  7. <meta> 예제 - 일정 시간마다 새로고침
  8. <meta> 예제 - 모바일 헤드 (= 브라우저 주소창) 배경색
  9. <meta> 예제 - 네이버 검색로봇 활동 차단/막기
  10. <meta> 예제 - 검색로봇 a태그 nofollow 일괄 설정


<meta> 예제 - 메타 정보 (예: SEO 관련 정보) 

 
<head>

    <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> 태그는 메타정보 (= 해당 HTML 웹문서 주요 정보)를 브라우저에게 제공.

 


 
※ meta 뜻 : 위치・상태의 변화와 관련. /  더 높은, 초월한

1. 
<meta> 태그가 담고 있는 메타 정보는 화면에 표시되진 않지만,
브라우저에게 필요한 정보를 제공.

2. 
<meta> 태그는 페이지 설명, 키워드, 문서 저작자, 마지막 수정 등의 메타정보 포함.
 
3. 
메타 정보는 브라우저가 해당 웹문서를 어떻게 띄울지,
또 검색 엔진에 어떻게 노출될지 필요한 정보 내포. 
 
4. 
메타정보는 반드시 (이름/값) 짝 이뤄야 함.
 
5. 
(name ・http-equiv) 속성 정의되면, 반드시 content 속성 역시 정의돼야 함.

6. 
항상 <head> 태그 안에 위치. 
 
7.
사이트와 무관한 정보를 기재할 경우,
Abusing (어뷰징: 남용・오용・조작)으로 간주되어 SEO 불이익 받을 수 있음.
 
8.
meta 태그는 보통 그누보드에서 head.sub.php 파일의 <head> 태그 안에 위치.
 
9.
네이버, 다음, 애플 등 사이트 가셔서 소스 보기 해보면 예제 확인 가능.
view-source:https://www.daum.net/ 
view-source:https://www.naver.com/
view-source:https://www.apple.com/kr/

 


PS. 그누보드5 (영카트5) 기준
 
1. 코드 위치.
테마 사용 X : /head.sub.php
테마 사용 O : /theme/테마명/head.sub.php
 
2. 메타 태그 추가
관리자 > 환경설정 > 추가 메타태그
 
 

<meta> 속성

속성 
 속성값  쓰임새  비고
 charset
 UTF-8
(유니코드)

EUC-KR
(한국어)
 
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
문서타입종류 및 언어셋 정의
(예) HTML 4.01 경우 언어셋 정의
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style
문서 기본 스타일
유효조건: content 속성값과 <link>의 값 일치.

refresh ★
사용자가 새로고침한 효과와 동일한 효과 적용.
이 경우 사용 가능한 content 속성값 예제
(예)
content = "3, url='https://homzzang.com'"3초 후, 홈짱닷컴으로 이동.
 
 
 name
application-name
author
copyright
description
date
generator
keywords
reply-to
robots
viewport
theme-color


application-name
어플리케이션 이름.
웹 애플리케이션 아닌 경우 사용 불가.
문서 내에서 한 번만 지정.

author
저작자  
이 경우 content 속성값 예제
(예) 홈짱

copyright
저작권
이 경우 content 속성값 예제
(c) 2020 Homzzang
 
date
문서 작성 날짜
이 경우 content 속성값 예제
(예) 2020-04-06T17:00:00+09:00

description
사이트 설명 위한 서술형 문장
(예) 홈페이지 제작 관리 강의

generator
문서 작성에 사용한 저작 도구. 사용툴.
이 경우 content 속성값 예제
(예) editplus

keywords ★
사이트 설명 위한 키워드 목록.
(예) 코딩언어, 그누보드, 서버관리

reply-to
연락처
이 경우 가능한 content 속성값
이메일 주소, 휴대폰번호 등.

 robots ★
 검색로봇에 대한 행동 지침 제공.
 권고사항이라 로봇이 무시 가능.
 이 경우 가능한 content 속성값.
 index : 목록 수집 허용 O
 follow : 링크 따라 수집 허용 O
 all : index + follow
 noindex : 목록 수집 허용 X
 nofollow : 링크 따라 수집 허용 X
 none : noindex + nofollow

 viewport ★★★
 화면 해상도 처리 정보.
 이 경우 가능한 content 속성값 예제
 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
 안드로이드 모바일 주소창 배경색 지정.
 이 경우 가능한 content 속성값
 색상 코드. (예: #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'">

 

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>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012