[검색엔진최적화 / SEO] 사이트 노출을 위한 검색엔진최적화(Search Engine Optimization, SEO)_meta tag(메타태그)속성 및 사용법

[검색엔진최적화 / SEO] 사이트 노출을 위한 검색엔진최적화

(Search Engine Optimization, SEO)_meta tag(메타태그)속성 및 사용법

네이버 메타태그 설정화면

다음 메타태그 화면

메타태그는 검색엔진최적화(SEO)에 있어 내부에서 할 수 있는 가장 기본적인 행동이라고 생각합니다. 하지만 네이버가 가장 높은 비율을 차지하는 대한민국의 현실에서는 아무리 좋은 검색엔진최적화(SEO)를 하였다고 하더라도 광고를 집행했을 때의 효율이 훨씬 더 높기에 대부분이 검색엔진최적화(SEO)보다는 네이버 키워드 검색광고의 효율적 집행에 더 많은 노력을 기울이고 있는 것으로 알고 있습니다. 

하지만 어느순간인가부터 구글의 검색비율이 점점 네이버를 검색비율을 잡아 먹으면서 올라오고 있으면서 검색엔진최적화(SEO)에 더 관심을 가져야 하는 시점이 오고 있다고 생각합니다. 

또한 네이버도 광고지면에 대한 고객들의 불만이 알게모르게 계속 생겨나면서 구글과 같이 자연검색어를 통한 검색 결과에 대한 부분에 더 많이 신경쓰고 있는 것으로 알고 있습니다. 이런 흐름에 맞춰서 그 동안 메타태그와 같은 부분에 신경을 조금 덜 써왔던 분들이라면 관심을 가지면 좋을거 같습니다. 특히 마케터나 기획자라면 더 관심을 가지고 보면 좋을거 같습니다!

 

그리고 아래 정리한 글이 html을 공부하는 사람뿐만 아니라 블로그를 운영하는 사람들에게도 도움이 많이 되었으면 좋겠습니다. 

 

l 메타태그란(meta tag)?

 

하이퍼텍스트 생성 언어(HTML) 문서의 맨 위쪽에 위치하는 태그. HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있다.
- IT용어사전, 한국정보통신기술협회 

 

메타정보는 데이터에 대한 데이터(정보)이다. 

<meta>태그는 HTML 문서에 대한 메타정보를 제공한다. 메타정보는 페이지에 표시되진 않지만 브라우저에 의해 파싱된다. Meta 요소는 페이지 설명, 키워드, 저자, 최종수정일 등의 정보를 명시하기 위한 목적에 사용된다. 

그 메타정보는 브라우저(어떻게 내용을 표시할지, 페이지를 리로딩할지), 검색엔진(키워드) 혹은 다른 웹서비스에 의해 사용된다. 

- 주변 블로그 취합

 

메타 태그는 웹페이지 내용의 일부 측면을 설명하는 HTMP(Hypertext Markup Language)의 태그 (즉, 코딩 설명)입니다. 메타 태그에 제공 한 정보는 검색 엔진에서 페이지를 색인화하기 위해 사용되므로 페이지에 포함 된 정보를 검색하는 사람이 해당 정보를 찾을 수 있습니다. 메타태그는 웹페이지의 HTML 상단 근처에 제목의 일부로 배치됩니다. 

 

메타 태그는 여러 종류가 있지만 검색 엔진 색인 생성에 가장 중요한 것은 keywords 메타 태그와 description 메타 태그입니다. keywords 메타 태그는 페이지의 내용을 가장 설명하는 단어 나 구를 나열합니다. description 메타 태그에는 페이지의 간단한 한두 문장으로 된 설명이 포함됩니다. 키워드와 설명은 모두 검색 엔진에서 색인에 페이지를 추가 할 때 사용됩니다. 일부 검색 엔진은이 설명을 사용하여 검색 자에게 페이지 내용의 요약을 표시합니다. 대부분의 검색 엔진은 페이지의 컨텐츠를 색인 작성 방법을 결정하는 방법으로 사용하지만 웹 페이지 작성자는 적절한 키워드와 설명이있는 메타 태그를 포함해야합니다. 잘 작성된 메타 태그는 검색 결과에서 페이지 순위를 높이는 데 도움이됩니다.

 

출처 - https://whatis.techtarget.com/definition/meta-tag 

원문

A meta tag is a tag (that is, a coding statement) in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. The information that you provide in a meta tag is used by search engines to index a page so that someone searching for the kind of information the page contains will be able to find it. The meta tag is placed near the top of the HTML in a Web page as part of the heading.

