[HTML] 메타(meta) 태그 정리 / 메타 태그 종류

메타 태그를 충실히 입력하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아지며 이는 키워드 광고를 이용하지 않고도 사이트가 상위 노출됨으로써 광고비용이 절감된다

메타태그의 속성

메타태그 속성에는 http-equiv, name content 3가지 속성이 있다.

http-equiv = "항목명"	- 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content 속성의 정보 / 값을 위한 HTTP header를 제공 - html4에서는 문자 설정을 할때 사용했지만 html5에서는 문자 설정 방법이 더욱 간단해짐 ex) html4.01 : <meta http-equiv = "content-type" content ="text/html; charcet = UTF-8"> html5 : <meta charset = "UTF-8">
content = "정보 값"	- meta 정보의 내용을 지정합니다. - name 속성과 http-equiv와 연관된 값을 줌.
name="정보 이름"	- 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능

메타태그의 종류

1. Keywords (검색엔진에 의해 검색되는 단어 지정)

<meta name="Keywords" content="우주방랑자 서파르타" />

검색 엔진에 의해 검색되는 단어 지정

2. Description(검색 결과에 표시되는 문자 지정)

<meta name="Description" content="우주방랑자 서파르타" />

검색 결과에 표시되는 문자를 지정

3. robots (검색 로봇 제어)

<meta name="robots" content="noindex, nofollow" />

검색 로봇 제어

검색 로봇에 대한 명령의 content 속성에는 다음과 같이 지정할 수 있다.

noindex : 검색 결과에 이 페이지를 표시 하지 않는다.
nofollow : 이 페이지의 링크를 따라가지 않는다.
noarchive : 검색결과에 저장된 페이지 링크를 표시하지 않는다.
All(기본값) : 색인 생성이나 게재에 대한 제한이 없다, 기본값이므로 명시적으로 표시해도 효과 없음
Non : noindex, nofollow와 같다
index : 그 페이지를 수집대상으로 한다.
Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.

<meta name="robots" content="noindex, nofollow" />

위와 같이 하면, 구글에서 자신의 사이트가 색인화 되거나 링크 연결이 되지 않도록 설정할 수 있다.

주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용한다.

<meta name="robots" content="index, follow" />

위와 같이 하면, 페이지를 색인화 하고, 링크 연결이 된다.

robots의 자세히 알고 싶다면 밑에 링크에 가면 설명이 잘 되어있다.

https://developers.google.com/search/reference/robots_meta_tag?hl=ko

4. charset (문자 코드의 종류 설정)

<meta charset="UTF - 8" />

문자 코드의 종류 설정

인코딩하는 방식을 선언하는 이유는?

- 문자 깨짐 현상 등 심각한 오류가 나타날 수 있기 때문에 이를 방지하기 위해 가장 기본이 되는 것이 바로 인코딩 선언!

UTF-8을 쓰면 모든 언어의 문자를 인코딩 가능하지만 추가로 더 알아보자면

EUC-KR / ISO-2022-KR : 한국어 문자 인코딩
EUC-JP / ISO-2022-JP : 일본어 문자 인코딩
GB2312 : 중국어 문자 인코딩
ISO-8859-1 : 북미, 서부 유럽, 라틴 아메리카, 카리브해, 캐나다, 아프리카
ISO-8859-2 : 동유럽
ISO-8859-3 : 남동유럽, 에스페란토
ISO-8859-4 : 스칸디나비아, 발트 연안국
ISO-8859-5 : 불가리아어, 벨로루시어, 러시아어, 마케도니아
ISO-8859-6 : 아랍문자
ISO-8859-7 : 현대 그리스문자 언어뿐 만 아니라 수학 기호
ISO-8859-8 : 히브리어 문자를 사용하는 언어
ISO-8859-9 : 터키어
ISO-8859-10 : 에스키모, 북유럽 언어
UTF-8, UTF-16, UTF-32 : 모든 언어의 문자를 지원하는 인코딩

IF 웹페이지에서 문자 깨짐 현상이 발견 시에는?

- HTML meta의 charset 미설정 또는 다른 인코딩 선언

