hexo SEO 적용하기

지난 글들에 이어 블로그에 SEO를 적용해보았다.

크롤링 개선

  • description

    게시글마다 description을 추가해주었다.
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: SEO 알아보기(2)
    date: 2021-11-30 16:15:36
    tags: [seo]
    description: GOOGLE 검색 센터를 통해 검색엔진 최적화(SEO)에 대해 더 자세하게 알아보자.
    category: [seo]
    toc: true
    ---

호환성 검사

블로그의 HTML을 검사하였다.

HTMl 검사

<meta>태그가 있다.
HTMl 검사

./theme/icarus/layout/common/head.jsx

1
2
3
4
5
{
meta && meta.length ? <MetaTags meta={meta} /> : null;
}

<title>{getPageTitle(page, config.title, helper)}</title>;

다만 이 부분은 hexo 내부 로직이라 혹시나 발생할 사이드이펙트 때문에 수정하지는 않았다.

검색엔진에 등록하기

검색엔진에 내 사이트 정보를 등록하였다. 안 하여도 되지만 조금 더 빨리 크롤링 된다고 한다.
등록 뒤에도 며칠 기다려야 한다..! 사이트마다 어떻게 등록했는지는 사진을 찍어두지 못하였다.

  • 네이버 웹마스터 도구 에서 사이트를 등록하였다. 등록 후엔 간단 체크로 체크해볼 수 있다. 사이트맵과 rss제출도 할 수 있다.

    ./theme/icarus/layout/common/head.jsx 소유권을 인증하는 <meta>태그를 삽입하였다.

    1
    <meta name="naver-site-verification" content="...">
  • Google

    구글 서치 콘솔에도 등록하였고, 사이트맵과 rss제출도 할 수 있다.

    ./theme/icarus/layout/common/head.jsx 소유권을 인증하는 <meta>태그를 삽입하였다.

    1
    <meta name="google-site-verification" content="...">
  • daum

    다음 검색 등록은 rss제출과 사이트맵 제출을 요구하지 않았다.

플러그인

hexo에선 SEO적용을 돕는 여러 플러그인을 지원한다.
나는 아래와 같은 플러그인을 적용하였다.

  • hexo-autonofollow

    hexo-autonofollow는 블로그 내의 <a>태그마다 자동으로 nofollow 속성을 추가해주는 플러그인이다.
    사이트와 연관되지 않은 url들의 크롤링을 막는 기능을 한다.

    다음과 같이 설치할 수 있다.

    1
    npm install hexo-autonofollow --save

    _config.yml 파일에 다음과 같이 적용한다.

    1
    2
    3
    4
    5
    nofollow:
    enable: true
    exclude: //제외할 호스트
    - exclude1.com
    - exclude2.com
  • hexo-generator-seo-friendly-sitemap

    hexo-generator-seo-friendly-sitemap은 자동으로 sitemap을 생성해주는 플러그인이다.

    다음과 같이 설치할 수 있다.

    1
    npm install hexo-autonofollow --save

    _config.yml 파일에 다음과 같이 적용한다.

    1
    2
    3
    4
    sitemap:
    path: sitemap.xml //sitemap의 경로
    tag: false
    category: false
  • hexo-generator-seo-friendly-sitemap

    hexo-generator-seo-friendly-sitemap은 자동으로 sitemap을 생성해주는 플러그인이다.

    다음과 같이 설치할 수 있다.

    1
    npm install hexo-autonofollow --save

    _config.yml 파일에 다음과 같이 적용한다.

    1
    2
    3
    4
    sitemap:
    path: sitemap.xml //sitemap의 경로
    tag: false
    category: false
  • hexo-generator-feed

    hexo-generator-feed은 자동으로 RSS 피드를 생성해주는 플러그인이다.

    다음과 같이 설치할 수 있다.

    1
    npm install hexo-generator-feed --save

    _config.yml 파일에 다음과 같이 적용한다.

    1
    2
    3
    4
    feed:
    type: rss2 //rss
    path: rss2.xml //경로
    limit: 20 //url수
  • hexo-generator-robotstxt

    hexo-generator-robotstxt은 자동으로 robots.txt를 생성해주는 플러그인이다.

    다음과 같이 설치할 수 있다.

    1
    npm install hexo-generator-robotstxt --save

    _config.yml 파일에 다음과 같이 적용한다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    feed:
    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

ref

hexoplugin

마무리

SEO작업을 마무리 하였고, 결과 반영까지 기다리는 중이다..!
최소 5일정도 걸린다고 하니 그 떄까지 기다려보고 문제가 있으면 다시 수정해보아야겠다.

SEO 알아보기(2)

지난글에 이어서 SEO에 대해서 더 자세하게 정리하려 한다.

Google 검색 센터의 advanced를 참고하였다.

사이트맵

사이트맵은 사이트의 중요한 페이지를 Google에 알려주는 방법이다. 사이트맵은 다음과 같이 접근할 수 있는 url과 업데이트 빈도등의 정보를 제공한다. 사이트맵을 사용할 경우 Google에서 크롤링할 페이지를 찾고 우선순위로 지정한다.

내 블로그의 사이트맵이다. 접근할 수 있는 url 정보와 업데이트 정보를 저장하고 있다.
사이트맵

사이트맵

RSS피드

사이트의 최신 컨텐츠를 제목과 본문을 포함한 xml파일이다.
검색엔진은 RSS 피드를 주기적으로 재방문하여 크롤링한다.

내 블로그의 RSS피드이다. 제목을 포함한 컨텐츠 정보를 저장하고 있다.
사이트맵

robots.txt

