You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Current »


MetaTag 개요

검색엔진이 검새결과에서 사이트에 대해 설명하는 스니펫을 사용자에게 표시하기 위해 사용한다.

간결해야 하는 제목과 달리 좋은 meta 태그의 desctiption 속성은 두문장 정도로 유지한다. 이러한 문장은 페이지의 콘텐츠를 정화하게 요약해야 한다.

일반적인 내용이거나 키워드로 가득차 있거나 전체 페이지의 내용을 포함하면 안된다.

  • 페이지별로 설명을 다르게 작성해야 한다. 설명이 유사하거나 동일한 경우 검색엔진에 해당 문구 및 검색 노출이 표시될 가능성이 줄어든다. 
  • 사이트 또는 각 페이지에서는 사이트 수준 설명을 사용하고 그 외 모든 곳에서는 페이지 수준 설명을 사용한다.
  • 모든 페이지에 일일이 설명을 작성할 시간이 없는 경우, 콘텐츠의 우선 순위를 정하여 최소한 사이트 및 인기 페이지와 같이 중요한 URL의 설명이 반드시 노출되어야 한다.
  • 설명에 명확하게 태그가 추가된 사실을 포함시킨다. 메타 설명은 문장 형식으로 작성하지 않아도 되며, 메타 설명에 페이지에 대한 구조화된 데이터를 포함시키면 매우 유용하다.
  • 유익한 설명은 처음에 언급한 대로 읽기 쉬워야 하며 다양해야 하며 두 번째로 언급한 페이지별 데이터는 프로그래밍 생성 방식에 적합하다.
  • 키워드가 길게 나열된 메타 설명은 페이지의 콘텐츠에 대해 명확한 정보를 제공하지 못하며, 따라서 일반 스니펫에 표시될 확률이 매우 낮다.
  • 메타태그에 대해 정확하고 적절한 설명은 Google 검색결과에 우수 콘텐츠로 표시되어 사이트에 대한 트래픽을 향상시키는데 도움이 될 수 있다.


MetaTag 기본 종류

메타태그는 HTML페이지의 <Head></Head>사이에 입력하고 마감태그는 없다.

검색로봇이 검색엔진에 등록된 사이트를 주기적으로 돌아다니며 메타태그를 색인해서 데이터를 갱신하게 되는데 자신의 웹사이트 및 블로그에 메타 태그를 적절히 사용하여 검색사이트에 등록하는 것이 좋다.

메타태그의 기본적인 기타 종류는 다음과 같다.

<!-- 웹페이지의 언어 설정 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- 웹페이지의 타이틀 -->
<meta name="title"content="oooooo" />

<!-- 웹페이지의 주제 -->
<meta name="subject"content="oooooo" />

<!-- 웹페이지의 요약설명 -->
<meta name="description"content="oooooo" />

<!-- 웹페이지의 검색키워드 작성 -->
<meta name="keywords" content="oooooo" />

<!-- 웹페이지의 Copyright 저작권 -->
<meta name="copyright" content="oooooo" />

<!-- 웹페이지의 검색사이트 검색로봇의 접근허용 -->
<meta name="robots" content="ALL" />

<!-- 웹페이지의 링크를 포함한 검색(수집) 허용 -->
<meta name="robots" content="INDEX, FOLLOW" />

<!-- 웹페이지의 캐쉬(cache)미저장 -->
<meta http-equiv="cache-control" content="No-Cache" />
<meta http-equiv="pragma" content="No-Cacha" />

<!-- 웹페이지의 최종수정날짜 -->
<meta http-equiv="Last-Modified" content="wed, 25 Dec 2015 14:20:00" />


<!-- 모바일 APP 노출 -->
<meta property="al:ios:url" content="applinks://docs" />
<meta property="al:ios:app_store_id" content="12345" />
<meta property="al:ios:app_name" content="App Links" />
<meta property="al:android:url" content="applinks://docs" />
<meta property="al:android:app_name" content="App Links" />
<meta property="al:android:package" content="org.applinks" />
<meta property="al:web:url" content=http://applinks.org/documentation />

