Github Pages Hexo 검색엔진최적화(SEO)

블로그 등을 운영하면서 나의 게시물이 검색엔진에 잘 노출되기 위해서는 몇가지 선행조건이 필요합니다.

크게 네이버와 구글, 다음에 등록하시는 것을 추천합니다.

• 네이버 웹마스터 도구
• 구글 Search Console
• 다음 검색등록

위 사이트에 등록을 잘하기 위해서는 몇가지 도구들이 필요합니다.

이를 위한 hexo 플러그인을 소개합니다.

hexo-autonofollow

해당 포스트에서 참고하고 있는 외부 링크에 nofollow 속성을 자동으로 추가해주는 플러그인입니다.

먼저 nofollow 속성이 무엇이고 왜 추가해야하는지 알아보겠습니다.

nofollow

특정 페이지의 링크를 추적하지 않도록 하거나 특정 링크의 추적을 막을때 nofollow 속성값을 사용 할 수 있습니다.

검색엔진마다 nofollow 속성을 처리하는 방식이 다를 수 있습니다.

이 페이지의 링크를 추적하지 않도록 설정할때 :

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

특정 링크의 추적을 하지 않도록 설정할때 :

<a href="http://www.test.com/" rel="nofollow">링크</a>

보통 신뢰할 수 없는 콘텐츠나 유료 링크의 경우 다른 사용자의 검색에 노출되지 않아야 하므로 nofollow 속성을 사용하는 것이 좋습니다.

기능

• 모든 외부 링크에 rel=”external nofollow” 속성을 자동으로 추가합니다.
• 외부링크에만 동작하기 때문에 본인 사이트의 도메인 링크는 제외됩니다.
• 외부 링크에 target=”_blank” 속성을 넣어서 클릭할 경우 새로운 탭 또는 윈도우에서 열리게 합니다.

설치

$ npm install hexo-autonofollow --save

옵션

_config.yml

nofollow:
    enable: true
    exclude:
    - exclude1.com
    - exclude2.com

옵션	설명
enable	플러그인 활성화
exclude	제외할 호스트

hexo-generator-robotstxt

robots.txt 문서는 일반 사용자 분들이나 사이트를 제작한지 얼마 안되신 분들에게는 아마 생소한 문서 이실겁니다.

무엇을 하고 이게 왜 필요 한지에 대해서도 모르실것이구요.

구글이나 위키백과 같은 곳에서는 다음과 같이 정의 하고 있습니다.

robots.txt 파일은 사이트의 루트에 위치하며 사이트에서 검색 엔진 크롤러가 액세스하지 않기를 바라는
부분을 표시합니다.

파일에서는 로봇 배제 표준 프로토콜의 명령을 사용하여 섹션별, 웹 크롤러 종류별(모바일 크롤러, 데스크톱 크롤러 등)로 사이트에 대한 액세스 권한을 표시합니다.

출처 : 구글(https://support.google.com/webmasters/answer/6062608?hl=ko)

간단하게 말하자만 내 사이트에서 포털사이트(검색엔진)의 로봇이 가져가도 괜찮다고 허락하는 부분과 가져가면 안된다 라는 설정을 하는 부분이라고 보시면 됩니다.

robots.txt 문서를 작성하는데 있어서 중요한 3가지 키워드가 있습니다.

User-agent / Disallow / Allow

위에 보시는 3가지 입니다. 각각의 의미하는 내용은 아래와 같습니다.

• User-agent : 다음 규칙이 적용되는 로봇의 이름
• Disallow : 차단할 URL 경로
• Allow : 차단 된 상위 디렉토리의 하위 디렉토리에있는 URL 경로이며 차단 해제 할 디렉토리

hexo-generator-robotstxt는 이 robots.txt를 자동으로 생성해 줍니다.

설치

$ npm install hexo-generator-robotstxt --save

옵션

_config.yml

plugins:
- hexo-generator-robotstxt

robotstxt:
  useragent: "*"
  disallow:
    - /one_file_to_disallow.html
    - /2nd_file_to_disallow.html
    - /3rd_file_to_disallow.html
  allow:
    - /one_file_to_allow.html
    - /2nd_file_to_allow.html
    - /3rd_file_to_allow.html
  sitemap: /sitemap.xml

옵션	설명
useragent	다음 규칙이 적용되는 로봇의 이름
disallow	차단할 URL 경로
allow	차단 된 상위 디렉토리의 하위 디렉토리에있는 URL 경로이며 차단 해제 할 디렉토리
sitemap	sitemap의 경로

hexo-auto-canonical

<meta> 태그 중 canonical 속성은 대표 URL (선호 URL) 을 나타냅니다.

동일 콘텐츠를 여러개의 URL로 표현이 가능할 경우 가장 선호되는 대표 URL을 지정하는 것이 바로 대표 URL 입니다.

중복되거나 비슷한 콘텐츠에 대한 링크를 통합해서 같은 주제에 통계를 내기가 쉽고 사용자가 검색을 통해 페이지에 방문하기에 유리합니다.

hexo-auto-canonical를 사용하면 자동으로 각 포스트마다 canonical을 넣어줍니다.

설치

$ npm install hexo-auto-canonical --save

사용법

이제 태그 안에 대표 URL 속성을 집어넣어야합니다.

head.ejs 안에 다음 코드를 넣으면 generate 할 때 코드를 생성해줍니다.

파일 중간 쯤에 <%- meta(page) %> 라고 있는데 그 바로 아래 붙여넣으시면 됩니다.

<%- autoCanonical(config, page) %>

hexo-generator-seo-friendly-sitemap

sitemap이란 홈페이지에 있는 정보가 어떻게 설계되어 있는지를 표준화된 규칙으로 작성한 xml 파일을 말합니다.

검색엔진(크롤러)가 복잡한 홈페이지에서 길을 잃지 않게 도와주는 동반자 역활을 합니다.

sitemap.xml을 자동으로 만들어주는 플러그인을 알아보겠습니다.

설치

$ npm install hexo-generator-seo-friendly-sitemap --save

사용법

_config.yml

# sitemap auto generator
sitemap:
    path: sitemap.xml

path 값을 sitemap.xml 이라고 지정했기 때문에 root 폴더에 sitemap.xml 이 생성됩니다.

hexo-generator-feed

RSS feed 는 사이트내의 최신 콘텐츠를 담고 있는 파일입니다.

등록한 사이트에서 새 글이 올라오면 바로 읽을 수 있는 RSS feed Reader 를 생각해보시면 되겠습니다.

이 또한 검색엔진에 제출할 수 있습니다.

RSS를 자동으로 만들어주는 플러그인을 알아보겠습니다.

설치

$ npm install hexo-generator-feed --save

사용법

_config.yml

# rss feed auto generator
feed:
  type: rss2
  path: feed.xml
  limit: 20
  hub:

옵션	설명
type	feed 타입 설정 (atom/rss2)
path	feed 파일을 저장할 경로 (기본값 atom.xml/rss2.xml)
limit	최신 포스트의 갯수 설정. (0 또는 false 입력 시 전체 포스트)

root 경로에 feed.xml 이 생긴 것을 확인하실 수 있습니다.

네이버 웹마스터 도구는 atom을 신식하지 못하기 때문에 rss2 type으로 설정하시는 것이 좋습니다.
(구글 서치 콘솔은 atom도 인식합니다.)