There are several kinds of meta tags, but the most important for search engine indexing are the keywords meta tag and the description meta tag. The keywords meta tag lists the words or phrases that best describe the contents of the page. The description meta tag includes a brief one- or two-sentence description of the page. Both the keywords and the description are used by search engines in adding a page to their index. Some search engines also use the description to show the searcher a summary of the page's contents.
Although most search engines also use the contents of a page as a way to determine how to index it, the creator of a Web page should be sure to include meta tags with appropriate keywords and description. Well-written meta tags can help make the page rank higher in search results

출처 - https://whatis.techtarget.com/definition/meta-tag

 

* 구글에서는 현재 keywords 메타 태그를 반영하지 않는다고 합니다. 

 

메타 태그 중 keywords 속성은 문서에 대한 핵심어를 검색 엔진에 전달해서 검색에 도움이 되는 중요한 요소였지만, 오늘날에는 중요한 요소로서의 역할을 하지 못하고 있다고 합니다. 그리고 어떤글을 찾아봤을때는 keywords 속성을 쓰지 않는 것을 권유하기도 한다고 합니다. keywords 속성을 추가하는게 시간 낭비이며 실제로 사용할 수 있는 유용한 작업들이 훨씬 많이 있기에 다른 작업을 하기를 바란다고 합니다.  

 

description의 경우에는 사이트의 정보를 설명하는 속성으로 사용한다고해서, 상위 랭킹이 되지는 않지만 사이트에 대한 정확한 정보가 나와 있을 때 사용자는 클릭할 가능성이 더 높습니다. description을 쓰지 않을 경우, 또는 설명이 부정확할 경우 검색엔진은 페이지에 있는 것 중 다른 것으로 대체합니다. 

 

10x10 PC URL 네이버 사이트 간단체크 결과

10x10의 경우 대부분의 항목이 잘 들어가 있지만 open graph 설명은 빠져 있는것을 확인할 수 있습니다. 

10x10 MO URL 모바일 URL

10x10의 PC URL과 달리 모바일 URL에서는 Open Graph의 설명항목은 들어가 있지만 사이트의 설명항목은 빠져 있는 것을 볼 수 있습니다. 아마도 소셜네트워크쪽에서 사용하는 URL은 대부분이 모바일 URL이기에 이런식으로 메타태그를 설정해 놓은것이라고 추측됩니다. 

 

 

ㅣ 메타태그의 속성

 

• meta 요소는 head 요소 안에 기술한다.
• meta 요소의 속성은 반드시 name/value 쌍으로 주어진다.
• name 속성, http-equiv 속성, charset 속성 중 하나를 반드시 써야 한다. 
• http-equipv 속성을 정의한 경우 meta 요소는 반드시 head 요소 내에 기술한다. 
• http-equipv 속성이 없는 meta 요소는 head 요소 또는 head 요소의 자식 요소인 noscript 요소 내부에 기술 한다. 
• name이나 http-equiv 속성이 정의된 경우 반드시 content 속성이 정의 되어야 한다. 아니라면 content 속성의 정의되지 않아야 한다. 

 ㅣ 사용할 수 있는 속성

 

Attribute	value	Description
charset	character_set	HTML 문서의 문자 인코딩을 지정합니다.
content	text	http-equiv 또는 name 속성과 연관된 값을 제공합니다.
http-equiv	content-type default-style refresh	content 속성의 정보 / 값에 대한 HTTP 헤더를 제공합니다.
name	application-name author description generator keywords viewport	메타 데이터의 이름을 지정합니다.
scheme	format/URI	HTML5에서는 지원되지 않습니다. content 속성 값을 해석하는 데 사용할 체계를 지정합니다

 

l HTML 4.01과 HTML 5 차이

 

scheme 속성은 HTML5에서 지원되지 않습니다.

HTML5에는 새로운 속성 인 charset이있어 charset을 쉽게 정의 할 수 있습니다.

 

• HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
• HTML5 : <meta charset="UTF-8">

문자코드 세트는 HTML파일이 시작하고 나서 512byte 이내에 위치할 것을 권장합니다. 

<head> 시작 태그 바로 다음에 기재하면 됩니다. 

 

 

참고 : https://www.w3schools.com/tags/tag_meta.asp

 

l 메타태그의 종류

① meta http-equiv 종류 정리

 

• 사이트의 기본 언어 설정하기 :  content-language 속성값

<meta http-equiv="content-language" content="ko">

 

• 문자 코드의 종류 설정 : Content-Type 속성값

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

