• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 일괄 설정
  11. <meta> 예제 - SNS에 링크 공유 시, 썸네일 표시
  12. <meta> 예제 - (사이트/웹페이지) 전체 구글 번역 방지


<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> 태그가 담고 있는 메타 정보는 화면에 표시되진 않지만, 브라우저에게 필요한 정보를 제공.
  • <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
(유니코드)

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'">

 

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”>

 

PS. 특정요소의 내용만 번역금지하려면, translate 속성 이용. 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012