크롤러가 사이트에서 엑세스 할 수 있는 URL을 검색엔진 크롤러에 전달하는 파일이다. 콘텐츠가 크롤링 서버에 문제를 일으킬 수 있는 경우 사용한다.

일반적으로 다음과 같이 작성된다.
참고로 모든 url은 암시적으로 허용된다.
allow 명령어는 disallow 명령어를 재정의 하는데에 사용된다.

robots.txt

1
2
3
4
5
6
7
8
9
10
// 전부 차단하는 예시
User-agent:*
Disallow: /

//Googlebot과 AdsBot의 크롤링을 허용하는 예시
User-agent:Googlebot
User-agent:AdsBot-Goggle
Allow: /article //구글 봇과 AdsBot에 /article 크롤링 허용

Sitemap: '사이트맵 url' //사이트맵 정보

브라우저 호환성 고려하기

브라우저마다 웹사이트 해석방식이 다르다.
개별 브라우저 작업에 의존하지 않도록 해야한다.

  • 가능한 많은 브라우저에서 작동하는지 테스트하기

    모양과 기능이 어떻게 작동하는지 확인해야한다.

  • 올바르고 오류가 없는 HTML 작성하기

    유효한 HTML과 CSS를 이용하여 작성한 다음 테스트를 거쳐야한다. 아래서 언급할 검사도구를 이용해 쉽게 검사할 수 있다.

  • 문자 인코딩 지정

    페이지의 텍스틀 랜더링할 문자 인코딩을 지정해야한다.
    <head>에 아래 내용을 추가해주면 된다. utf-8 기준이다.

    1
    <meta charset="utf-8" />
  • 누구나 사용할 수 있는 기술 적용하기

    flash나 activex와 같은 지원되지 않는 기술을 피해야한다.

브라우저 호환성 검사도구

Nu HTML Checker
w3c CSS Validation Service

SEO 알아보기(1)

블로그에 SEO를 적용하는 도중 GOOGLE 검색 센터에서 제공하는 SEO관련 문서를 읽고 정리해보았다.

검색 엔진의 작동방식

  1. 크롤링

  • 크롤러를 이용해 웹을 검색하여 신규 또는 업데이트 된 페이지를 찾는다.
    그 후발견된 페이지의 주소(또는 페이지 URL)을 큰 목록에 저장한다.
  1. 색인 생성

  • 크롤링을 통해 파악한 페이지를 방문하여 각 페이지에 관한 정보를 분석한다.
    페이지의 콘텐츠, 이미지, 동영상 파일을 분석하여 어떤 페이지인지 파악한다.
    이 정보는 데이터베이스에 저장된다.
    이 과정은 HTMl 파일을 분석하여 진행된다.
    만약 HTML 파일에 내용이 없고 js파일을 통해서만 수정하는 경우 위 작업이 어려울 수 있다.
  1. 검색 결과 게재

  • 검색 시 사이트마다 내부 알고리즘을 통해 최적의 검색결과를 선정한다.

SEO(Search Engine Optimization)

  • 검색엔진의 작동원리를 이용하여 검색결과에 잘 노출되도록 하는 과정이다.
  1. 크롤링 개선하기

  • 페이지가 올바르게 표시되는지도 기준이다.
    페이지의 모든 이미지와 기타 요소가 바르게 랜더링되는지 확인해야한다.
    위 작업은 모바일 친화성 테스트에서 할 수 있다.

  • 사이트맵을 이용하기
    홈페이지 내부에서 중요한 정보와 페이지들에 연결될 수 있도록 구성해야한다.
    혹은 관련 url을 모두 제공해주는 사이트맵(xml)파일을 만들어서 구글에 제공하는 방법도 있다.

  • GOOGLE 웹마스터 가이드라인 잘 지키기
    광고링크, 구매한 링크, 댓글에 포함된 링크등은 GOOGLE에서 수집하지 않는다.
    이런 링크들은 <a>태그에 nofollow 속성을 추가하서 크롤링을 막을 수 있다.

  1. 색인 생성 개선하기

    콘텐츠 파악이 쉽도록 해야한다.
  • 페이지 제목은 짧고 의미있게 만들어야 한다.
    <head>요소 내에 <title> 태그를 꼭 사용해야 한다.
    반복되는 텍스트나 상용구 텍스트는 스팸처리 될 수 있다.

  • 페이지의 주제를 전달하는 페이지 제목을 사용한다.

  • 메타 설명 태그를 사용해야 한다.

    메타 태그는 검색엔진에 페이지의 내용을 요약해서 전달해준다. 스니펫으로 사용될 수 있기 때문에 추가하는것이 권장된다. 메타 설명 태그는 컨텐츠를 정확하게 요약 해야한다.
  • 강조해야할 내용의 경우 표제 태그를 사용해야 한다.
    <em>이나 <strong>태그를 사용하는 것이 권장된다.

  • 이미지나 비디오의 경우 alt(대체 텍스트)를 꼭 적어준다.
    텍스트를 통해 주석을 달아야 검색엔진이 이해하기가 더 쉽다.

  1. 검색 결과 게재 개선하기

  • 빠르게 로드되는 모바일 친화적인 페이지를 만들어야 한다.
    반응형 웹이 권장된다.

  • 유용한 컨텐츠를 포함하고 최신 상태로 유지한다.

  • GOOGLE 웹마스터 가이드라인을 따른다.

마무리

다음 게시글에선 고급 검색엔진 최적화와 내가 어떤 부분에 최적화를 적용했는지 적어보려고 한다.

관련 사이트

구글 모바일 친화성 테스트
네이버 사이트 간단 체크

ref

구글 검색센터
네이버 서치어드바이저
hexo plugin