*HTML 5에서는 다음으로 대체해서 사용
<meta charset = "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  : 모든 언어의 문자를 지원하는 인코딩

 

• 브라우져 호환 설정 :  X-UA-Compatible 속성값

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

IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용
IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용
IE=EmulateIE7 : IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링.
IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링.
IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링.
IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- 인터넷 익스플로러 최신버전으로 랜더링한 후에 크롬이 깔려있다면 크롬으로 랜더링하게 해줍니다.

• 새로고침 설정 : Refresh 속성값

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


content "숫자" 숫자를 수정하면 초단위로 Refresh 시간을 설정할 수 있음.

*Refresh 이후 입력한 주소로 자동 이동 정의

<metahttp-equiv="Refresh"content="60;url=url주소">

지정한 url주소로 60초후 이동하도록함

 

• 캐쉬만료일 설정 : Expires 속성값

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

캐쉬의 최종 만료일을 정의. 해당일이 되면 캐쉬가 파기됨.

 CONTENT="0"   단위는 분단위 , 0분이 지나면 캐쉬를 지우고 새롭게 다시 읽음.

<meta http-equiv='Cache-Control' CONTENT='no-cache'>
<meta http-equiv='Pragma' CONTENT='no-cache'>
캐쉬가 되지 않게 하는 태그 즉, 매번 새로운 페이지를 열게된다.
자주 고치는 페이지에서는 이것을 사용하는 것이 항상 방문자에게 바뀐 내용을 보여 줄 수가 있음.

<meta http-equiv="ExpiresAbsolute" CONTENT="#5/20/1999 00:00:00#">
 캐쉬 완료(파기)시간을 날짜와 시간으로 정확히 정의

 

• 페이지 들어갈 때 장면 전환 효과 : pgee-enter 속성값

<meta http-equiv="Page-Enter" 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 : 임의로 생성 

 

• 그림 위에 마우스 오버시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정 : imagetoolbar 속성 값

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

 

② meta name 종류 정리

 

• 로봇검색 제어 : Robots 속성

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

content 속성에는 다음과 같이 지정할 수 있고 복수지정할 때에는 콤마(,)로 구분합니다.

All(기본값) : 'index, follow' 를 지정한 것과 같습니다.
None : 'noindex, nofollow' 를 지정한 것과 같습니다.
Index : 그 페이지를 수집 대상으로 합니다.
Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 합니다.
Noindex : 그 페이지를 수집대상에서 제외합니다.
Nofollow : 그페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않습니다.

기본 4가지 조합
<meta name="robots" content="index,follow" />
: 이 문서도 긁어가고 링크된 문서도 긁어감.

<meta name="robots" content="noindex,follow" />
: 이 문서는 긁어가지 말고 링크된 문서만 긁어감.

<meta name="robots" content="index,nofollow" />
: 이 문서는 긁어가되, 링크는 무시함.

<meta name="robots" content="noindex,nofollow" />
: 이 문서도 긁지 않고, 링크도 무시함.


*중요!
사이트의 robot.txt와 위의 robot속성은 하는 역할이 다름.
크롤링제어는 robot.txt가 하며, 인덱싱제어는 <meta name="robots" content="index,follow" />이 하고 있음
그럼으로 크롤링와 인덱싱을 모두 진행하려면 둘다 설정해야함. 

 

• 검색엔진 키워드 지정 : Keywords 속성

<meta name="Keywords" content="keyeord1, 키워드2, 키워드3" />

구글에서는 더 이상 사용하지 않음. 
메타 태그를 상업적으로 '악용'한 페이지가 너무 많아서 제대로 된 검색 결과를 얻지 못한다는 점을 깨달은 검색엔진 회사들이(특히 구글 처럼 링크 구조(Link structure) 기반의 자동화된 검색엔진) 메타 태그를 거의 무시하고 있기 때문임.
그런 한계에도 불구하고 메타 태그가 없는 것보다는 있는 쪽이 검색에 더 도움이 되므로 적절히 사용하는 것이 좋음.

*Keyowrds 속성은 대소문자를 구분함으로 대소문자를 구별해서 사용해야 함. 

 

• 페이지 설명 지정 : Description 속성

<meta name="Description" content="이 페이지는 메타태그 설명입니다" />

검색결과에 나오는 페이지에 관한 설명이 나오는 영역.
페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용하며 반복성 문구 및 스팸성 문구는 불이익 가능성이 있음.
자주변경하는 것도 불이익의 가능성이 있을 수 있음.

 

