# 검색 엔진 최적화하기

서두
SEO란?
기법들...
적용
해시태그
결론

Laptop and Coffee 커피 한잔 하시고...

# 서두

SEO(Search Engine Optimization, 검색 엔진 최적화)는 사이트에 유입자를 늘리기 위해서 매우 중요한 작업이다. 상품의 품질이 중요하지만 포장 역시 중요한 것과 같은 이치이다.

본문에서는 SEO가 무엇인지, 어떠한 기법들이 존재하는지, 그리고 검색엔진별 맞춤형 전략 들을 조사해보고 실제 본 사이트에도 적용해 보도록 하겠다.

# SEO란?

이미 좋은 글들이 존재하므로 내가 다시 정리할 필요는 없겠다. 간단 설명부터 구글과 네이버의 공식 가이드까지 있으니 원하는 깊이만큼 공부하면 될 것 같다.

간단히 말해보자면, 검색 엔진들의 크롤링 봇들은 이미 매우 똑똑하게 사이트들을 분석해서 사용자들이 검색어를 입력했을 때 원하는 사이트를 찾을 수 있도록 동작중이다. 다만 봇들이 사이트들의 순위를 매길 때, 어떤 키워드에 내 사이트가 상위에 등장할 수 있도록 여러가지 기법들을 적용하는 것을 SEO라고 할 수 있겠다.

SEO

# 기법들...

기법들은 찾아보니 한도 끝도 없을 정도로 너무 많다. 개인 사이트에 모두 적용할 수는 없는 노릇이므로 적당히 추려보면, 아래 나열한 것들 정도는 기본적으로 알고 적용해야겠다.

구글과 네이버의 알고리즘은 다르다.
알고리즘이 공개되어 있는건 아니라서 블랙박스 형태로 분석하는 수 밖에 없다.
title 태그와 meta name="description" 태그가 중요하다.
헤딩 태그 h1 ~ h6도 중요하다.
URL도 ID보다는 키워드가 포함되는 것이 좋다.
링크를 표현하는 a 태그의 텍스트도 중요한 정보이다.
img 태그의 alt 속성도 중요한 값이다.
robots.txt 작성이 필요하다.
sitemap.xml 작성이 필요하다.
다른 사이트에서 복사해온 텍스트는 감점 요인이 된다.
데스크탑과 모바일은 별도의 알고리즘이 적용된다.
https에도 점수가 부여된다.
내 사이트에서 다른 사이트로 링크가 있으면 내 사이트의 평판을 조금 나누어 주는 셈이므로 부정적 방향의 링크는 rel="nofollow" 속성이 필요하다.
페이스북이 시작한 오픈그래프 태그라는 것도 있다. (일단 무시하자)
Google Search Console을 활용해보자.

# 적용

Coding 코드에 적용해보자. VuePress에서는 기본값으로 title 태그에는 현 페이지의 h1 태그 값과 config.js의 title값이 | 기호로 조인되어 설정된다. meta description은 config.js의 description 값이 설정된다. 예를 들어 본 페이지는

<html lang="en-US">
  ...
  <title>검색 엔진 최적화하기 | 유기체의 다락방</title>
  <meta name="description" content="유기체의 개인 사이트입니다.">
  ...

1
2
3
4
5

이 설정된다. 그리고 주의할 점이 lang값이 기본으로 영어다.

팁

h1 태그가 없으면 그냥 config.js의 title 값만 지정된다.

그러나 페이지별로 각종 메타태그를 설정할 수 있다(Guide # Front Matter | VuePress (opens new window)). 본 페이지는 실제 아래처럼 설정되어 있다. 참고할 점은 지정한 title 값으로만 설정되진 않고 역시 | config.js의 title 값이 붙는다.

---
title: VuePress에 검색 엔진 최적화하기
lang: ko-KR
meta:
  - name: description
    content: 검색 엔진 최적화 SEO를 알아보고 VuePress에 적용해봅니다.
  - name: keywords
    content: SEO 검색 엔진 최적화
tags: ["SEO", "검색 엔진 최적화", "VuePress"]
---

1
2
3
4
5
6
7
8
9
10

참고

참고로 keywords 메타 태그는 오래전부터 존재하던 태그인데 너무 남발되고 악용되어서 구글에서는 현재 검색 대상이 되지 않는다고 한다(Meta keywords | yoast (opens new window)). 이 링크에서는 만약 keywords 메타 태그가 자동 생성되는 것이라면 손해볼 것은 없으니 놔두자고 제안한다.

주의

위 설정중 tags는 커스텀 값이다. 관련 내용은 아래 #해시태그 항목을 참고하자.

lang 속성은 ISO Language Code인데 ISO Language Code Table | Lingoes (opens new window)를 참고하자. 앞 소문자 두글자는 언어, 뒤 대문자 두글자는 국가코드로 보인다. 글로벌 사이트는 아니므로 굳이 페이지 별로 언어 설정을 할 필요는 없을 것이다.

설정의 루트 패스에 대한 로케일을 한글로 설정해주자.

module.exports = {
  ...
  locales: {
    '/': { lang: 'ko-KR' }
  },
  ...

1
2
3
4
5
6

# 해시태그

Hash Tag 해시태그 요즘 블로그나 SNS들을 보면 해시태그들을 많이들 달고 있다. 광고들도 그렇지만 개인들도 재미삼아 유행처럼 달고 있다. 해시태그는 클릭하면 관련 내용이 검색되는 시스템인데, 역시 SEO와 관련이 깊다. 별도의 글(VuePress에 태그 시스템 구축하기)에서 블로그 태그 시스템에 대해 다루어보겠다.

# 결론

검색 엔진 최적화는 알면 알수록 복잡하고 깊이가 깊은 분야이다. 개인 사이트에서는 제목과 메타 태그, 글에 등장하는 링크들만 잘 관리해도 기본적인 수준은 달성할 수 있을 것 같다. robots.txt와 sitemap.xml은 별도의 글에서 다루어 보도록 하겠다.

키워드: #VuePress

← 태그 시스템 구축하기 Component 실습 →