- 서버 언어(java, asj, jsp, php 등)가 사용된 경우 인코딩 선언의 오류

- 데이터 베이스 인코딩 설정의 오류

- 텍스트 에디터의 문서 저장 시 기본 인코딩 charset 오류

위의 내용 중 하나라도 잘못된 경우 문제가 발생할 수 있으니 모든 점검 필요!

사용되는 모든 언어는 각각의 인코딩 선언이 필요하며 서로 다른 인코딩이 사용되는 경우 각각의 언어에서 제공하는 인코딩 변환 함수를 적절히 사용해 해결될 수 있다.

5. Date (날짜- 제작일)

<meta name="Date" content="2020-06-05T07:45:37+09:00" />

날짜(제작일)

content '+09:00'은 GMT(그리니치 표준시)로 부터의 시차이며

한국은 '+09:00'

미국 동부는 '-05:00' (서머타임일 경우 '-04:00')

나라/지역에 따라 결정됨

5. Content-Script-Type (웹페이지에 쓰인 언어)

<meta http-equiv="Content-Script-Type" content="Text/javascript" />

웹페이지에 쓰인 언어 지정

6. X-UA-Compatible (브라우저 호환성)

<meta http-equiv="X-UA-Compatible" content="IE-edge" />

브라우저 호환성 지정

7. subject (홈페이지 주제 지정)

<meta http-equiv="Subject" content="우주방랑자 서파르타" />

홈페이지 주제 지정

8. title (제목)

<meta http-equiv="Title" content="HTML5 공부" />

제목 지정

9. Author (페이지 작성 제작자명)

<meta http-equiv="Author" content="서파르타" />

페이지 작성 제작자명

10. Publisher (제작사)

<meta http-equiv="publisher" content="서파르타" />

제작사

11. Other Agent (웹 책임자)

<meta http-equiv="Other Agent" content="서파르타" />

웹 책임자

12. Generator (제작 도구)

<meta http-equiv="Generator" content="Visual Studio Code" />

제작 도구

13. Reply-To / Email (메일 주소)

14. Filename (파일 이름)

<meta http-equiv="Filename" content="index.html" />

파일 이름

15. Location (위치)

<meta http-equiv="Location" content="위치" />

15. Distribution(배포자)

<meta http-equiv="Distribution" content="name" />

<meta http-equiv="Copyright" content="나야나~ 나야나~" />

17. Build (제작 년, 월, 일)

<meta http-equiv="Build" content="date" />

18. Last-Modified(제작 년, 월, 일)

<meta http-equiv="Last-Modified" content="Fri, 05 Jul 2020 19:40:40" />

19. imagetoolbar (그림 위 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)

<meta http-equiv="imagetoolbar" content="no" />

20. Cache-Control / Pragma(캐쉬가 되지 않도록 하기)

- 페이지를 Cache에서 가져오지 않게 하며 항상 서버에 접속해 페이지를 가져옴

- 항상 방문자에게 바뀐 내용을 보여줄 수 있음

- 페이지 출력 속도는 매번 페이지를 가져오므로 시간이 많이 걸림 ㅠㅜ

21. Expires (캐쉬 만료일)

<meta http-equiv="Expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />

22. Refresh (새로고침)

<meta http-equiv="refresh" content="60" />

60초 마다 새로고침한다!

23. Refresh (입력한 주소로 5초 후 이동)

<meta http-equiv="refresh" content="5; url = 주소" />

24. Page-Enter (페이지 들어갈 때 장면 전환 효과)

<meta http-equiv="refresh" content="revealtrans(Duration=1, Transition=12)" />

Box out : 네모난 박스가 안쪽에서 바깥쪽으로
Circle in : 원이 바깥에서 안쪽으로
Circle out : 원이 안쪽에서 바깥쪽으로
Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
Random dissove : 안개와 비슷한 형태로 전환
Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
Split Horizontal in : 양쪽에서 중앙으로 수평 이동
Split Horizontal out : 중앙에서 양쪽 끝으로 수직이동
Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
Random bars horizontal : 수평선이 무작위로 생성
Random bars vertical : 수직선이 무작위로 생성
Random : 임의로 생성