• 제목을 지정 : Title 속성값

<meta name="Title" content="사이트 제목 표기" />

<title>..</title>의 타이틀은 필수요소지만, 메타태그의 타이틀은 단순정보의 역할임.

 

• 제작 년,월,일을 지정 : Build 속성 값

<meta name="Build" content="날짜입력" />

날짜는 2015.7.22 형태로 지정하면 됨. 

 

• 위치를 지정 : Location 속성 값

<meta name="Location"content="위치"/>

• 웹페이지에 쓰인 언어를 지정 : content-script-type 속성 값

<meta name="Content-Script-Type" content="text/javascript" /> 
<meta name="Content-Style-Type" content="text/css" />

 

• 웹 책임자를 지정 : Other Agent 속성 값

<meta name="Other Agent" content="name" />

 

• 메일 주소를 지정 : Email 속성 값

<meta name="Reply-To" content="naver@naver.com" />
<meta name="Email" content="naver@naver.com" />

 

• 저작권을 지정 : Copyright 속성 값

<meta name="Copyright" content="copyright@web address" />

 

• 페이지를 작성한 제작자명을 지정 : Author 속성

<meta name="Author" content="name" />

 

• 제작도구를 지정 : Generator 속성

<meta name="Generator" content="CODA" />

 

• 제작사를 지정 : Publisher 속성

<meta name="Other Agent" content="name" />

 

• 홈페이지 주제를 지정 : Subject 속성

<meta name="Subject" content="주제주제" />

 

③ OG(open graph) 태그 개체 종류 정리

 

오픈그래프는 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될때 사용되어지는 정보이다.
제일 흔한 예로 페이스북에 링크를 붙여놓기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우가 오픈그래프가 활용된 경우이다.

 

오픈그래프 참고 페이지 https://ogp.me/

Open Graph protocol

오픈그래프 작성을 도와주는 페이지 : https://developers.facebook.com/tools/debug/sharing

공유 디버거 - Facebook for Developers

 

페이스북의 공유디버거로 주소를 위와 같이 입력하게 되면 제일 상단에는 해결해야하는 경고에 관해서 알려줍니다. 그리고 페이스북에서 보이는 링크의 미리보기 그리고 간략한 정보들을 보여줍니다. 

 

그리고 하단에는 OG태그, 곧 오픈그래프 태그의 속성을 간결하고 보기좋게 보여주는 모습을 볼 수 있습니다. 그래서 현재 오픈그래프트 태그의 상태에 관해 한눈에 확인 할 수 있습니다. 

 

OG 태그의 구성

속성	설명
og:url	페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 포함되지 않은 그대로의 URL이어야 합니다.
og:title	사이트 이름
og:description	페이지의 간략한 설명으로, 대개 2~4개의 문장으로 구성됩니다.
og:image	사용자가 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다.
og:type	콘텐츠의 미디어 유형입니다.  유형을 지정하지 않는 경우 기본값은 website입니다. 각 URL은 단일 개체여야 하므로, 여러 og:type 값을 사용할 수 없습니다.

적용예시

<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg">
<meta property="og:url" content="http://www.mysite.com/article/article1.html">

 

추가! Twitter Cards용 메타태그 설정

트위터를 사용하는 사이트라면 아래태그도 추가가 필요!

속성	설명
twitter:card	카드 종류 summary, photo, player의 값
twitter:url	트위터 카드를 사용하는 URL
twitter:title	카드의  제목
twitter:description	카드의 요약 설명
twitter:image	카드에 보여줄 이미지

 

아래는 제가 간단하게 구성해본 메타태그 기본 구성입니다. 

최소한 이정도면 되지 않을까라는 개인적인 견해입니다. 

메타태그 기본 SET 

<html lang="ko">
<head>
<meta charset="UTF-8">
<title>...</title>
<meta name="viewport" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
</head>
</html>

 

많은 사이트들을 탐색했을때, OG태그, 오픈그래프태그의 경우에는 모바일 사이트에만 적용해 놓는 경우가 많았습니다. 특별한 이유에 관해서는 찾아내지 못하기는 했는데요. 굳이 불필요한 태그정보를 안넣으려는 의도도 있는거 같습니다. 

 

나름 메타태그의 많은 경들을 정리하기 위해서 노력해봤는데, 잘 정리가 되었는지 모르겠네요.

그리고 저도 몰랐던 메타태그에 관해서 많이 알게된 계기였습니다. 

앞으로 제가 관리하는 사이트도 가능한 깔끔하게 정리를 잘 해봐야겠네요!