[HTML] 메타 태그(SEO 최적화 포함)

안녕하세요. 명월입니다.

이 글은 웹 페이지 태그 중에 메타 태그(SEO 최적화 포함)에 대한 설명입니다.

웹 페이지를 다룰려면 기본적으로 Html 태그, CSS(스타일 시트), Javascript를 배워야합니다.

Html은 웹 페이지의 기본 골격이라고 볼 수 있고, Css는 그 기본 골격에서 색상, 크기 등의 스타일를 입혀서 좀 더 사용자가 이쁘게, 혹은 잘 보이게 할 수 있고, Javascript는 그 웹 페이지를 동적으로 변화를 시켜 작게는 정합성과 웹의 프로시져(절차) 기능을 수행하고 크게는 동적 변화를 주어서 프로그램답게 움직이게 하는 기능을 할 수 있습니다.

그 중에서 Html의 태그, 태그 중에서 메타 태그에 대해서 조사했습니다.

메타 태그는 웹 페이지의 설명 키워드 혹은 웹 페이지에 대한 상세 정보라고 할 수 있습니다.

사실 메타 태그는 종류가 엄청 많습니다. 캐쉬를 정의하는 태그도 있고 작성자나 위치, 시간 등을 지정하는 태그도 있습니다.

그러한 태그들을 전부 설명하기에는 내용도 많고 의미가 없을 듯해서 자주 사용하는 태그와 SEO(검색 최적화 태그)에 맞는 태그만 소개하겠습니다.

메타 태그에는 3가지 어트리뷰트(속성)을 가집니다.

1. http-equiv

   - 헤더의 값을 정의할 수 있는 속성이며, 이 속성으로 서버와 브라우져 간의 작동 방식 혹은 지시를 정의할 수 있는 속성 이름입니다.

2. content

   - meta 정보의 내용입니다.

3. name

   - 문서 레벨의 메타데이터의 이름을 정의합니다. itemprop, http-equiv 또는 charset 속성 중 하나라도 설정이 된 경우에는 설정할 수 없습니다.

1. 문자 코드의 종류 설정

   웹 페이지의 인코딩 속성을 지정할 수 있다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">

2. 호환성 설정

   사실 이 태그는 예전의 IE를 많이 쓰던 시절에 각 버전의 호환성을 설정하는 태그입니다. IE 8부터 11까지 edge까지 각 버전마다 렌더링 특성이 확연히 다르기 때문에 웹 페이지가 어디에 최적화가 되어있는지 설정하는 것입니다.

   최근에는 IE 8버전이나 9, 10 버전에는 맞출 필요가 없기 때문에 그냥 형식상 사용합니다. 저도 거의 태그 만들 때 무의식적으로 넣는 태그입니다만, 넣지 않을 때는 어떻게 될지 확인은 못 해봤습니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge;Chromeframe=1">:

3. 뷰포트 설정

   모바일과 PC는 해상도가 다릅니다. 특히 모바일의 경우는 모니터 크기에 비해 해상도가 엄청나게 높은데, 이 해상도에 따라서 웹을 표시하게 되면 브라우저 내용이 엄청 작게 보일 것입니다.

   그래서 해상도가 아닌 실제 크기에 따라 웹의 보이는 형태를 달리해야 하는데, 그럴 때 사용하는 태그입니다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

4. 설명 태그 (description)

   이 태그는 검색엔진에서 설명이 나오는 부분입니다.

제가 보기에는 메타 태그에서 제일 중요한 태그이지 않을까 싶네요. 이 설명 태그가 없다고 해도 검색이 안 되거나 위 설명 표시가 안 나오는 것은 아니지만 아무래도 우선순위에서 밀리고 정확한 키워드로 검색이 안 됩니다.

<meta name="description" content="<![CDATA[ 내용 최대 290글자 ]>">

5. 크롤링 및 색인 생성 동작 제어 태그

   이 태그는 검색 엔진에서 색인이 되고 검색 엔진의 허용 여부를 설정하는 태그입니다.

<meta name="robots" content="ALL">

만약 이 태그를 생략하면 기본 설정인 ALL로 인식합니다. 그러나 none을 설정하면 크롤링, 링크를 설정하지 않거나, noindex는 링크는 크롤링하되, 본 페이지는 검색에 노출하지 않기, nofollow는 링크를 노출하지 않기, nosnippet는 본 페이지에 있는 동영상이나 이미지를 연결하지 않기, noimageindex는 검색 결과에 이미지를 연결하지 않기입니다.

사실 저도 기본 ALL로만 해서 다른 옵션은 잘 모르겠습니다.

6. 일정 시간 후 리디렉션 제어 태그

   이 태그는 일정 시간이 흐르면 설정한 페이지로 리디렉션을 설정합니다. 이 태그는 브라우저에 따라 에러가 발생하는 경우가 있기 때문에 W3C에서는 이 기능의 사용을 추천하지 않습니다.

<meta http-equiv="refresh" content="30;url=https://nowonbun.tistory.com" />

   30초 후 nowonbun.tistory.com으로 이동하라라는 의미의 태그입니다.

7. 성인용 컨텐츠가 포함된 사이트 임을 명시하는 태그

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

8. 그 밖에.

   사실 author 태그도 있고, keywords, copyright 등등의 태그가 많이 있습니다. 처음 글을 쓸 때만 해도 이 태그들을 설명하려는 의도로 글을 작성했으나 조사 해 보니 이 태그들은 검색 엔진이나 웹 브라우저에서 영향력이 없는 태그입니다. 뭐 있으나 마나한 태그라고 하네요. 저도 지금 이 명월일지 블로그만 하더라도 이런 메타 태그를 주렁주렁 달아서 검색 엔진에 더 잘 되게끔(?) 많이 달았는데 별 의미 없다고 합니다. 그래서 설명을 생략하겠습니다.

역시 검색 엔진 최적화하는 것은 태그 보다는 블로그 글의 질이 더 중요한 것같습니다. 여기까지 태그를 조사하기까지 참고한 사이트입니다.

링크 - https://www.w3schools.com/tags/tag_meta.asp

링크 - https://imweb.me/faq?mode=view&category=29&category2=35&idx=28244

링크 - https://support.google.com/webmasters/answer/79812?hl=ko

여기까지 웹 페이지 태그 중에 메타 태그(SEO 최적화 포함) 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.