※ IOS가 아닌 iphone과 ipad를 별도의 앱으로 배포하는 경우 “al:iphone” 과 “al:ipad”를 사용한다. (http://applinks.org 참조)



웹크롤러(Web Crawler) 색인중단, 로봇(robot) MetaTag로서 NOINDEX는 인덱스거부, NOFOLLOW는 이페이지에 있는 링크를 거부, NOARCHIVE는 캐싱,즉 웹페이지를 저장하지 않는 의미이다.

웹 크롤러에 페이지의 색인을 생성하지 않으며, 페이지의 모든 링크를 크롤링 하지 않도록 지시하는 로봇(robots) 메타태그이다.

<!-- 웹 페이지(사이트)검색,색인,링크,이미지 등 차단 // 검색엔진 미노출 -->
<meta name="robots" content="none" />
<meta name="robots" content="noindex, nofollow" />
<meta name="robots" content="noimageindex" />
<meta name="robots" content="noarchive" />
<!-- 웹 페이지(사이트) 검색,색인,링크,이미지 등 차단 // Google 검색엔진 미노출 -->
<meta name="googlebot" content="noindex, nofollow" />
<meta name="googlebot" content="noimageindex" />


Rel=“nofollow” 링크 속성 사용시 유의

Rel=“nofollow” 속성을 사용하여 스팸 댓글을 방지, 링크의 “rel” 속성 값을 “nofollow” 로 설정하면 사이트의 특정 링크를 따르지 말거나 페이지의 인지도를 링크된 페이지로 전달하지 말라는 의미이다.

링크를 따르지 않는다는 것은 링크의 앵커 텍스트 내부에 rel=”nofollow”를 추가하는 것이다.

“nofollow” 를 일부 내용 또는 전체 페이지에 적용해야 하는 경우는 Nofollow 의 또 다른 용도는 콘텐츠의 작성할 때 웹사이트는 참조하고 싶지만 인지도를 전달하고 싶지는 않은 경우이다.

다른 사람들에게 이 사이트에 대해 경고하고 싶으므로 콘텐츠에 링크를 포함 하긴 하지만 이 링크로 인해 해당 사이트에 인지도를 전달하고 싶은 생각은 전혀 없는 경우이다.

페이지의 모든 링크를 nofollow 하고 싶으면 로소 메타 태그에 “nofollow”를 사용하면 된다.


Rel=“canonical” 링크 요소를 사용하여 선호 URL 지정

다양한 URL로 콘텐츠에 액세스할수 있지만 https://blog.example.com/dresses/green-dresses-are-awesome/ 페이지를 선호 URL로 한다고 가정하면, 검색 엔진에 다음과 같이 지정할 수 있다.

  • rel="canonical" 링크 요소로 표준 페이지 및 다른 유사 페이지를 마크업한다. 
  • rel="canonical" 속성이 있는 <link> 요소를 이러한 페이지의 <head> 섹션에 추가합니다. <link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" /> 

이렇게 하면 녹색 드레스 관련 글에 액세스할 때 선호 URL을 사용하도록 지정된다. 그러면 사용자의 검색결과에 그 URL 구조가 표시될 가능성이 커진다.

오류 방지: rel="canonical" 링크 요소에는 상대 경로보다는 절대 경로를 사용해야 한다.

https://www.example.com/dresses/green/greendresss.html 구조를 사용한다.

/dresses/green/greendress.html 구조를 사용해서는 절대 안된다.

퍼머링크(permalink)는 인터넷에서 특정 페이지에 영구적으로 할당된 URL 주소를 뜻한다. 이 주소는 한 번 정해지면 영원하다는 의미에서, 영구적인(permanent) 주소라는 뜻의 permanent link를 줄여 만든 말이다.


HTTP 헤더에 표준 링크 지정

서버를 구성할 수 있는 경우 rel="canonical" HTTP 헤더를 사용하여 HTML 문서 및 PDF와 같은 기타 파일의 표준 URL을 지정할 수 있다.

사이트에서 다음과 같이 다른 URL을 통해 동일한 PDF를 제공한다고 가정해 보면, 다음과 같다.

이 경우 rel="canonical" HTTP 헤더를 사용하여 다음과 같이 PDF 파일의 표준 URL을 Google에 지정할 수 있다.

Link: <http://www.example.com/downloads/white-paper.pdf>; rel="canonical"

※ Google은 현재 웹 검색에만 이 링크 헤더 요소를 지원한다.



  • No labels