참고: https://webclub.tistory.com/354

참고 : https://aboooks.tistory.com/339

참고: https://webisfree.com/2015-12-16/meta-charset-%EB%A9%94%ED%83%80%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EB%AC%B8%EC%9E%90-%EC%9D%B8%EC%BD%94%EB%94%A9-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

'개발 > HTML' 카테고리의 다른 글

[HTML] Form tag / input tag 모음집 (0)	2020.06.06
[HTML] 폼태그 모음집 (0)	2020.05.22
[HTML] 이미지 표현 / 동영상 / 음악 / 멀티미디어 / Tag (0)	2020.05.21
[HTML] Table (tag, attribute) (0)	2020.05.20
[HTML] 목록 List /<ul> / <ol> / <il> (0)	2020.05.20

우주방랑자

[HTML] 메타(meta) 태그 정리 / 메타 태그 종류

메타 태그를 충실히 입력하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아지며 이는 키워드 광고를 이용하지 않고도 사이트가 상위 노출됨으로써 광고비용이 절감된다

메타태그의 속성

메타태그의 종류

1. Keywords (검색엔진에 의해 검색되는 단어 지정)

2. Description(검색 결과에 표시되는 문자 지정)

3. robots (검색 로봇 제어)

4. charset (문자 코드의 종류 설정)

5. Date (날짜- 제작일)

5. Content-Script-Type (웹페이지에 쓰인 언어)

6. X-UA-Compatible (브라우저 호환성)

7. subject (홈페이지 주제 지정)

8. title (제목)

9. Author (페이지 작성 제작자명)

10. Publisher (제작사)

11. Other Agent (웹 책임자)

12. Generator (제작 도구)

13. Reply-To / Email (메일 주소)

14. Filename (파일 이름)

15. Location (위치)

15. Distribution(배포자)

16. Copyright (저작권)

17. Build (제작 년, 월, 일)

18. Last-Modified(제작 년, 월, 일)

19. imagetoolbar (그림 위 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)

20. Cache-Control / Pragma(캐쉬가 되지 않도록 하기)

21. Expires (캐쉬 만료일)

22. Refresh (새로고침)

23. Refresh (입력한 주소로 5초 후 이동)

24. Page-Enter (페이지 들어갈 때 장면 전환 효과)

'개발 > HTML' 카테고리의 다른 글

티스토리툴바

[HTML] 메타(meta) 태그 정리 / 메타 태그 종류

메타 태그를 충실히 입력하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아지며 이는 키워드 광고를 이용하지 않고도 사이트가 상위 노출됨으로써 광고비용이 절감된다

메타태그의 속성

메타태그의 종류

1. Keywords (검색엔진에 의해 검색되는 단어 지정)

2. Description(검색 결과에 표시되는 문자 지정)

3. robots (검색 로봇 제어)

4. charset (문자 코드의 종류 설정)

5. Date (날짜- 제작일)

5. Content-Script-Type (웹페이지에 쓰인 언어)

6. X-UA-Compatible (브라우저 호환성)

7. subject (홈페이지 주제 지정)

8. title (제목)

9. Author (페이지 작성 제작자명)

10. Publisher (제작사)

11. Other Agent (웹 책임자)

12. Generator (제작 도구)

13. Reply-To / Email (메일 주소)

14. Filename (파일 이름)

15. Location (위치)

15. Distribution(배포자)

16. Copyright (저작권)

17. Build (제작 년, 월, 일)

18. Last-Modified(제작 년, 월, 일)

19. imagetoolbar (그림 위 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)

20. Cache-Control / Pragma(캐쉬가 되지 않도록 하기)

21. Expires (캐쉬 만료일)

22. Refresh (새로고침)

23. Refresh (입력한 주소로 5초 후 이동)

24. Page-Enter (페이지 들어갈 때 장면 전환 효과)

'개발 > HTML' 카테고리의 다른 글

'개발/HTML' Related Articles

티스토리툴바